/* ------------------------------------------------------------------
   Rapid Ready Ai — theme customisations
   Auto-loaded by includes/head.tpl when this file exists at
   core/styles/<style>/assets/css/theme-custom.css
   NOTE: lagom-cms.css loads AFTER this file, so anything it also sets
   needs to win on specificity, not source order.
   ------------------------------------------------------------------ */

/* Footer: "Platforms:" is a section label, not a link.
   Lagom's footerprimary.tpl renders every child menu item as <a>, and the
   footer menu offers no Divider / Header Collapse item type, so the label is
   a Custom Link pointing at #platforms and is neutralised here.
   Added 2026-09-15.
   2026-09-16: dropped `margin-top: 1.25rem` and `display: inline-block` so the
   label keeps the same vertical rhythm as every other footer link. The theme
   sets `.footer-nav>li>a{display:flex;padding:var(--main-footer-link-padding-v) ...}`
   and that padding is what spaces the column evenly; overriding display to
   inline-block replaced the flex box and the margin added a gap on top of it,
   so Live Chat -> Platforms: -> RRAi Chat sat wider apart than the neighbouring
   columns. Styling stays, spacing no longer differs. */
.footer-nav li a.nav-link[href="#platforms"] {
    pointer-events: none;
    cursor: default;
    font-weight: 600;
    opacity: 1;
    color: #fff;
}

.footer-nav li a.nav-link[href="#platforms"] span {
    font-weight: 600;
    letter-spacing: .02em;
}

.footer-nav li a.nav-link[href="#platforms"]:hover,
.footer-nav li a.nav-link[href="#platforms"]:focus {
    text-decoration: none;
    color: #fff;
}

/* Featured plan emphasis (AI Workforce Team on /ai).
   Written 2026-08-25 but saved to assets/css/vars/custom.css — one directory
   below either path head.tpl loads — so it never reached the browser. Moved
   here 2026-09-15, and strengthened: CMS package cards also carry .is-bordered,
   which lagom-cms.css paints via
   `.lagom-futuristic .site-section:not(.section-gray) .package.is-bordered`
   (0,5,0). The original `.package.package-featured` (0,2,0) lost to it, so the
   rule would not have worked from the correct path either. */
.lagom-futuristic .site-section:not(.section-gray) .package.is-bordered.package-featured,
.package.is-bordered.package-featured,
.package.package-featured {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 1px var(--brand-primary);
}

/* ---- New homepage design ("Home of Ai", CMS page 230; later page 157), scoped by
   Page Settings > Body class "rr-home". No other page carries that class, so nothing
   here reaches the live site until a page is given it. Added 2026-10-10.
   lagom-cms.css loads after this file: each selector is checked to out-specify it. ---- */
/* 1. Phones: hide the type-1 hero illustration so the H1 and buttons come first.
      .banner-background wraps both the graphic and the shape (banner.tpl l.184). */
@media (max-width: 767.98px) {
  body.rr-home .site-banner.banner-type-1 .banner-background { display: none !important; }
}
/* 2. Contrast, captions: #E76D5A was 3.65:1 on the median background. #FFB3A3 is 6.65:1.
      (0,4,1) beats the two (0,4,0) theme rules on the banner caption. */
