/* ==========================================================================
   OjasQuest Responsive & Adaptive Design
   ==========================================================================
   
   Device Breakpoints:
   - Extra Large Desktop: 1440px+
   - Large Desktop: 1200px - 1439px
   - Desktop: 992px - 1199px
   - Tablet Landscape: 768px - 991px
   - Tablet Portrait: 576px - 767px
   - Mobile Large: 480px - 575px
   - Mobile Small: < 480px
   
   Touch & Interaction:
   - Touch-friendly tap targets (min 44px)
   - Hover states only for pointer devices
   - Reduced motion support
   - Safe area insets for notched devices
   
   ========================================================================== */

/* ==========================================================================
   FLUID TYPOGRAPHY (scales smoothly between breakpoints)
   ========================================================================== */

html {
    /* 16px at 320px viewport, 18px at 1440px viewport */
    font-size: clamp(15px, calc(14px + 0.25vw), 18px);
}

/* ==========================================================================
   EXTRA LARGE DESKTOP (1440px+)
   ========================================================================== */

@media (min-width: 1440px) {
    .container {
        max-width: 1320px;
        padding: 0 40px;
    }

    .hero {
        padding: 160px 0 120px;
    }

    .hero__grid {
        gap: 80px;
    }

    .hero h1 {
        font-size: 4rem;
    }

    .section {
        padding: 100px 0;
    }

    .grid--3 {
        gap: 32px;
    }

    .grid--4 {
        gap: 28px;
    }

    .card {
        padding: 40px;
    }

    .page-hero {
        padding: 180px 0 100px;
    }

    .detail-layout {
        grid-template-columns: 300px 1fr;
        gap: 60px;
    }
}

/* ==========================================================================
   LARGE DESKTOP (1200px - 1439px)
   ========================================================================== */

@media (min-width: 1200px) and (max-width: 1439px) {
    .container {
        max-width: 1140px;
    }

    .hero__grid {
        gap: 60px;
    }
}

/* ==========================================================================
   DESKTOP (992px - 1199px)
   ========================================================================== */

@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    .hero__grid {
        grid-template-columns: 55% 45%;
        gap: 40px;
    }

    .hero h1 {
        font-size: clamp(2.2rem, 4vw, 3rem);
    }

    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-layout {
        grid-template-columns: 240px 1fr;
        gap: 36px;
    }

    .mega-menu {
        min-width: 440px;
    }
}

/* ==========================================================================
   TABLET LANDSCAPE (768px - 991px)
   ========================================================================== */

@media (max-width: 991px) {
    :root {
        --oq-section-padding: 64px;
        --oq-border-radius: 14px;
    }

    .container {
        padding: 0 20px;
    }

    /* Hero */
    .hero {
        padding: 100px 0 80px;
    }

    .hero__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hero__visual {
        display: none;
    }

    .hero h1 {
        font-size: clamp(2rem, 5vw, 2.8rem);
    }

    .hero__description {
        font-size: 1rem;
        max-width: 100%;
    }

    /* Page Hero */
    .page-hero {
        padding: 120px 0 60px;
    }

    .page-hero h1 {
        font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    }

    .page-hero__description {
        font-size: 1rem;
    }

    /* Grids */
    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Detail Layout */
    .detail-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .side-nav {
        position: static;
        margin-bottom: 24px;
    }

    .side-nav__list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        border-left: none;
        border-bottom: 2px solid var(--oq-line);
        padding-bottom: 12px;
    }

    .side-nav__item {
        border-left: none;
        border-bottom: 2px solid transparent;
        margin-left: 0;
        margin-bottom: -2px;
        padding: 8px 14px;
        border-radius: var(--oq-border-radius-pill);
        font-size: 0.82rem;
    }

    .side-nav__item:hover,
    .side-nav__item.active {
        border-left-color: transparent;
        border-bottom-color: var(--oq-cyan);
        background: rgba(45, 224, 207, 0.06);
    }

    /* Contact */
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Journey */
    .journey-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stats */
    .stats-band__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Cards */
    .card {
        padding: 24px;
    }

    .card__arrow {
        top: 24px;
        right: 24px;
        width: 32px;
        height: 32px;
    }

    /* CTA Band */
    .cta-band {
        padding: 48px 0;
    }

    .cta-band h2 {
        font-size: clamp(1.5rem, 3vw, 2rem);
    }

    /* Metrics */
    .metric-card__value {
        font-size: 1.6rem;
    }
}

