/* ============================================
   ABSC Pet-First v2 - Responsive Styles
   Media queries at 1200px, 1024px, 768px, 480px
   ============================================ */

/* ===========================
   1200px - Large Desktops
   =========================== */
@media (max-width: 1200px) {
    .container {
        padding: 0 20px;
    }

    .hero h1 {
        font-size: 46px;
    }

    .hero-grid {
        gap: 40px;
    }

    .science-content h2 {
        font-size: 34px;
    }

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

/* ===========================
   1024px - Tablets Landscape
   =========================== */
@media (max-width: 1024px) {
    /* Typography */
    .hero h1 {
        font-size: 40px;
    }

    .page-hero h1 {
        font-size: 38px;
    }

    .section-header h2 {
        font-size: 34px;
    }

    .cta-banner h2 {
        font-size: 36px;
    }

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

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

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

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

    .product-grid[data-layout="detail"] {
        gap: 40px;
    }

    .research-grid {
        gap: 40px;
    }

    .science-grid {
        gap: 40px;
    }

    /* Steps */
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .steps-grid::before {
        display: none;
    }
}

/* ===========================
   768px - Tablets Portrait
   =========================== */
@media (max-width: 768px) {
    /* Mobile Navigation Toggle */
    .mobile-toggle {
        display: block;
    }

    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 var(--radius) var(--radius);
    }

    .nav.open {
        display: flex;
    }

    .nav a {
        width: 100%;
        text-align: center;
        padding: 12px;
    }

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

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

    .hero h1 {
        font-size: 36px;
    }

    .hero-sub {
        font-size: 16px;
    }

    .hero-image-wrap {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
    }

    .hero-float-card.clinical {
        left: 0;
    }

    /* Page Heroes */
    .page-hero h1 {
        font-size: 32px;
    }

    .page-hero p {
        font-size: 16px;
    }

    .page-hero--dark h1 {
        font-size: 32px;
    }

    /* Section Headers */
    .section-header h2 {
        font-size: 28px;
    }

    .section-header p {
        font-size: 16px;
    }

    /* Pet Cards */
    .pet-cards {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

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

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

    .shop-grid.two-col {
        grid-template-columns: 1fr;
        max-width: 340px;
    }

    /* Product Detail */
    .product-grid[data-layout="detail"],
    .product-detail .product-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .product-info h1 {
        font-size: 28px;
    }

    .gallery-main {
        min-height: 320px;
    }

    .key-benefits {
        grid-template-columns: 1fr;
    }

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

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

    .reviews-summary {
        flex-direction: column;
        gap: 24px;
    }

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

    /* Tabs */
    .tabs-nav {
        gap: 0;
    }

    .tab-btn {
        padding: 12px 16px;
        font-size: 13px;
    }

    /* Sticky ATC */
    .sticky-atc {
        display: block;
    }

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

    .steps-grid::before {
        display: none;
    }

    /* Science */
    .science-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Reviews */
    .review-grid {
        grid-template-columns: 1fr;
    }

    /* Research */
    .research-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Scientists */
    .scientists-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    /* Blog */
    .blog-featured {
        grid-template-columns: 1fr;
    }

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

    /* FAQ */
    .faq-grid {
        grid-template-columns: 1fr;
    }

    /* Size Guide */
    .size-guide-card {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }

    /* Subscribe */
    .subscribe-card {
        grid-template-columns: 1fr;
        padding: 32px;
    }

    .subscribe-perks {
        grid-template-columns: 1fr;
    }

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

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

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Hero Stats */
    .page-hero-stats {
        gap: 24px;
    }

    .hero-stat .num {
        font-size: 30px;
    }

    /* Dosing Table */
    .dosing-table-wrap {
        overflow-x: auto;
    }

    /* CTA */
    .cta-banner h2 {
        font-size: 32px;
    }

    /* Reviews Header */
    .reviews-header .big-rating {
        font-size: 56px;
    }
}

/* ===========================
   480px - Mobile Phones
   =========================== */
@media (max-width: 480px) {
    /* Typography */
    .hero h1 {
        font-size: 28px;
    }

    .page-hero h1 {
        font-size: 26px;
    }

    .page-hero--dark h1 {
        font-size: 26px;
    }

    .section-header h2 {
        font-size: 24px;
    }

    .cta-banner h2 {
        font-size: 28px;
    }

    .product-info h1 {
        font-size: 24px;
    }

    /* Hero Actions */
    .hero-actions {
        flex-direction: column;
    }

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

    .hero-trust-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Grids to single column */
    .product-grid {
        grid-template-columns: 1fr;
    }

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

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

    .science-stats {
        grid-template-columns: 1fr;
    }

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

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

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

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

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

    /* Add to Cart */
    .add-to-cart-row {
        flex-direction: column;
    }

    .add-to-cart-row .btn {
        width: 100%;
    }

    /* Filters */
    .filter-bar {
        gap: 8px;
    }

    .filter-tab {
        padding: 8px 16px;
        font-size: 13px;
    }

    /* Gallery */
    .gallery-thumbs {
        gap: 8px;
    }

    .gallery-thumb {
        width: 64px;
        height: 64px;
    }

    /* Logo Row */
    .logos-row {
        gap: 20px;
    }

    /* Reviews */
    .reviews-header .big-rating {
        font-size: 52px;
    }

    /* Hero Stats */
    .page-hero-stats {
        flex-direction: column;
        gap: 16px;
    }

    /* Buttons */
    .btn {
        padding: 12px 24px;
        font-size: 15px;
    }

    /* Container */
    .container {
        padding: 0 16px;
    }
}

/* ============================================
   CONTENT TEMPLATE RESPONSIVE OVERRIDES
   ============================================ */

/* --- 1024px --- */
@media (max-width: 1024px) {
    .single-hero-title {
        font-size: 36px;
    }

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

/* --- 768px --- */
@media (max-width: 768px) {
    /* Single Post */
    .single-hero-title {
        font-size: 28px;
    }

    .single-hero-meta {
        flex-direction: column;
        gap: 6px;
    }

    .single-hero-meta .meta-divider {
        display: none;
    }

    .single-article {
        max-width: 100%;
    }

    /* Author Bio */
    .author-bio-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Post Navigation */
    .post-nav-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .post-nav-next {
        text-align: left;
    }

    /* Related Posts */
    .related-posts .blog-grid {
        grid-template-columns: 1fr;
    }

    /* Blog Grid (archive/index) */
    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* Comments */
    .comment-body {
        flex-direction: column;
        gap: 12px;
    }

    .absc-comment-form {
        padding: 24px;
    }

    /* Search Form */
    .search-form-inner {
        flex-direction: column;
        border-radius: var(--radius);
    }

    .search-form .search-icon {
        display: none;
    }

    .search-form .search-field {
        width: 100%;
        border-radius: var(--radius) var(--radius) 0 0;
        text-align: center;
    }

    .search-form .search-submit {
        width: 100%;
        border-radius: 0 0 var(--radius) var(--radius);
        text-align: center;
        justify-content: center;
    }

    /* 404 */
    .error-404-number {
        font-size: 72px;
    }

    .error-404-paw {
        font-size: 36px;
    }

    .error-404-buttons {
        flex-direction: column;
    }

    .error-404-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* Sidebar widgets */
    .widget-area .widget {
        padding: 20px;
    }
}

/* --- 480px --- */
@media (max-width: 480px) {
    .single-hero-title {
        font-size: 24px;
    }

    .single-hero-categories {
        gap: 6px;
    }

    .single-hero-cat {
        font-size: 11px;
        padding: 4px 12px;
    }

    .author-bio-card {
        padding: 24px;
    }

    .post-nav-item {
        padding: 16px;
    }

    .error-404-number {
        font-size: 56px;
    }

    .error-404-paw {
        font-size: 28px;
    }

    .error-404-fun-fact {
        flex-direction: column;
        text-align: center;
    }

    .comments-title {
        font-size: 20px;
    }
}

/* ============================================
   MOCKUP SECTION WRAPPER RESPONSIVE
   ============================================ */

/* --- 768px --- */
@media (max-width: 768px) {
    .research-section,
    .scientists,
    .dosing-section {
        padding: 60px 0;
    }

    .product-tabs {
        padding: 40px 0;
    }
}

/* --- 480px --- */
@media (max-width: 480px) {
    .research-section,
    .scientists,
    .dosing-section {
        padding: 48px 0;
    }
}

/* ============================================
   IA COMPONENTS — RESPONSIVE OVERRIDES
   Announcement bar, trust strip, mega menu,
   header mobile, footer columns, mobile nav.
   ============================================ */

/* ===========================
   1024px — Tablet Landscape
   =========================== */
@media (max-width: 1024px) {

    /* Mega menu: 3 columns on tablets */
    .mega-menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .mega-menu-panel {
        width: 700px;
    }

    /* Footer columns: stay 4-column but tighter */
    .footer-columns-grid {
        gap: 24px;
    }

    /* Desktop nav: slightly smaller text */
    .primary-menu-list > li > a {
        padding: 8px 12px;
        font-size: 14px;
    }

    /* Header CTA: slightly smaller */
    .header-cta {
        padding: 8px 20px;
        font-size: 13px;
    }

    /* Hide account icon on smaller tablets to save space */
    .header-account {
        display: none;
    }
}

/* ===========================
   768px — Tablet Portrait / Mobile
   =========================== */
@media (max-width: 768px) {

    /* --- ANNOUNCEMENT BAR --- */
    .announcement-bar {
        height: 32px;
        font-size: 12px;
    }

    /* Hide close button on mobile (not dismissible) */
    .announcement-close {
        display: none;
    }

    /* --- HEADER MAIN --- */
    .header-main {
        top: 32px; /* below 32px mobile announcement */
    }

    .header-main.scrolled {
        top: 0;
    }

    .header-main .header-inner {
        padding: 8px 16px;
    }

    /* Hide desktop navigation on mobile */
    .desktop-nav {
        display: none;
    }

    /* Hide desktop-only header elements */
    .header-search-toggle,
    .header-account,
    .header-cta {
        display: none;
    }

    /* Show mobile toggle */
    .mobile-toggle {
        display: flex;
        order: -1;
    }

    /* Center the logo */
    .site-branding {
        flex: 1;
        text-align: center;
    }

    .site-branding .custom-logo-link img,
    .site-branding .custom-logo,
    .site-branding-link img {
        height: 40px;
    }

    /* Cart stays visible on mobile */
    .header-cart {
        order: 1;
    }

    /* --- TRUST STRIP --- */
    /* Single line horizontal scroll / marquee on mobile */
    .trust-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .trust-strip::-webkit-scrollbar {
        display: none;
    }

    .trust-strip-inner {
        justify-content: flex-start;
        flex-wrap: nowrap;
        min-width: max-content;
        padding: 0 12px;
    }

    .trust-item {
        padding: 0 12px;
        font-size: 11px;
    }

    /* --- MEGA MENU: Hidden on mobile --- */
    .mega-menu-panel {
        display: none !important;
    }

    .mega-menu-wrapper .mega-menu-panel {
        display: none !important;
    }

    /* Simple dropdowns also hidden on mobile */
    .primary-menu-list > li > .sub-menu {
        display: none !important;
    }

    /* --- FOOTER NEWSLETTER --- */
    .footer-newsletter {
        padding: 32px 0;
    }

    .footer-newsletter-inner {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-newsletter-text h3 {
        font-size: 20px;
    }

    .footer-newsletter-text p {
        font-size: 14px;
    }

    .footer-newsletter-form {
        max-width: 100%;
    }

    /* --- FOOTER COLUMNS --- */
    .footer-columns {
        padding: 40px 0;
    }

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

    .footer-col h4 {
        font-size: 14px;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    /* --- FOOTER LEGAL --- */
    .footer-legal-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .footer-legal-nav ul {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }

    /* --- ADMIN BAR OFFSETS (mobile) --- */
    .admin-bar .header-main {
        top: 78px; /* 46px admin + 32px mobile announcement */
    }

    .admin-bar .header-main.scrolled {
        top: 46px;
    }
}

/* ===========================
   480px — Mobile Phones
   =========================== */
@media (max-width: 480px) {

    /* Announcement bar: slightly smaller */
    .announcement-bar {
        font-size: 11px;
    }

    .announcement-message {
        font-size: 11px;
    }

    /* Trust strip items: smaller */
    .trust-item {
        font-size: 10px;
        padding: 0 10px;
    }

    .trust-item svg {
        width: 14px;
        height: 14px;
    }

    /* Footer columns: single column on small phones */
    .footer-columns-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-col h4 {
        font-size: 13px;
    }

    /* Newsletter form: stack vertically */
    .footer-newsletter-form {
        flex-direction: column;
        gap: 0;
    }

    .footer-newsletter-form input[type="email"] {
        border-right: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: var(--radius-pill, 50px);
        margin-bottom: 10px;
    }

    .btn-newsletter {
        border-radius: var(--radius-pill, 50px);
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .footer-newsletter-text h3 {
        font-size: 18px;
    }

    /* Footer legal: smaller text */
    .footer-copyright {
        font-size: 12px;
    }

    .footer-legal-nav a {
        font-size: 12px;
    }

    .footer-legal-nav ul {
        gap: 6px;
    }

    .footer-legal-nav ul li:not(:last-child)::after {
        margin-left: 6px;
    }

    /* Logo smaller on very small screens */
    .site-branding .custom-logo-link img,
    .site-branding .custom-logo,
    .site-branding-link img {
        height: 36px;
    }

    /* Mobile menu overlay adjustments */
    .mobile-menu-overlay {
        padding-top: 70px;
    }

    .mobile-accordion-header {
        font-size: 16px;
        padding: 14px 0;
    }

    .mobile-accordion-content a {
        font-size: 14px;
        padding: 8px 0;
    }

    .mobile-menu-trust {
        font-size: 11px;
        gap: 6px;
    }
}