body.rr-home .site-banner.banner .banner-caption,
body.rr-home .site-section .section-caption { color: #FFB3A3; }
/* 5. Contrast, solid primary buttons: white on #d14c4c is 4.33:1; on #C42A10 it is 5.7:1. */
body.rr-home .site-banner .btn.btn-primary:not(.btn-outline):not(.btn-link),
body.rr-home .site-section .btn.btn-primary:not(.btn-outline):not(.btn-link) {
  background-color: #C42A10; border-color: #C42A10; color: #fff; }
body.rr-home .site-banner .btn.btn-primary:not(.btn-outline):not(.btn-link):hover,
body.rr-home .site-section .btn.btn-primary:not(.btn-outline):not(.btn-link):hover,
body.rr-home .site-banner .btn.btn-primary:not(.btn-outline):not(.btn-link):focus,
body.rr-home .site-section .btn.btn-primary:not(.btn-outline):not(.btn-link):focus {
  background-color: #A8240D; border-color: #A8240D; }
/* 3b. Phones: the hero subtitle renders at 21px on a 40px line, which pushes the main
       button below the 844px first screen. A tighter setting keeps it in view. Added 2026-10-10. */
@media (max-width: 575.98px) {
  body.rr-home .site-banner.banner .banner-subtitle { font-size: 17px; line-height: 1.55; }
}
/* 4. Hero -> role grid join. "Combine with section below" strips the hero's bottom padding,
      so the buttons sat on the band's edge, then the grid's sideways gradient made a visible
      step, then 80px of padding (lagom-cms.css forces it with padding-top: var(--cms-section-combined-margin) !important, so the variable is set here instead). Give the hero room under its buttons, and paint the grid with
      the hero's bottom colour so the two read as one band. Added 2026-10-10. */
body.rr-home .site-banner.rr-home-hero .banner-content { padding-bottom: 72px; }
body.rr-home .site-section.rr-home-roles.section-gray { background: rgba(92, 104, 127, 0.16); --cms-section-combined-margin: 40px; }
@media (max-width: 767.98px) {
  body.rr-home .site-banner.rr-home-hero .banner-content { padding-bottom: 48px; }
  body.rr-home .site-section.rr-home-roles.section-gray { --cms-section-combined-margin: 32px; }
}
/* 5. Even icon sizes in the icon-left lists (role grid, "what hosting includes"). The small
      icon-left layout gives the icon box no fixed width, so longer descriptions squeezed the
      icons to anything from 15px to 32px. Added 2026-10-10. */
body.rr-home .rr-home-roles .feature-icon,
body.rr-home .rr-home-hosting-incl .feature-icon { flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; }
body.rr-home .rr-home-roles .feature-icon svg,
body.rr-home .rr-home-hosting-incl .feature-icon svg { width: 40px; height: 40px; }
/* 6. Small polish: centre the domain price note under the centred TLD tiles, and drop the
      footer's top border, which otherwise runs behind the boxed closing call to action. Added 2026-10-10. */
body.rr-home .rr-home-domains .section-additional-info { text-align: center; }
body.rr-home .main-footer { border-top-color: transparent; }
/* 7. Phones: two cards per row, compact cards and tighter section spacing, so the page scans
      quickly on a phone. Owner request 2026-10-10. */
@media (max-width: 575.98px) {
  body.rr-home .site-section:not(.rr-home-cta) { padding-top: 48px; padding-bottom: 48px; }
  body.rr-home .site-section.rr-home-hosting-incl { --cms-section-combined-margin: 24px; }
  body.rr-home .rr-home-roles .row, body.rr-home .rr-home-hosting .row, body.rr-home .rr-home-hosting-incl .row,
  body.rr-home .rr-home-how .row, body.rr-home .rr-home-why .row { margin-left: -6px; margin-right: -6px; }
  body.rr-home .rr-home-roles .row > [class*="col-"], body.rr-home .rr-home-hosting .row > [class*="col-"],
  body.rr-home .rr-home-hosting-incl .row > [class*="col-"], body.rr-home .rr-home-how .row > [class*="col-"],
  body.rr-home .rr-home-why .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; padding-left: 6px; padding-right: 6px; }
  body.rr-home .rr-home-roles .feature.feature-icon-left .feature-body,
  body.rr-home .rr-home-hosting-incl .feature.feature-icon-left .feature-body { flex-direction: column; align-items: flex-start; }
  body.rr-home .rr-home-roles .feature.feature-icon-left .feature-icon,
  body.rr-home .rr-home-hosting-incl .feature.feature-icon-left .feature-icon { margin: 0 0 8px 0; }
  body.rr-home .rr-home-roles .feature, body.rr-home .rr-home-hosting .feature, body.rr-home .rr-home-hosting-incl .feature,
  body.rr-home .rr-home-how .feature, body.rr-home .rr-home-why .feature { padding: 14px 12px; }
  body.rr-home .rr-home-roles .feature-title, body.rr-home .rr-home-hosting .feature-title, body.rr-home .rr-home-hosting-incl .feature-title,
  body.rr-home .rr-home-how .feature-title, body.rr-home .rr-home-why .feature-title { font-size: 15px; line-height: 1.3; }
  body.rr-home .rr-home-roles .feature-desc, body.rr-home .rr-home-hosting .feature-desc, body.rr-home .rr-home-hosting-incl .feature-desc,
  body.rr-home .rr-home-how .feature-desc, body.rr-home .rr-home-why .feature-desc { font-size: 13px; line-height: 1.45; }
  body.rr-home .rr-home-hosting .feature-icon svg { width: 40px; height: 40px; }
  body.rr-home .rr-home-roles .feature .btn-link, body.rr-home .rr-home-hosting .feature .btn-link,
  body.rr-home .rr-home-why .feature .btn-link { font-size: 12px; }
}
/* 8. Phones: smaller section headings and intros (they were 32px and 21px on a 40px line). Added 2026-10-10. */
@media (max-width: 575.98px) {
  body.rr-home .site-section .section-title { font-size: 26px; line-height: 1.2; }
  body.rr-home .site-section .section-subtitle { font-size: 16px; line-height: 1.5; }
}

/* ---- Compare tables: hide the theme's dead "Chat With Expert" link. Added 2026-10-10 (go-live step i9).
   lagom2/core/cms/sections/config/compare-packages/compare-packages.tpl (~l.356) hard-codes
   <a href="javascript:void(Tawk_API.toggle())">Chat With Expert</a> in [data-sticky-header-bottom].
   Tawk is not loaded on this site and support is by ticket and email, so the link does nothing.
   lagom-cms.js copies that element's text into [data-plan-header-text-bottom] when such an element
   exists, so both are hidden. Theme file left untouched (survives Lagom updates).
   Remove this block if live chat is ever added. ---- */
.site-section.section-compare-packages [data-sticky-header-bottom],
.site-section.section-compare-packages [data-plan-header-text-bottom] { display: none !important; }