/* ==========================================================================
   TABLET PORTRAIT (576px - 767px)
   ========================================================================== */

@media (max-width: 767px) {
    :root {
        --oq-section-padding: 52px;
        --oq-border-radius: 12px;
    }

    .container {
        padding: 0 16px;
    }

    /* Hero */
    .hero {
        padding: 90px 0 60px;
    }

    .hero h1 {
        font-size: clamp(1.8rem, 6vw, 2.4rem);
    }

    .hero__actions {
        flex-direction: column;
        gap: 12px;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero__stats {
        flex-direction: column;
        gap: 10px;
    }

    /* Page Hero */
    .page-hero {
        padding: 110px 0 50px;
    }

    .page-hero h1 {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }

    .page-hero__actions {
        flex-direction: column;
        gap: 12px;
    }

    .page-hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Grids */
    .grid--2 {
        grid-template-columns: 1fr;
    }

    .grid--3 {
        grid-template-columns: 1fr;
    }

    .grid--4 {
        grid-template-columns: 1fr;
    }

    /* Journey */
    .journey-steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .journey-step {
        padding: 24px 20px;
    }

    /* Stats */
    .stats-band {
        padding: 40px 0;
    }

    .stats-band__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .stats-band__item h3 {
        font-size: 1.4rem;
    }

    /* Trust Strip */
    .trust-strip {
        padding: 14px 0;
    }

    .trust-strip__inner {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    /* CTA Band */
    .cta-band {
        padding: 40px 0;
        text-align: center;
    }

    .cta-band__inner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .cta-band .btn {
        width: 100%;
        justify-content: center;
    }

    /* Side Nav - horizontal scrollable */
    .side-nav__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
        gap: 6px;
    }

    .side-nav__list::-webkit-scrollbar {
        display: none;
    }

    .side-nav__item {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Content Sections */
    .content-section {
        padding-bottom: 32px;
        margin-bottom: 32px;
    }

    .content-section h2 {
        font-size: clamp(1.3rem, 4vw, 1.8rem);
    }

    /* Contact Form */
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding: 12px 14px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Tabs */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 18px;
        font-size: 0.82rem;
    }

    /* Resource Cards */
    .resource-card {
        padding: 20px;
    }

    /* Team */
    .team-card__avatar {
        width: 80px;
        height: 80px;
        font-size: 1.6rem;
    }

    /* Metric cards in 2 columns on tablet portrait */
    .metric-card {
        padding: 18px;
    }

    .metric-card__value {
        font-size: 1.4rem;
    }

    /* Buttons - larger tap targets */
    .btn {
        padding: 14px 24px;
        font-size: 0.9rem;
        min-height: 48px;
    }
}

/* ==========================================================================
   MOBILE LARGE (480px - 575px)
   ========================================================================== */

@media (max-width: 575px) {
    :root {
        --oq-section-padding: 40px;
        --oq-border-radius: 12px;
    }

    /* Typography tightening */
    h1 {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }

    h2 {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
    }

    h3 {
        font-size: clamp(1.1rem, 3.5vw, 1.4rem);
    }

    /* Hero */
    .hero {
        padding: 80px 0 50px;
    }

    .hero__eyebrow {
        font-size: 0.65rem;
    }

    /* Stats band - single column */
    .stats-band__grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* Cards */
    .card {
        padding: 20px;
    }

    .card__title {
        font-size: 1.1rem;
        padding-right: 40px;
    }

    .card__description {
        font-size: 0.88rem;
    }

    .card__arrow {
        top: 20px;
        right: 20px;
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    /* Chips */
    .chips {
        gap: 6px;
    }

    .chip {
        padding: 5px 10px;
        font-size: 0.72rem;
    }

    /* Section headers */
    .section__header {
        margin-bottom: 32px !important;
    }

    .eyebrow {
        font-size: 0.65rem;
        margin-bottom: 8px;
    }

    /* Search Overlay */
    .search-overlay {
        padding-top: 12vh;
    }

    .search-overlay__input {
        font-size: 1rem;
        padding: 14px 18px;
    }

    .search-overlay__close {
        top: 20px;
        right: 20px;
    }
}

/* ==========================================================================
   MOBILE SMALL (< 480px)
   ========================================================================== */

@media (max-width: 479px) {
    :root {
        --oq-section-padding: 36px;
        --oq-border-radius: 10px;
    }

    .container {
        padding: 0 14px;
    }

    /* Hero */
    .hero {
        padding: 72px 0 44px;
    }

    .hero h1 {
        font-size: 1.6rem;
        line-height: 1.2;
    }

    .hero__description {
        font-size: 0.92rem;
        line-height: 1.55;
    }

    /* Page Hero */
    .page-hero {
        padding: 90px 0 36px;
    }

    .page-hero h1 {
        font-size: 1.5rem;
    }

    .page-hero__description {
        font-size: 0.92rem;
    }

    /* Stats - 2x2 grid stays */
    .stats-band__grid {
        gap: 12px;
    }

    .stats-band__item h3 {
        font-size: 1.2rem;
    }

    .stats-band__item p {
        font-size: 0.78rem;
    }

    /* Journey steps */
    .journey-step {
        padding: 20px 16px;
    }

    .journey-step h4 {
        font-size: 1rem;
    }

    .journey-step p {
        font-size: 0.82rem;
    }

    /* CTA band */
    .cta-band h2 {
        font-size: 1.4rem;
    }

    .cta-band p {
        font-size: 0.88rem;
    }

    /* Contact steps */
    .contact-step h4 {
        font-size: 0.95rem;
    }

    .contact-step p {
        font-size: 0.85rem;
    }

    /* Team grid */
    .team-card {
        padding: 20px 12px;
    }

    .team-card__avatar {
        width: 64px;
        height: 64px;
        font-size: 1.3rem;
    }

    .team-card__name {
        font-size: 0.95rem;
    }

    .team-card__role {
        font-size: 0.8rem;
    }

    /* Resource cards - compact */
    .resource-card {
        padding: 16px;
    }

    .resource-card__icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .resource-card__title {
        font-size: 0.92rem;
    }
}

/* ==========================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================================================== */

/* Only apply hover effects for devices with a fine pointer (mouse) */
@media (hover: hover) and (pointer: fine) {
    .card:hover {
        transform: translateY(-5px);
        box-shadow: var(--oq-shadow-card-hover);
        border-color: var(--oq-cyan);
    }

    .card:hover .card__arrow {
        border-color: var(--oq-cyan);
        color: var(--oq-cyan);
        transform: rotate(-45deg);
    }

    .resource-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--oq-shadow-card-hover);
    }

    .btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(232, 155, 60, 0.3);
    }

    .btn--outline:hover {
        transform: translateY(-2px);
    }
}

