/* ============================================================
   Naftoon — Responsive overrides
   Below 1100px the 1440px scaled-page approach is disabled and
   pages render with a real responsive layout. Desktop (1100+)
   is untouched — visual identity is preserved.
   ============================================================ */

/* ----- Mobile drawer: hidden by default at every viewport.
   The drawer markup is always emitted by chrome.js so that resizing
   from desktop -> mobile keeps the menu available, but it must never
   render on desktop. The media query below opens it (with .is-open). */
.mobile-nav,
.nav-toggle {
  display: none !important;
}

@media (max-width: 1100px) {
  /* Prevent any horizontal scroll — every element capped to its parent's width. */
  html, body { overflow-x: hidden; }
  body, .stage, .stage .page, .stage .inner-page, section, header, footer, main, .content {
    max-width: 100vw;
  }

  /* Stop the page from being scaled — let real CSS layout drive it. */
  .stage {
    height: auto !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  .stage .page,
  .stage .inner-page {
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  /* Force ALL sections inside the page to be width-constrained */
  .page > *,
  .inner-page > * {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  /* Content wrappers */
  .content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* Defensive: break long words to prevent overflow */
  h1, h2, h3, h4, p { word-wrap: break-word; overflow-wrap: break-word; }

  /* ---- Site header (absolute -> sticky flex flow) ----
     On mobile the header is sticky to the top of the viewport so users always
     have nav access, even though in the DOM it lives inside <section.hero>. */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    inset: auto !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    z-index: 60;
    /* Pull header to top of its parent section visually */
    margin: 0 0 -1px 0;
  }
  .site-header.on-dark {
    background: var(--dark);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  /* Hero sections house the header in DOM — give them flex column so header stays at top */
  .hero,
  .inner-hero {
    display: flex !important;
    flex-direction: column;
  }
  .hero .site-header,
  .inner-hero .site-header {
    order: -1;
  }
  /* Inner hero content sits below the sticky header */
  .inner-hero .content {
    flex: 1;
    padding-top: 24px !important;
  }
  .site-header .logo-badge {
    position: static !important;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .site-header .logo-badge .shield { display: none; }
  .site-header .logo-badge img {
    position: static !important;
    width: 36px;
    height: 36px;
  }
  .site-header .logo-badge .name {
    position: static !important;
    width: auto;
    color: var(--ink);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-align: left;
  }
  .site-header.on-dark .logo-badge .name { color: #fff; }

  /* Desktop nav hidden; hamburger takes over */
  .site-nav { display: none !important; }
  .header-pill { display: none !important; }
  .header-search { display: none !important; }

  /* Hamburger button (created by chrome.js) — re-enable on mobile */
  .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    padding: 0 !important;
  }
  .site-header.on-dark .nav-toggle {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff;
  }
  .nav-toggle svg { width: 22px; height: 22px; }

  /* Mobile nav drawer — only relevant inside this media query */
  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    color: var(--ink);
    /* Keep hidden until opened — overrides the global !important via same selector specificity in cascade order */
    display: none !important;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px 20px 32px;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav.is-open { display: flex !important; }
  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }
  .mobile-nav-header .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .mobile-nav-header .brand img { width: 30px; height: 30px; }
  .mobile-nav .close-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .mobile-nav li > a,
  .mobile-nav li > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 4px;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-align: left;
    border: 0;
    background: transparent;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav li > a.is-active { color: var(--red); font-weight: 600; }
  .mobile-nav li > a.is-active::after,
  .mobile-nav li > button.is-active::after { content: none; }
  .mobile-nav .sub {
    display: none;
    padding-left: 12px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav .sub.is-open { display: block; }
  .mobile-nav .sub-group { padding: 10px 0; }
  .mobile-nav .sub-group .sub-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--red);
    text-transform: uppercase;
    margin: 4px 0 6px;
  }
  .mobile-nav .sub-group a {
    display: block;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-2);
  }
  .mobile-nav .nav-extras {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mobile-nav .nav-extras a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 13px;
    color: var(--text-2);
  }
  .mobile-nav .nav-extras a svg { width: 16px; height: 16px; }
  body.no-scroll { overflow: hidden; }

  /* ---- HOME hero — drop most decorative absolute pieces ---- */
  .hero {
    width: 100% !important;
    height: auto !important;
    padding: 32px 20px 56px !important;
    overflow: hidden;
  }
  .hero .stage-bg,
  .hero .pattern,
  .hero .red-pill,
  .hero .ambient,
  .hero .ellipse,
  .hero .red-tri,
  .hero .video-circle,
  .hero .circle-glass,
  .hero .arc,
  .hero .red-flag {
    display: none !important;
  }
  .hero .workers {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 280px !important;
    background-size: contain !important;
    background-position: center bottom !important;
    margin-top: 20px;
  }
  .hero .copy {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 600px;
  }
  .hero .copy h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  .hero .pager,
  .hero .indicators {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-top: 16px;
  }
  .hero .pager { gap: 10px; }
  .hero .indicators { display: none !important; }

  /* ---- HOME — Discover & subsequent sections ---- */
  .discover,
  .vision,
  .partners,
  .news-strip,
  .map-cta,
  .contact-block {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 56px 20px !important;
    overflow: visible !important;
  }
  .discover .rings,
  .discover .title-motif {
    display: none !important;
  }
  .discover-grid,
  .discover .grid,
  .grid-3,
  .grid-2,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  @media (min-width: 640px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  }

  /* ---- INNER hero — shorter, simpler ---- */
  .inner-hero {
    height: auto !important;
    min-height: 360px;
    padding: 0 0 48px;
  }
  .inner-hero .content {
    padding-top: 32px !important;
  }
  .inner-hero h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }
  .inner-hero p { font-size: 13px !important; }
  .inner-hero .red-stripe {
    width: 18px !important;
    height: 120px !important;
    top: 80px !important;
  }

  /* ---- Sections ---- */
  section.section,
  section.block {
    /* Use longhand so we don't clobber any horizontal padding from .content */
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .section h2 { font-size: 22px !important; }
  .section .lead { font-size: 13px; max-width: 100%; }
  .split {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .split .img { height: 240px !important; }
  .kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    padding: 36px 0 !important;
  }
  .kpi .v { font-size: 32px !important; }

  /* ---- Cards ---- */
  .card { height: auto !important; min-height: 220px; padding: 18px !important; }
  .card.media { height: 240px !important; }

  /* ---- Timeline (centered line -> single column) ---- */
  .timeline::before { left: 18px !important; }
  .timeline .item {
    grid-template-columns: 36px 1fr !important;
    gap: 14px !important;
  }
  .timeline .item .l,
  .timeline .item .r { order: unset !important; text-align: left !important; }
  .timeline .item.left .l { display: none; }
  .timeline .item.right .r { display: none; }
  .timeline .item .dot { margin: 8px 0 0 !important; }
  .timeline .item .y { font-size: 24px !important; }

  /* ---- Feature strip ---- */
  .feature-strip {
    height: auto !important;
    flex-direction: column;
    align-items: flex-start !important;
    padding: 32px 24px !important;
    gap: 18px;
  }
  .feature-strip h3 { font-size: 20px !important; }

  /* ---- Pagination & filters ---- */
  .filter-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    margin-bottom: 24px !important;
    padding-bottom: 4px;
  }
  .filter-bar a {
    flex: none;
    white-space: nowrap;
    padding: 8px 16px !important;
    font-size: 11px !important;
  }
  .pagination { flex-wrap: wrap; }

  /* ---- Form ---- */
  .form { grid-template-columns: 1fr !important; }
  .form .full { grid-column: auto !important; }

  /* ---- Price widget (auto-injected above footer) ---- */
  .price-widget {
    width: 100% !important;
    padding: 48px 20px !important;
  }
  .price-widget .pw-inner {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 32px 24px !important;
    gap: 28px !important;
  }
  .price-widget .pw-head h2 { font-size: 22px !important; }
  .price-widget .pw-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .price-widget .pw-canvas { height: 200px !important; }
  .price-widget .pw-ranges { justify-content: flex-start !important; }
  .price-widget .pw-tab { padding: 6px 11px !important; font-size: 10px !important; }

  /* ---- Footer ---- */
  .site-footer {
    width: 100% !important;
    padding: 48px 20px 16px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 0 !important;
    text-align: center;
  }
  .footer-desc { max-width: 100%; text-align: center; }
  .footer-logo {
    width: 140px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .footer-logo .pad {
    position: static !important;
    width: 100% !important;
    height: 100px !important;
    border-radius: 0 0 0 20px;
  }
  .footer-logo img {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%);
    width: 140px !important;
    height: 140px !important;
  }
  .footer-logo span {
    position: relative !important;
    top: auto !important;
    margin-top: 8px;
    letter-spacing: 0.15em;
    font-size: 13px;
  }
  .social {
    width: auto !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  .footer-companies {
    gap: 24px !important;
    flex-wrap: wrap;
  }
  .footer-company {
    font-size: 14px !important;
    gap: 12px;
  }
  .footer-company img { width: 56px !important; }
  .footer-copyright {
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    height: auto !important;
    padding: 18px 12px !important;
    line-height: 1.5;
  }
  .footer-copyright::after { display: none; }

  /* ---- Misc decorative elements that don't translate ---- */
  .hero-arc,
  .red-block,
  .title-motif .vline,
  .title-motif .ring,
  .title-motif .arrow-down { display: none !important; }
}

/* ============================================================
   Small phones (≤480) — fine-tuning above the tiny breakpoint
   ============================================================ */
@media (max-width: 480px) {
  .hero .copy h1,
  .inner-hero h1 {
    font-size: 26px !important;
    letter-spacing: 0.02em !important;
  }
  .section h2 { font-size: 20px !important; }
  .price-widget .pw-head h2 { font-size: 20px !important; }
  .price-widget .pw-inner { padding: 24px 18px !important; }
  .price-widget .pw-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi .v { font-size: 26px !important; }
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .filter-bar a { padding: 7px 14px !important; }
  .crumbs { font-size: 11px !important; margin-bottom: 16px !important; }
  .inner-hero .red-stripe {
    width: 12px !important;
    height: 80px !important;
    top: 60px !important;
  }
  .footer-companies { gap: 16px !important; }
  .footer-company { font-size: 12px !important; gap: 8px; }
  .footer-company img { width: 44px !important; }
}

/* ============================================================
   Tablet refinements (640–1100)
   ============================================================ */
@media (min-width: 640px) and (max-width: 1100px) {
  .price-widget .pw-kpis {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr !important;
    text-align: left;
  }
  .footer-desc { text-align: left; }
  .social { justify-content: flex-end !important; }
}

/* ============================================================
   Universal polish — applies at all sizes
   ============================================================ */

/* Skip to content (a11y) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--red);
  color: #fff;
  padding: 10px 16px;
  z-index: 9999;
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* Visible focus indicator everywhere */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.site-header.on-dark :focus-visible {
  outline-color: #fff;
}

/* Smoother default transitions */
.card,
.page-tile,
.filter-bar a,
.pagination a,
.social a,
.btn-more,
.mm-col a {
  transition:
    transform 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Better link hover for footer pieces */
.site-footer a:hover { color: var(--red); }

/* Buttons that are visually buttons but semantically links */
button.link-as-button { all: unset; cursor: pointer; }

/* Mega menu — slight spacing fix */
.mega-menu .mm-col ul a { padding: 4px 0; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mobile-nav { transition: none !important; }
}

/* ============================================================
   Touch-target minimums (≤1100px) — ui-ux-pro-max guideline:
   "Touch Target Size" HIGH severity, min 44×44px on mobile.
   Expands the *hit area* via padding without changing visual
   typography or layout. Pure-additive: no existing rule overridden.
   ============================================================ */
@media (max-width: 1100px) {
  /* Inline "read more" CTAs across the home page sections.
     Visual stays the same; clickable area grows vertically. */
  .magazine .head .more,
  .row-block .more,
  .reports .titles .more,
  a.more,
  a.btn-more,
  .btn-more {
    min-height: 44px;
    padding: 12px 0 !important;
    box-sizing: content-box;
  }
  /* "Read More" buttons inside article cards. */
  .row-block .ncard .info button,
  .row-block .ncard button {
    min-height: 44px;
    padding: 14px 22px !important;
  }
  /* Hamburger button — bump 40→44. */
  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
  }
  /* Footer social icons — bump 40→44. */
  .site-footer .social a {
    width: 44px !important;
    height: 44px !important;
  }
  /* Price-widget time-range pills (24h/7d/30d/90d/1y). */
  .price-widget .pw-range {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px !important;
  }
  /* Hero ring buttons on the home slider (43→44). */
  .hero .pager .ring,
  .hero .video-circle,
  .hero .circle-glass {
    min-width: 44px;
    min-height: 44px;
  }
  /* Same-side touch targets need ≥8px spacing — already guaranteed by gap
     utilities everywhere we use them; nothing to override. */
}