/* ============================================================
   EXTRAZCON — RESPONSIVE OVERRIDES & BUTTON COLOR FIX
   Applies to ALL pages. Loaded after shared.css & page CSS.
   ============================================================ */

/* ----------------------------------------------------------
   1. BUTTON COLOR FIX
   Change "Reserve a Table" / btn-primary text to white
   ---------------------------------------------------------- */
.btn-primary,
.btn-primary:hover {
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   2. ROOT / BASE RESPONSIVE TOKENS
   ---------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --nav-h: 68px; }
}
@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .section    { padding: 64px 0; }
  .section-sm { padding: 40px 0; }
}
@media (max-width: 480px) {
  :root { --nav-h: 60px; }
  .section    { padding: 48px 0; }
  .section-sm { padding: 32px 0; }
}

/* ----------------------------------------------------------
   3. NAVBAR
   ---------------------------------------------------------- */
/* Hide the CTA button in the nav-links list on mobile
   so it doesn't stack oddly — the hamburger takes over */
@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1rem;
    transform: translateY(-110%);
    transition: transform .38s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    z-index: 999;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-links.open {
    transform: translateY(0);
    pointer-events: all;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--clr-border);
    width: 100%;
    font-size: 0.92rem;
  }
  /* Show the CTA button as a full-width block inside mobile menu */
  .nav-cta {
    margin: 0.8rem 1.5rem 0.3rem;
    display: block;
  }
  .nav-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ----------------------------------------------------------
   4. PAGE HERO (shared banner)
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .page-hero {
    height: auto;
    min-height: 280px;
    padding-bottom: 40px;
  }
  .page-hero h1 { font-size: clamp(1.8rem, 6vw, 2.8rem); }
}
@media (max-width: 480px) {
  .page-hero { min-height: 220px; padding-bottom: 32px; }
  .page-hero h1 { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .breadcrumb { font-size: 0.72rem; flex-wrap: wrap; }
}

/* ----------------------------------------------------------
   5. CTA BANNER
   ---------------------------------------------------------- */
@media (max-width: 600px) {
  .cta-banner { padding: 44px 20px; }
  .cta-banner h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
  .cta-banner-btns { flex-direction: column; align-items: center; }
  .cta-banner-btns .btn { width: 100%; max-width: 320px; justify-content: center; }
}

/* ----------------------------------------------------------
   6. FOOTER
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}

/* ----------------------------------------------------------
   7. STATS GRID
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-num { font-size: 2.4rem; }
}
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .stat-card { padding: 1.6rem 1rem; }
}

/* ----------------------------------------------------------
   8. CHATBOT PANEL
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  #chatbot-panel { width: calc(100vw - 32px); right: 16px; bottom: 90px; }
  #chatbot-btn   { bottom: 20px; right: 16px; }
}

/* ----------------------------------------------------------
   9. HOME PAGE
   ---------------------------------------------------------- */
/* Hero */
@media (max-width: 900px) {
  #hero { min-height: auto; padding-bottom: 60px; }
  .hero-content { padding: 60px 0 80px; max-width: 100%; }
  .hero-title { font-size: clamp(2.2rem, 7vw, 4rem); }
  .hero-sub { font-size: 1rem; max-width: 100%; }
  .hero-cta { flex-wrap: wrap; gap: 0.75rem; }
  .hero-cta .btn { flex: 1 1 auto; min-width: 160px; justify-content: center; }
  .hero-ticker { display: none; } /* hide on small for performance */
}
@media (max-width: 540px) {
  .hero-content { padding: 40px 0 60px; }
  .hero-title { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .hero-cta .btn { width: 100%; }
  .hero-scroll { display: none; }
}

/* Services grid */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* About preview */
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-image-wrap { height: 340px; }
  .about-exp-badge { right: 0; top: auto; bottom: -20px; transform: none; }
  .about-feats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .about-image-wrap { height: 260px; }
  .about-feats { grid-template-columns: 1fr; }
}

/* Section header row */
@media (max-width: 600px) {
  .section-header-row { flex-direction: column; align-items: flex-start; }
  .section-header-row .btn { width: 100%; justify-content: center; }
}

/* Projects grid */
@media (max-width: 768px) {
  .projects-grid { grid-template-columns: 1fr; }
  .project-card.big .proj-img { min-height: 300px; }
  .projects-right { gap: 1rem; }
}

/* Testimonials */
@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* Blog grid */
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* Contact strip */
@media (max-width: 768px) {
  .contact-strip { flex-direction: column; align-items: flex-start; }
  .cs-divider { width: 100%; height: 1px; }
}
@media (max-width: 480px) {
  .contact-strip { padding: 1.5rem; }
}

/* ----------------------------------------------------------
   10. ABOUT PAGE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 2rem; }
  .story-img-wrap { height: 320px; }
  .story-highlights { grid-template-columns: repeat(2, 1fr); }
  .team-preview-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mission-statement { padding: 1.8rem 1.5rem 1.8rem 2rem; }
  .mission-statement p { font-size: 1rem; }
  .story-highlights { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .story-img-wrap { height: 240px; }
  .team-preview-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .story-highlights { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
}

/* ----------------------------------------------------------
   11. SERVICES PAGE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .srv-grid { grid-template-columns: 1fr; }
  .srv-img { height: 200px; }
  .segments-grid { grid-template-columns: 1fr 1fr; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-line { display: none; }
}
@media (max-width: 480px) {
  .segments-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .cats-grid { gap: 0.6rem; }
}

/* ----------------------------------------------------------
   12. SERVICE DETAILS PAGE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .sd-overview { grid-template-columns: 1fr; gap: 2rem; }
  .sd-img { height: 260px; }
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .sd-faq { grid-template-columns: 1fr; gap: 2rem; }
  .price-summary-grid { grid-template-columns: 1fr 1fr; }
  .sd-meta-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .price-summary-grid { grid-template-columns: 1fr; }
  .journey-step { flex-direction: column; gap: 1rem; }
}

/* ----------------------------------------------------------
   13. PRICING PAGE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
  .pricing-grid { max-width: 100%; }
  .billing-toggle { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  /* Comparison table horizontal scroll */
  .comparison-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comparison-table table { min-width: 480px; }
  .comparison-table th,
  .comparison-table td { padding: 0.75rem 1rem; font-size: 0.8rem; }
}