/* Remove hover transforms on touch devices to prevent stuck states */
@media (hover: none) {
    .card:hover,
    .resource-card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }

    /* Add active state for touch feedback */
    .card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    .btn:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

    .resource-card:active {
        transform: scale(0.98);
    }

    .tab-btn:active {
        transform: scale(0.95);
    }
}

/* Ensure minimum tap target size (44x44px per WCAG) */
@media (pointer: coarse) {
    .btn {
        min-height: 48px;
        min-width: 48px;
    }

    .tab-btn {
        min-height: 44px;
        padding: 12px 20px;
    }

    .side-nav__item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .site-header__search-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .search-overlay__suggestion {
        min-height: 40px;
        display: flex;
        align-items: center;
        padding: 10px 18px;
    }

    .chip {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }

    /* Larger form inputs for easy touch interaction */
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom */
    }

    /* Footer links spacing */
    .site-footer__links li {
        margin-bottom: 12px;
    }

    .site-footer__links li a {
        display: inline-block;
        padding: 4px 0;
        min-height: 32px;
    }
}

/* ==========================================================================
   SAFE AREA INSETS (for notched devices like iPhone X+)
   ========================================================================== */

@supports (padding: env(safe-area-inset-top)) {
    .site-header {
        padding-top: env(safe-area-inset-top);
    }

    .site-header__inner {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }

    .mobile-panel__inner {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
        padding-bottom: env(safe-area-inset-bottom);
    }

    .site-footer {
        padding-bottom: calc(32px + env(safe-area-inset-bottom));
    }

    /* Full-width sections */
    .hero,
    .page-hero,
    .cta-band,
    .trust-strip,
    .stats-band {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ==========================================================================
   REDUCED MOTION (accessibility)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .card:hover,
    .resource-card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }

    .hero-svg circle,
    .hero-svg animate {
        animation: none !important;
    }
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (forced-colors: active) {
    .card,
    .resource-card,
    .metric-card {
        border: 2px solid;
    }

    .btn {
        border: 2px solid;
    }

    .chip {
        border: 1px solid;
    }

    .side-nav__item.active {
        border-left: 3px solid;
    }
}

/* ==========================================================================
   DARK MODE SUPPORT (if OS preference is dark)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* The site is already dark-themed by default, but ensure 
       any light sections respect dark mode preference */
    .section--paper {
        background: var(--oq-paper);
    }
}

