/* ================================================================
   ROOFINGFOX — PAGES.CSS
   Inner page styles, responsive polish, accessibility, print
   ================================================================ */

/* ── SCROLL MARGIN FOR ANCHOR LINKS ── */
[id] { scroll-margin-top: 90px; }

/* ── STICKY SERVICE SUBNAV ── */
.svc-subnav__link.active {
  color: var(--text-primary);
  border-color: var(--accent);
}

/* ── BLOG DETAIL ARTICLE BODY ── */
.art-body ul {
  list-style: none;
  margin-left: 0;
  margin-bottom: var(--s-5);
}

/* ── LEGAL LAYOUT RESPONSIVE ── */
@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }
  .legal-toc {
    position: static;
  }
}

/* ── MODAL FORM GRID MOBILE ── */
@media (max-width: 540px) {
  .modal__bd .g-2,
  #c-form .g-2 {
    grid-template-columns: 1fr;
  }
}

/* ── ABOUT PAGE RESPONSIVE ── */
@media (max-width: 768px) {
  .certs {
    grid-template-columns: repeat(2, 1fr);
  }
  .team {
    grid-template-columns: 1fr;
  }
  .vals {
    grid-template-columns: 1fr;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* ── SERVICES PAGE ── */
@media (max-width: 768px) {
  .svc-detail {
    grid-template-columns: 1fr;
    padding-block: var(--s-16);
  }
  .svc-detail--flip .svc-vis {
    order: 0;
  }
  .svc-vis {
    display: none;
  }
}

/* ── CONTACT LAYOUT ── */
@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .info-card {
    position: static;
  }
}

/* ── BLOG DETAIL SIDEBAR ── */
@media (max-width: 1024px) {
  .art-layout {
    grid-template-columns: 1fr;
  }
  .sb {
    position: static;
  }
}

/* ── FAQ OPEN STATE ── */
.faq-item.open .faq-btn {
  color: var(--accent-lighter);
}

/* ── COOKIE BANNER REFINEMENT ── */
@media (max-width: 480px) {
  .cookie {
    left: var(--s-3);
    right: var(--s-3);
    bottom: var(--s-3);
    border-radius: var(--r-xl);
  }
  .cookie__btns {
    flex-direction: column;
  }
}

/* ── FOOTER GRID ── */
@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
}
@media (max-width: 580px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .footer__legal {
    flex-wrap: wrap;
    gap: var(--s-3);
  }
}

/* ── TEAM CARDS ── */
@media (max-width: 900px) {
  .team {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── CERTS GRID ── */
@media (max-width: 580px) {
  .certs {
    grid-template-columns: 1fr;
  }
}

/* ── PRICING GRID ── */
@media (max-width: 860px) {
  .g-3.pcard-grid {
    grid-template-columns: 1fr;
  }
}

/* ── STATS BAND RESPONSIVE ── */
@media (max-width: 600px) {
  .stats-band .g-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
  }
}

/* ── FEATURED POST BLOG ── */
@media (max-width: 640px) {
  .feat-post {
    grid-template-columns: 1fr;
  }
  .feat-post__vis {
    aspect-ratio: 16/9;
  }
}

/* ── HERO RESPONSIVE ── */
@media (max-width: 768px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--s-10);
  }
  .hero {
    min-height: auto;
    padding-block: var(--s-16);
  }
  .hero__visual {
    display: none;
  }
  .hero__grid {
    display: none;
  }
  .hero__glow-1,
  .hero__glow-2 {
    display: none;
  }
  .about-strip {
    grid-template-columns: 1fr;
  }
  .about-vis {
    display: none;
  }
  .cta-band__inner {
    flex-direction: column;
  }
}

/* ── PROCESS STEPS MOBILE ── */
@media (max-width: 480px) {
  .pstep {
    grid-template-columns: 40px 1fr;
    gap: var(--s-4);
  }
  .pstep__num {
    font-size: var(--t-xl);
    padding-top: 4px;
  }
}

/* ── TIMELINE MOBILE ── */
@media (max-width: 480px) {
  .tl-item {
    grid-template-columns: 56px 1fr;
    gap: var(--s-4);
  }
  .tl-yr {
    font-size: var(--t-lg);
    padding-top: 2px;
  }
}

/* ── 404 PAGE MOBILE ── */
@media (max-width: 480px) {
  .nf__btns {
    flex-direction: column;
    align-items: center;
  }
  .nf__btns .btn {
    width: 100%;
    justify-content: center;
  }
  .nf__sitemap {
    gap: var(--s-4);
  }
}

/* ── BLOG DETAIL READING PROGRESS ── */
.art-prog {
  transition: width 0.08s linear;
}

/* ── HOME SECTION GLOW CONTAINMENT ── */
.section > .hero__glow-1 {
  pointer-events: none;
}

/* ── ACCESSIBILITY: HIGH CONTRAST ── */
@media (forced-colors: active) {
  .btn-primary {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }
  .chip--accent {
    border: 1px solid ButtonText;
  }
  .pcard--featured::after {
    background: Highlight;
  }
  .nav__link.active::after {
    background: Highlight;
  }
}

/* ── REDUCED MOTION (additional specificity) ── */
@media (prefers-reduced-motion: reduce) {
  .hero__card--float-1,
  .hero__card--float-2 {
    animation: none;
  }
  .hero__scroll-line {
    animation: none;
  }
  .hero__glow-1,
  .hero__glow-2 {
    animation: none;
  }
  .nf__orb-1,
  .nf__orb-2 {
    animation: none;
  }
  .nf__code-dot {
    animation: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── SELECTION COLOUR ── */
::selection {
  background: var(--accent);
  color: #fff;
}
::-moz-selection {
  background: var(--accent);
  color: #fff;
}

/* ── CUSTOM SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: var(--bg-surface-3);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── PRINT ── */
@media print {
  .nav,
  .footer,
  .cookie,
  .modal-overlay,
  .btt,
  .nf__orb-1,
  .nf__orb-2,
  .hero__glow-1,
  .hero__glow-2,
  .page-hero::before {
    display: none !important;
  }
  .page-content {
    padding-top: 0;
  }
  body {
    background: #fff;
    color: #000;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
  .legal-layout {
    grid-template-columns: 1fr;
  }
  .legal-toc {
    display: none;
  }
  .t-gradient,
  .t-accent-gradient {
    -webkit-text-fill-color: #000;
    background: none;
  }
  .legal-doc h2 {
    color: #000;
    break-before: auto;
  }
  .legal-doc p,
  .legal-doc li {
    color: #333;
  }
}

/* ── UTILITY: FOCUS RING SUPPRESSION FOR MOUSE ── */
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/* ── BACK TO TOP Z-INDEX (above cookie) ── */
.btt { z-index: 350; }
.cookie { z-index: 4000; }

/* ── MOBILE MODAL BOTTOM SHEET ── */
@media (max-width: 480px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    max-height: 95vh;
  }
}

/* ── NAV MOBILE OVERFLOW ── */
.nav__mobile {
  overflow-y: auto;
  max-height: calc(100vh - 64px);
}

/* ── HERO__GLOW POSITION FIX FOR INNER SECTIONS ── */
section > .hero__glow-1,
section > .hero__glow-2 {
  position: absolute;
  z-index: 0;
}