/* ----------------------------------------------------------
   14. BLOG PAGE
   ---------------------------------------------------------- */
/* Featured post */
@media (max-width: 820px) {
  .featured-post { grid-template-columns: 1fr; }
  .fp-image { min-height: 240px; }
  .fp-body { padding: 1.8rem; }
}
@media (max-width: 480px) {
  .fp-body { padding: 1.2rem; }
  .fp-title { font-size: clamp(1.2rem, 5vw, 1.6rem); }
}

/* Filter bar */
@media (max-width: 640px) {
  .blog-filter-inner { flex-direction: column; align-items: stretch; }
  .blog-cats { flex-wrap: wrap; }
  .blog-search-wrap { width: 100%; }
  .blog-search-wrap input { width: 100% !important; }
}

/* Articles grid */
@media (max-width: 900px) {
  .articles-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .articles-grid { grid-template-columns: 1fr; }
}

/* Newsletter */
@media (max-width: 560px) {
  .newsletter-form { flex-direction: column; align-items: stretch; }
  .newsletter-form input { width: 100% !important; }
  .newsletter-form .btn { width: 100%; justify-content: center; }
}

/* ----------------------------------------------------------
   15. BLOG ARTICLE PAGE
   ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
}
@media (max-width: 640px) {
  .author-card { grid-template-columns: 1fr; }
  .author-img { height: 200px; }
  .article-img-grid { grid-template-columns: 1fr; }
  .aig-img { height: 180px; }
  .article-hero { min-height: 50vh; }
  .article-hero-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .article-lead { font-size: 1rem; padding-left: 1rem; }
  .article-quote { padding: 1.2rem 1.5rem; font-size: 1rem; }
  .share-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}
@media (max-width: 900px) {
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .related-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   16. CONTACT PAGE
   ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 640px) {
  .location-cards { grid-template-columns: 1fr; }
  .enquiry-tabs { flex-wrap: wrap; gap: 0.4rem; }
  .map-embed { height: 280px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   17. FAQ PAGE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: 2rem; }
  .faq-sidebar { position: static; }
}
@media (max-width: 600px) {
  .contact-strip-faq { flex-direction: column; padding: 1.8rem 1.5rem; gap: 1.2rem; }
  .csf-contacts { flex-direction: column; gap: 0.75rem; }
}

/* ----------------------------------------------------------
   18. PROJECT DETAILS PAGE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .pd-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .pd-info-card { position: static; }
  .results-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item.big { grid-column: 1 / 3; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item.big { grid-column: 1; }
  .results-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .result-card { padding: 1.6rem 1rem; }
  .res-num { font-size: 2.2rem; }
}
@media (max-width: 640px) {
  .timeline::before { left: 0; }
  .tl-item { grid-template-columns: 1fr; gap: 0.5rem; }
  .tl-date { text-align: left; padding-bottom: 0.25rem; }
  .tl-content::before { display: none; }
}

/* ----------------------------------------------------------
   19. CAREERS PAGE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .highlights-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .role-card { flex-direction: column; gap: 1rem; }
  .role-apply-btn { width: 100%; justify-content: center; display: flex; }
  .roles-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .roles-filter { flex-direction: column; width: 100%; }
  .roles-filter select { width: 100%; }
}
@media (max-width: 540px) {
  .why-grid { grid-template-columns: 1fr; }
  .highlights-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   20. FORM ELEMENTS — general
   ---------------------------------------------------------- */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   21. GENERAL UTILITY FIXES FOR SMALL SCREENS
   ---------------------------------------------------------- */
/* Make all btn full-width inside flex stacks on very small screens */
@media (max-width: 360px) {
  .btn { font-size: 0.82rem; padding: 0.75rem 1.2rem; }
}

/* Prevent text overflow globally */
h1, h2, h3, h4, h5, h6, p {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Horizontal overflow prevention */
* { max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }
table { table-layout: auto; }

/* ----------------------------------------------------------
   22. PRICING COMPARISON TABLE — always scrollable
   ---------------------------------------------------------- */
.comparison-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ----------------------------------------------------------
   23. MODAL (careers) — small screen
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  .modal { padding: 1.5rem 1.2rem; }
  .modal h3 { font-size: 1.2rem; }
}

/* ----------------------------------------------------------
   24. LIGHTBOX (project-details) — small screen
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  .lb-img { width: 100vw; height: 55vw; }
  .lb-prev { left: 8px; width: 38px; height: 38px; }
  .lb-next { right: 8px; width: 38px; height: 38px; }
}

/* ----------------------------------------------------------
   25. CONTAINER SAFETY
   ---------------------------------------------------------- */
.container {
  width: min(1200px, 92%);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 400px) {
  .container { width: min(1200px, 96%); }
}