/*
Theme Name: SwiftRanks
Theme URI: https://swiftranks.com
Description: SwiftRanks child theme of Hello Elementor. Holds all SwiftRanks customisations so they survive parent theme updates. Design tokens live in Elementor Site Settings; this file carries only what Elementor cannot express.
Author: SwiftRanks
Version: 1.0.0
Template: hello-elementor
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: swiftranks
*/

/* Visible keyboard focus — Signal Amber, meets WCAG 2.4.7 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #F0A62A;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Every interactive target reaches 48px */
.elementor-button, button, input[type="submit"] { min-height: 48px; }

::selection { background: #F0A62A; color: #0B1D33; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ---------- SwiftRanks component polish ---------- */

/* Accordion headers were 23px tall — below the 44px tap minimum */
.elementor-accordion .elementor-tab-title {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 14px;
}
.elementor-accordion .elementor-tab-title .elementor-accordion-title { flex: 1; }

/* Inline SVG compositions: never exceed their column, never distort */
.elementor-widget-html svg { max-width: 100%; height: auto; display: block; }

/* Contact Form 7 inside the dark CTA card */
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"], .wpcf7-form textarea {
  width: 100%; min-height: 48px; padding: 13px 15px;
  border: 1.5px solid #C3D0E0; border-radius: 8px;
  font-family: "IBM Plex Sans", sans-serif; font-size: 15px; color: #0B1D33; background: #fff;
}
.wpcf7-form textarea { min-height: 110px; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus {
  outline: none; border-color: #2A5580; box-shadow: 0 0 0 3px rgba(42,85,128,.18);
}
.wpcf7-form input[type="submit"] {
  width: 100%; min-height: 48px; border: 0; border-radius: 8px; cursor: pointer;
  background: #F0A62A; color: #0B1D33;
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 15px;
}
.wpcf7-form input[type="submit"]:hover { background: #D08D14; }
.wpcf7-form label { font-size: 13px; font-weight: 600; color: #3A4D63; display: block; }
.wpcf7-form p { margin-bottom: 14px; }

/* Icon boxes: align icon to the text baseline in left position */
.elementor-widget-icon-box .elementor-icon-box-icon { margin-top: 2px; }


/* ================= SwiftRanks header and footer ================= */

.ekit-template-content-header {
  position: sticky; top: 0; z-index: 999;
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  backdrop-filter: saturate(170%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.09);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.admin-bar .ekit-template-content-header { top: 32px; }
@media (max-width:782px) { .admin-bar .ekit-template-content-header { top: 46px; } }
.ekit-template-content-header.is-stuck { background-color: rgba(11,29,51,.94) !important; box-shadow: 0 8px 30px rgba(4,16,30,.45); }
.sr-logo { display:block; text-decoration:none; }
.sr-logo svg { transition: transform .25s ease; }
.sr-logo:hover svg { transform: translateY(-1px); }

/* Desktop nav — governed by the design system, not the plugin */
.ekit-template-content-header .elementskit-navbar-nav > li > a {
  font-family:"IBM Plex Sans",sans-serif !important;
  font-size:15px !important; font-weight:500 !important;
  color:#C3D3E5 !important; padding:10px 14px !important;
  min-height:44px; display:flex; align-items:center;
  border-radius:6px; position:relative;
  transition:color .18s ease, background-color .18s ease;
}
.ekit-template-content-header .elementskit-navbar-nav > li > a:hover { color:#fff !important; background:rgba(255,255,255,.07); }
.ekit-template-content-header .elementskit-navbar-nav > li > a.active { color:#fff !important; }
.ekit-template-content-header .elementskit-navbar-nav > li > a.active::after {
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:#F0A62A; border-radius:2px;
}
.ekit-template-content-header .elementskit-submenu-panel { background:#12283F !important; border:1px solid #1F4468; border-radius:10px; overflow:hidden; padding:6px !important; }
.ekit-template-content-header .elementskit-submenu-panel a { color:#C3D3E5 !important; font-size:14px !important; border-radius:6px; min-height:40px; display:flex; align-items:center; }
.ekit-template-content-header .elementskit-submenu-panel a:hover { background:rgba(255,255,255,.07); color:#fff !important; }

.sr-phone { display:inline-flex; align-items:center; gap:8px; min-height:44px;
  color:#C3D3E5; text-decoration:none; font:500 14px/1 "IBM Plex Sans",sans-serif; transition:color .18s ease; }
.sr-phone:hover { color:#F0A62A; }
@media (max-width:1100px) { .sr-phone span { display:none; } }
.ekit-template-content-header .elementor-button { padding:11px 18px !important; font-size:14px !important; min-height:44px; }

/* Hamburger + offcanvas */
.ekit-template-content-header .elementskit-menu-hamburger { border-color:rgba(255,255,255,.28) !important; border-radius:8px; padding:11px !important; min-width:44px; min-height:44px; }
.ekit-template-content-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon { background-color:#fff !important; }
.ekit-template-content-header .elementskit-menu-offcanvas-elements,
.elementskit-menu-offcanvas-elements { background:#0B1D33 !important; }
.elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a {
  color:#C3D3E5 !important; font-size:17px !important; min-height:52px; padding:14px 20px !important;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.elementskit-menu-close { color:#fff !important; border-color:rgba(255,255,255,.28) !important; min-width:44px; min-height:44px; border-radius:8px; }

/* ---------------- footer ---------------- */
.ekit-template-content-footer .elementor-icon-list-item a {
  color:#C3D3E5; text-decoration:none; font:400 14px/1.6 "IBM Plex Sans",sans-serif;
  transition:color .18s ease, padding-left .18s ease;
}
.ekit-template-content-footer .elementor-icon-list-item a:hover { color:#F0A62A; padding-left:3px; }
.sr-badges { display:flex; flex-wrap:wrap; gap:8px; }
.sr-badges span {
  font:600 12px/1 "IBM Plex Sans",sans-serif; color:#C3D3E5;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:8px 12px; border-radius:999px;
}
.sr-contact { display:flex; flex-direction:column; gap:8px; }
.sr-contact a { color:#fff; text-decoration:none; font:500 15px/1.5 "IBM Plex Sans",sans-serif; min-height:28px; transition:color .18s ease; }
.sr-contact a:hover { color:#F0A62A; }
.sr-footer-bar { border-top:1px solid rgba(255,255,255,.09); }
.sr-legal { display:flex; gap:20px; flex-wrap:wrap; }
.sr-legal a { color:#6B7C91; text-decoration:none; font:400 13px/1 "IBM Plex Sans",sans-serif; min-height:44px; display:flex; align-items:center; transition:color .18s ease; }
.sr-legal a:hover { color:#C3D3E5; }

/* ================= depth & micro-interactions ================= */
.elementor-button { transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.elementor-button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(240,166,42,.28); }

/* Cards — soft layered shadow, lift on hover */
.e-con.e-child:has(> .elementor-widget-icon-box),
.e-con.e-child:has(> .elementor-widget-heading + .elementor-widget-text-editor) {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.e-con.e-child:has(> .elementor-widget-icon-box):hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(11,29,51,.10), 0 2px 6px rgba(11,29,51,.06);
  border-color: #C3D0E0 !important;
}
.elementor-widget-icon-box .elementor-icon { transition: transform .22s ease; }
.e-con.e-child:hover > .elementor-widget-icon-box .elementor-icon { transform: translateY(-2px); }

/* Accordion micro-interaction */
.elementor-accordion .elementor-tab-title { transition: background-color .18s ease; border-radius:8px; }
.elementor-accordion .elementor-tab-title:hover { background: rgba(11,29,51,.04); }

@media (prefers-reduced-motion: reduce) {
  .elementor-button:hover, .e-con.e-child:hover, .sr-logo:hover svg { transform:none !important; }
}


/* footer bottom bar: last child row of the footer template */
.ekit-template-content-footer .e-con-inner > .e-con.e-child:last-child {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: 24px;
}
/* header is sticky at the wrapper level */
.ekit-template-content-header { position: sticky; top: 0; z-index: 999; }


/* ============ specificity corrections ============
   ElementsKit and the Elementor kit both emit !important rules for nav and
   link colour, so these need to out-specify them rather than merely follow. */

body .ekit-template-content-header { position: sticky !important; top: 0; z-index: 999; }
body.admin-bar .ekit-template-content-header { top: 32px; }
@media (max-width:782px) { body.admin-bar .ekit-template-content-header { top: 46px; } }

/* tighten the header: 108px was too tall for a sticky bar */
.ekit-template-content-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
  color: #C3D3E5 !important;
  min-height: 44px !important;
  height: auto !important;
  line-height: 1.2 !important;
  padding: 11px 14px !important;
}
.ekit-template-content-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link:hover,
.ekit-template-content-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link.active {
  color: #FFFFFF !important;
}
.ekit-template-content-header .elementskit-navbar-nav > li { display: flex; align-items: center; }

/* footer link colour — the kit's global link colour was winning */
.ekit-template-content-footer .elementor-icon-list-item a,
.ekit-template-content-footer .elementor-icon-list-item .elementor-icon-list-text {
  color: #C3D3E5 !important;
}
.ekit-template-content-footer .elementor-icon-list-item a:hover,
.ekit-template-content-footer .elementor-icon-list-item a:hover .elementor-icon-list-text {
  color: #F0A62A !important;
}
.ekit-template-content-footer .sr-contact a { color: #FFFFFF !important; }
.ekit-template-content-footer .sr-contact a:hover,
.ekit-template-content-footer .sr-legal a:hover { color: #F0A62A !important; }
.ekit-template-content-footer .sr-legal a { color: #6B7C91 !important; }


/* ============ header sizing ============ */
/* desktop bar was 109px; a sticky bar should not eat that much viewport */
.ekit-template-content-header > .elementor > .e-con { padding-top: 12px !important; padding-bottom: 12px !important; }
.ekit-template-content-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link { padding: 10px 13px !important; }

/* ============ mobile header layout ============
   Below 768 the three columns wrapped to 166px tall and the CTA broke onto
   two lines. Force one row: brand | spacer | call + burger. */
@media (max-width: 767px) {
  .ekit-template-content-header .e-con-inner {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .ekit-template-content-header .e-con-inner > .e-con {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .ekit-template-content-header .e-con-inner > .e-con:nth-child(2) {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }
  /* the long "Free growth review" label cannot fit — on mobile the phone call
     is the higher-intent action for a trades customer, so promote it */
  .ekit-template-content-header .elementor-widget-button { display: none !important; }
  .ekit-template-content-header .sr-phone {
    background: #F0A62A; color: #0B1D33 !important;
    padding: 0 14px; border-radius: 8px;
    min-height: 44px; font-weight: 600;
  }
  .ekit-template-content-header .sr-phone span { display: inline !important; font-size: 14px; }
  .ekit-template-content-header .sr-phone span::before { content: "Call"; }
  .ekit-template-content-header .sr-phone span { font-size: 0; }
  .ekit-template-content-header .sr-phone span::before { font-size: 14px; }
  .ekit-template-content-header .sr-logo svg { height: 32px; }
}

/* offcanvas: give the mobile menu a real CTA at the end of the list */
.elementskit-menu-offcanvas-elements .elementskit-navbar-nav::after {
  content: "";
  display: block; height: 1px; margin: 16px 20px 0;
  background: rgba(255,255,255,.1);
}


/* ============ header height breakdown ============
   133px came from: 24px outer padding + 28px inner padding + an 80px tall
   ElementsKit nav widget. Collapse all three to land on ~68px. */
.ekit-template-content-header .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.ekit-template-content-header .elementor-widget-ekit-nav-menu,
.ekit-template-content-header .elementor-widget-ekit-nav-menu .ekit-wid-con,
.ekit-template-content-header .elementskit-menu-container,
.ekit-template-content-header .elementskit-navbar-nav {
  min-height: 0 !important;
  height: auto !important;
}
.ekit-template-content-header .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
  height: 44px !important;
  min-height: 44px !important;
}


/* ================= premium component layer ================= */

/* Scroll reveal, CSS-only. No JS, no layout thrash. Content is visible by
   default so browsers without scroll-driven animation lose nothing. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sr-reveal {
      animation: srReveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes srReveal {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* --- statistic card --- */
.sr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.sr-stat {
  background: #fff; border: 1px solid #DCE4EF; border-radius: 14px; padding: 24px 20px;
  box-shadow: 0 1px 2px rgba(11,29,51,.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
.sr-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(11,29,51,.09); }
.sr-stat b {
  display: block; font-family: Manrope, sans-serif; font-weight: 800;
  font-size: clamp(28px, 4vw, 40px); line-height: 1; letter-spacing: -.03em;
  color: #0B1D33; font-variant-numeric: tabular-nums;
}
.sr-stat span { display: block; margin-top: 8px; font-size: 13.5px; color: #6B7C91; line-height: 1.45; }
.sr-stat.is-dark { background: #12283F; border-color: #1F4468; }
.sr-stat.is-dark b { color: #F0A62A; }
.sr-stat.is-dark span { color: #8A9DB4; }

/* --- google review card --- */
.sr-review {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid #DCE4EF; border-radius: 14px; padding: 18px 22px;
  box-shadow: 0 1px 2px rgba(11,29,51,.05);
}
.sr-review .sr-score { font-family: Manrope, sans-serif; font-weight: 800; font-size: 34px; color: #0B1D33; line-height: 1; }
.sr-review .sr-meta { display: flex; flex-direction: column; gap: 4px; }
.sr-review .sr-stars { display: flex; gap: 3px; }
.sr-review .sr-stars svg { width: 15px; height: 15px; fill: #F0A62A; }
.sr-review .sr-count { font-size: 12.5px; color: #6B7C91; }

/* --- pull quote --- */
.sr-pull {
  position: relative; padding: 28px 28px 28px 30px;
  background: #fff; border-radius: 14px; border: 1px solid #DCE4EF;
  border-left: 3px solid #F0A62A;
}
.sr-pull p { font-family: Manrope, sans-serif; font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: #0B1D33; font-weight: 600; margin: 0; }
.sr-pull cite { display: block; margin-top: 14px; font-style: normal; font-size: 13.5px; color: #6B7C91; }

/* --- highlight box --- */
.sr-highlight {
  background: linear-gradient(180deg, #FFF7E8, #FFFDF8);
  border: 1px solid #F3D9A6; border-radius: 12px; padding: 20px 22px;
}
.sr-highlight strong { color: #0B1D33; }
.sr-highlight p { margin: 0; color: #3A4D63; font-size: 15px; line-height: 1.6; }

/* --- placeholder marker: unmistakable, easy to grep before launch --- */
.sr-placeholder {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px/1 "IBM Plex Sans", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: #8A5A06; background: rgba(240,166,42,.16);
  border: 1px dashed rgba(240,166,42,.55); border-radius: 999px; padding: 6px 11px;
}

/* --- client logo placeholders --- */
.sr-logos { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sr-logos span {
  display: grid; place-items: center; min-width: 132px; height: 52px; padding: 0 18px;
  border: 1px dashed #C3D0E0; border-radius: 10px;
  font: 600 12px/1 "IBM Plex Sans", sans-serif; letter-spacing: .08em; color: #8A9DB4;
}

/* --- certification / trust badges --- */
.sr-certs { display: flex; flex-wrap: wrap; gap: 10px; }
.sr-certs span {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 12.5px/1 "IBM Plex Sans", sans-serif; color: #0A5C3F;
  background: #DFF3EA; border-radius: 999px; padding: 9px 14px;
}

/* --- section divider: soft transition between bands --- */
.sr-divider { display: block; width: 100%; height: 48px; }
.sr-divider svg { display: block; width: 100%; height: 100%; }

/* --- animated link underline --- */
.sr-link {
  position: relative; color: #8A5A06; text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
}
.sr-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 10px; height: 2px;
  background: #F0A62A; transition: right .28s cubic-bezier(.22,.61,.36,1);
}
.sr-link:hover::after { right: 0; }
.sr-link svg { transition: transform .22s ease; }
.sr-link:hover svg { transform: translateX(3px); }

/* --- comparison rows --- */
.sr-compare { display: grid; gap: 10px; }
.sr-compare div { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.55; }
.sr-compare .yes { color: #0B1D33; }
.sr-compare .no  { color: #6B7C91; }
.sr-compare svg { width: 22px; height: 22px; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
  .sr-stat:hover, .sr-link:hover svg { transform: none; }
}


/* logo tap target: the mark is 36px tall, the hit area must be 44 */
.sr-logo { display: inline-flex; align-items: center; min-height: 44px; }
/* the accordion click handler sits on .elementor-tab-title (55px); make the
   inner anchor fill it so assistive tooling measures the real target */
.elementor-accordion .elementor-tab-title > a,
.elementor-accordion .elementor-accordion-title {
  display: flex; align-items: center; min-height: 44px; width: 100%;
}


/* AA contrast corrections — measured, not assumed.
   #6B7C91 on white is 4.27:1 at these sizes; #5B6B80 clears 4.5:1. */
.sr-stat span, .sr-review .sr-count, .sr-pull cite { color: #5B6B80; }
.sr-logos span { color: #5B6B80; }