/* ==========================================================================
   LANDSCAPE ORIENTATION FIX (mobile landscape)
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 60px 0 40px;
    }

    .page-hero {
        padding: 80px 0 40px;
    }

    .hero__stats {
        flex-direction: row;
        gap: 20px;
    }

    .search-overlay {
        padding-top: 8vh;
    }

    .mobile-panel {
        top: 60px;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .site-header,
    .site-footer,
    .cta-band,
    .search-overlay,
    .mobile-panel,
    .side-nav,
    .hero__visual,
    .card__arrow,
    .btn {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
        font-size: 12pt;
    }

    .hero,
    .page-hero,
    .section--dark {
        background: #fff !important;
        color: #000 !important;
        padding: 20px 0;
    }

    .hero h1,
    .page-hero h1 {
        color: #000;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card {
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ==========================================================================
   CONTENT LIST STYLES (for rendered lists in detail pages)
   ========================================================================== */

.content-list {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

.content-list li {
    position: relative;
    padding: 8px 0 8px 24px;
    font-size: 0.95rem;
    color: var(--oq-steel);
    line-height: 1.55;
}

.content-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oq-cyan);
    opacity: 0.7;
}

@media (max-width: 767px) {
    .content-list li {
        font-size: 0.9rem;
        padding: 6px 0 6px 20px;
    }

    .content-list li::before {
        width: 6px;
        height: 6px;
        top: 12px;
    }
}

/* ==========================================================================
   SEARCH RESULTS LIST (AJAX results)
   ========================================================================== */

.search-results-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}

.search-results-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.search-results-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    color: #fff;
    text-decoration: none;
    transition: var(--oq-transition);
}

.search-results-list li a:hover {
    color: var(--oq-cyan);
}

.search-results-list li a strong {
    font-weight: 500;
}

.search-results-list li a span {
    font-size: 0.78rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 10px;
    border-radius: var(--oq-border-radius-pill);
}

@media (max-width: 575px) {
    .search-results-list li a {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}