/* ===============================================================
   AQUALINE — Mobile / responsive polish
   ===============================================================
   Layered on top of style.css and _products.css. The hamburger nav
   is the main payload; below it sits a polish pass for everything
   that's busy on small screens (sticky headers, search bars,
   product tables, admin views).
   =============================================================== */


/* ─────────────────────────────────────────────
   Hamburger button — drawn in CSS, no SVG
   ───────────────────────────────────────────── */

.nav-toggle {
    display: none;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #1a3a4a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-toggle:hover { background: #f5f9fb; }
.nav-toggle:focus-visible {
    outline: 2px solid #007a99;
    outline-offset: 2px;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
    display: block;
    position: relative;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, top 0.2s ease, opacity 0.15s ease;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
}
.nav-toggle-icon::before { top: -7px; }
.nav-toggle-icon::after  { top:  7px; }

/* Animate to an X when open */
.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
    background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}


/* ─────────────────────────────────────────────
   Drawer + backdrop — only below desktop breakpoint
   ───────────────────────────────────────────── */

@media (max-width: 1023px) {

    /* Show the hamburger, position fixed top-right so it works regardless
       of however the surrounding header layout is configured. The z-index
       has to beat ANY plausible existing element — many sites use 9999
       for sticky headers, so we go well above that. !important flags
       guarantee no other rule (or inline style) can demote the button. */
    .nav-toggle {
        display: flex !important;
        position: fixed !important;
        top: 14px !important;
        right: 14px !important;
        z-index: 2147483647 !important;     /* max int — drawer/backdrop sit just below */
        isolation: isolate;
        pointer-events: auto !important;
    }

    /* The drawer itself */
    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 80vw);
        background: white;
        margin: 0;
        padding: 4.5rem 1.25rem 1.5rem;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 2147483646;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        isolation: isolate;        /* extra safety against parent contexts */
        pointer-events: auto;      /* defend against inherited pointer-events:none */
    }

    body[data-nav-open="true"] .nav-links {
        transform: translateX(0);
    }

    /* Dim the rest of the page */
    body[data-nav-open="true"]::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 25, 35, 0.4);
        z-index: 2147483645;       /* one below the drawer */
        animation: nav-backdrop-fade 0.2s ease;
    }
    @keyframes nav-backdrop-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Lock body scroll while the drawer is open */
    body[data-nav-open="true"] {
        overflow: hidden;
    }

    /* Link styling inside the drawer */
    .nav-links li {
        list-style: none;
        margin: 0;
        border-bottom: 1px solid #eef2f5;
    }
    .nav-links li:last-child { border-bottom: none; }

    .nav-links a {
        display: block;
        padding: 0.95rem 0.25rem;
        color: #1a3a4a;
        text-decoration: none;
        font-size: 1.05rem;
        font-weight: 500;
        transition: color 0.12s ease;
        pointer-events: auto;
        position: relative;        /* contain any leftover pseudo positioning */
    }
    .nav-links a:hover,
    .nav-links a:focus-visible,
    .nav-links a.active {
        color: #007a99;
    }
    .nav-links a.active {
        font-weight: 700;
    }

    /* The site uses data-text + ::before/::after for a hover effect on
       desktop nav links. In the mobile drawer that effect renders as a
       ghost text offset to the side. Hide it. */
    .nav-links a::before,
    .nav-links a::after {
        display: none !important;
        content: none !important;
    }
}


/* ─────────────────────────────────────────────
   Touch + iOS niceties
   ───────────────────────────────────────────── */

@media (max-width: 1023px) {
    /* Bigger tap targets across the public site */
    a, button, .gallery-item {
        min-height: 36px;
    }
    .nav-links a {
        min-height: 44px;
    }

    /* Prevent iOS from zooming into form fields when focused.
       16px is the magic number — any smaller and iOS auto-zooms. */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ─────────────────────────────────────────────
   Content card — open it up on mobile
   The base style.css has `width: calc(100% - 100px)` which leaves
   only ~200px of usable width on a 360px phone. Plus the inner
   .aquarium-page / .fish-page wrappers add their own padding on top.
   Override aggressively so the card actually breathes.
   ───────────────────────────────────────────── */

@media (max-width: 1023px) {
    main.category-content {
        margin: 110px auto -40px auto;
        width: calc(100% - 1.5rem);
        padding: 1.5rem 1.25rem !important;     /* beat the base !important */
    }
}

@media (max-width: 720px) {
    main.category-content {
        margin: 90px auto -40px auto;
        width: calc(100% - 0.75rem);
        padding: 1.25rem 0.875rem !important;
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    main.category-content {
        margin: 80px auto -40px auto;
        width: calc(100% - 0.5rem);
        padding: 1rem 0.75rem !important;
        border-radius: 12px;
    }
}

/* The inner page wrappers (.aquarium-page, .fish-page) carry their own
   horizontal padding that stacks with category-content's. On mobile we
   want only ONE source of gutter — the card's own padding. */
@media (max-width: 720px) {
    .aquarium-page,
    .fish-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ─────────────────────────────────────────────
   Tab bar (.tab-bar / .tab-bar-tabs / .tab-btn / .tab-bar-tools)
   With only 2 tabs on aquarium, they should fit comfortably side
   by side instead of horizontally scrolling. Override the existing
   `overflow-x: auto` on .tab-bar-tabs at 640px.
   ───────────────────────────────────────────── */

@media (max-width: 720px) {
    .tab-bar {
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    .tab-bar-tabs {
        flex: 1 1 100%;
        overflow-x: visible;        /* override _products.css's overflow-x: auto */
        flex-wrap: wrap;
    }
    .tab-btn {
        padding: 0.55rem 0.85rem;
        font-size: 0.92rem;
        flex-shrink: 1;
        gap: 0.35rem;
    }
    .tab-count {
        font-size: 0.72rem;
        padding: 0.1rem 0.45rem;
        min-width: 1.5em;
    }

    /* Tools row (search + view-toggle) — keep both on ONE line on mobile,
       with the search input taking the available space and the view-toggle
       sitting compactly to its right. */
    .tab-bar-tools {
        order: 2;
        width: 100%;
        padding-bottom: 0.5rem;
        flex-wrap: nowrap;
        gap: 0.5rem;
        align-items: center;
    }
    .search-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        position: relative;
    }
    .product-search {
        width: 100%;
        min-width: 0;
    }
    .view-toggle {
        flex: 0 0 auto;
    }
}


/* ─────────────────────────────────────────────
   Sticky header (fish-page-header) on the busy pages
   ───────────────────────────────────────────── */

@media (max-width: 720px) {
    .fish-page-header {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .fish-page-header h1 {
        font-size: 1.4rem;
        margin-right: 0.75ch;
    }
}


/* ─────────────────────────────────────────────
   Footer — stack copyright above legal links on phones
   ───────────────────────────────────────────── */

@media (max-width: 720px) {
    .footer-container {
        flex-direction: column-reverse;
        gap: 0.75rem;
        padding: 0 1rem;
        text-align: center;
    }
    .footer-links {
        gap: 1.25rem;
    }
}


/* ─────────────────────────────────────────────
   <480px finishing touches
   ───────────────────────────────────────────── */

@media (max-width: 480px) {
    .product-row .row-name { font-size: 0.95rem; }
    .product-row .row-sci  { font-size: 0.78rem; }
}


/* ─────────────────────────────────────────────
   HOME PAGE — hero + preview modules
   The hero has desktop-coordinate absolute overlays (InfoBox at left:240px,
   references at right:50px, swimming fish at width:450px) that go off-screen
   on phones. The preview modules use a 2-column flex layout that should
   stack on mobile, and they're decorated with .scroll-fish images that
   overlap the content text on narrow viewports.
   ───────────────────────────────────────────── */

/* Safety net — prevent horizontal scroll from any overflowing decoration */
@media (max-width: 1023px) {
    body          { overflow-x: hidden; }
    .hero-wrapper { overflow-x: hidden; }
}

/* Hide the most visually intrusive decorations on mobile. The InfoBox
   (Öffnungszeiten + Telefon) and References (testimonials) are KEPT —
   they're just moved out of their desktop absolute positions and stacked
   at the bottom of the hero. See the next block. */
@media (max-width: 1023px) {
    .swimming-fish,
    .scroll-fish {
        display: none !important;
    }

    /* Plants are nice background — just keep them from overflowing */
    .plant-overlay { max-height: 60vh; }
}

/* MOBILE HERO LAYOUT
   - The new .hero-mobile-bar (defined in hero.php) sits at the very top
     of the hero with hours + phone + email — replaces the JS InfoBox on
     mobile. On desktop the bar is `display: none` so the JS InfoBox
     keeps its original look.
   - References gets repositioned between the logo and the water-section
     CTA, and shrunk down.
   - Hero grows to fit; flex sections size to content. */

/* Desktop default: hide the mobile bar. */
.hero-mobile-bar { display: none; }

@media (max-width: 1023px) {
    .hero-wrapper {
        height: auto !important;
        min-height: 100vh;
    }

    .air-section,
    .water-section {
        flex: 0 0 auto !important;
    }

/* InfoBox + References — place them BETWEEN the logo and the water CTA on
   mobile (logo → opening hours → testimonial → "Exklusive Aquaristik...").
   Hero is EXACTLY 100vh; water-section takes whatever remains via flex:1
   so the page never gets a scrollbar inside the hero. */
@media (max-width: 1023px) {
    .hero-wrapper {
        height: 100vh !important;
        min-height: 0 !important;
        max-height: 100vh;
        overflow: hidden !important;     /* no scrollbar inside the hero */
        display: flex;
        flex-direction: column;
    }

    /* Air-section + topbar + references all size to their content; the
       water section absorbs whatever's left of 100vh. */
    .air-section { flex: 0 0 auto !important; }
    .water-section {
        flex: 1 1 0 !important;
        min-height: 0;
        position: relative;
    }

    /* Slightly smaller logo so the air-section is more compact */
    .main-logo { max-width: 240px; }

    /* Plants: 75vh so they sit roughly 25% above the water line */
    .plant-overlay { max-height: 75vh; }

    /* Top bar — really compact, full-width, sits above everything else.
       pointer-events:none on the bar itself lets clicks on empty areas
       (especially the top-right where the hamburger lives) pass through.
       Only the actual <a> links are made interactive. */
    .hero-mobile-bar {
        display: block;
        order: 0;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.72rem;
        line-height: 1.35;
        color: #4a5a6a;
        text-align: left;
        padding: 0.4rem 4rem 0.4rem 1rem;        /* right pad clears the hamburger */
        background: transparent;
        pointer-events: none;                     /* empty bar area doesn't eat clicks */
    }
    .hero-mobile-bar a {
        color: #4a5a6a;                          /* same colour as body text */
        text-decoration: none;
        pointer-events: auto;                    /* links remain tappable */
    }
    .hero-mobile-bar a:hover { color: #008eb0; } /* aqua only on hover */
    .hero-mobile-bar .hmb-icon {
        display: inline-block;
        margin-right: 0.15rem;
        font-size: 0.85em;
    }
    .hero-mobile-bar .hmb-row {
        /* line-height on the parent already controls vertical rhythm */
    }

    /* Hide the JS-rendered InfoBox on mobile; the topbar replaces it. */
    .hero-infobox { display: none !important; }

    /* References — TRULY fixed-height container (not min-height) so the
       layout never jumps when testimonials rotate. At 0.62rem with
       overflow:hidden, the longest entry (231 chars ≈ 6 lines + author)
       fits within 110px; if a future entry is longer it gets clipped
       symmetrically (centered via flex) rather than pushing siblings. */
    .hero-references {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        max-width: 100%;
        height: 110px;
        overflow: hidden;
        padding: 0.4rem 1rem;
        background: transparent;
        z-index: auto;
    }
    /* The JS-generated inner div holds the quote <p> + author span.
       Make it a flex column so they stack and centre vertically + horizontally. */
    .hero-references > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        max-width: 100%;
        width: 100%;
    }

    /* Order: topbar → logo → references → water CTA */
    .hero-mobile-bar { order: 0; }
    .air-section     { order: 1; }
    .hero-references { order: 2; }
    .water-section   { order: 3; }
}

/* Logo + CTA text resize */
@media (max-width: 1023px) {
    .main-logo { max-width: 280px; }

    .hero-cta-text h2 {
        font-size: 1.7rem !important;
        line-height: 1.2;
    }
    .hero-cta-text p {
        font-size: 0.95rem !important;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .main-logo { max-width: 220px; }

    .hero-cta-text h2 { font-size: 1.4rem !important; }
    .hero-cta-text p  { font-size: 0.88rem !important; }
}

/* Home preview modules — stack instead of two-column on mobile.
   The 900px breakpoint catches tablets-in-portrait too, since the
   modules are heavy with 80px gap and 100px padding. */
@media (max-width: 900px) {
    .preview-module {
        padding: 40px 1rem !important;
    }

    .module-container,
    .module-container.reverse {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    /* Image always appears AFTER text on mobile, regardless of
       desktop's reverse arrangement — keeps reading order natural. */
    .module-image,
    .module-custom-content {
        order: 2;
        width: 100%;
    }
    .module-text {
        order: 1;
        width: 100%;
    }

    .module-text h2 {
        font-size: 1.7rem;
        margin-bottom: 0.85rem;
        letter-spacing: 0.5px;
    }
    .module-text p {
        font-size: 0.98rem;
        line-height: 1.65;
        margin-bottom: 1.25rem;
    }

    .image-placeholder {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .preview-module {
        padding: 30px 0.875rem !important;
    }
    .module-text h2 {
        font-size: 1.45rem;
    }
    .image-placeholder {
        height: 180px;
    }
}


/* ─────────────────────────────────────────────
   Admin tweaks (mobile)
   The admin already has its own media queries — these polish
   what gets cramped on phones.
   ───────────────────────────────────────────── */

@media (max-width: 720px) {
    .admin-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-filter-bar .admin-field-inline { width: 100%; }

    /* Wide tables get a horizontal scroll wrapper — already used everywhere */
    .admin-table-wrap { -webkit-overflow-scrolling: touch; }

    /* The two-column edit layout (source vs overlay) is already responsive
       in _admin.css; this just tightens the gap below 640px. */
    .admin-edit-layout { gap: 1rem; }

    /* Projects grid: smaller thumbs on phones */
    .admin-projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 0.6rem;
        padding: 0.75rem;
    }
}


/* ─────────────────────────────────────────────
   SUBPAGE TITLES — override inline font-size: 2.5rem
   service.php and contact.php hard-code the h1 size inline, which
   overflows mobile viewports. The !important + high-specificity
   selector beats inline styles.
   ───────────────────────────────────────────── */

@media (max-width: 720px) {
    main.category-content h1 {
        font-size: 1.6rem !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    main.category-content h1 + p,
    main.category-content > div > p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    main.category-content h1 {
        font-size: 1.45rem !important;
    }
}


/* ─────────────────────────────────────────────
   SERVICE PAGE GRID — single column on mobile
   `grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))` is
   the main cause of horizontal scroll on /services — 300px min-width
   cards overflow a 360px viewport once card padding (40px) and
   container padding are included.
   ───────────────────────────────────────────── */

@media (max-width: 720px) {
    .service-gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }
    .service-gallery-card {
        padding: 20px 16px;
    }
    .service-gallery-card h3 {
        font-size: 1.1rem;
    }
}


/* ─────────────────────────────────────────────
   HOME CONTACT PREVIEW — kill the 40px right pad,
   contain the Google Maps iframe
   .contact-preview has `padding-right: 40px` baked in for the
   desktop layout — on mobile that adds another 40px of overflow.
   ───────────────────────────────────────────── */

@media (max-width: 900px) {
    .contact-preview {
        padding-right: 0 !important;
    }
    .contact-details {
        padding: 1rem !important;     /* was 30px — too generous on mobile */
        margin-bottom: 1rem !important;
    }
    /* Tighter label width so values don't push out of the box */
    .contact-method span {
        width: auto !important;
        margin-right: 0.5rem;
    }
    /* Map iframe — width:100% is already set inline but the height=400/450
       attribute is enforced; constrain via CSS. */
    .module-image iframe {
        width: 100% !important;
        max-width: 100%;
        height: 280px !important;
        display: block;
    }
}


/* ─────────────────────────────────────────────
   SUBPAGE OVERFLOW SAFETY NET
   Even after the targeted fixes above, any wide element introduced
   in the future (a long unbreakable word, a wide table, a media
   embed) shouldn't be able to push the viewport. Constrain inside
   the content card.
   ───────────────────────────────────────────── */

@media (max-width: 1023px) {
    main.category-content {
        overflow-x: hidden;
    }
    main.category-content img,
    main.category-content iframe,
    main.category-content video,
    main.category-content table,
    main.category-content pre {
        max-width: 100%;
    }
    main.category-content img,
    main.category-content video {
        height: auto;
    }
}


/* ─────────────────────────────────────────────
   FOOTER — slimmer on mobile (subpages especially)
   ───────────────────────────────────────────── */

@media (max-width: 720px) {
    .main-footer {
        padding: 10px 0 !important;
        font-size: 0.72rem;
    }
    .footer-container {
        gap: 0.5rem;
        padding: 0 0.875rem;
    }
    .footer-links {
        gap: 1rem;
    }
    .footer-links a {
        font-size: 0.68rem;
        letter-spacing: 0.5px;
    }
    .main-footer p {
        font-size: 0.7rem;
        line-height: 1.3;
    }
}


/* ─────────────────────────────────────────────
   REFERENCES — beat the inline font-size on inner elements
   References.js sets `font-size: 0.95rem` inline on the <p> quote and
   `0.8rem` inline on the author span. Inline styles trump CSS rules,
   so the `.hero-references > div` rule only affects the outermost div
   it doesn't reach the nested quote+author. Use `*` to hit everything.
   ───────────────────────────────────────────── */

@media (max-width: 1023px) {
    .hero-references,
    .hero-references * {
        font-size: 0.62rem !important;
        line-height: 1.4 !important;
    }
}


/* ─────────────────────────────────────────────
   SEARCH-CLEAR BUTTON — keep it circular
   The earlier `a, button, .gallery-item { min-height: 36px }` touch-
   target rule was making the 20×20 .search-clear button stretch to
   20×36 (oval). Lock it back to a perfect circle.
   ───────────────────────────────────────────── */

@media (max-width: 1023px) {
    .search-clear,
    .view-btn {
        min-height: 0 !important;
    }
    .search-clear {
        width: 20px !important;
        height: 20px !important;
    }
}


/* ─────────────────────────────────────────────
   SUBCATEGORY ACCORDION — let description wrap to its own line
   The technik / deko / aquarium accordion summaries have 4 children:
   name + desc + count + chev. On mobile the italic .subcat-desc was
   pushing the count+chev off the right edge so the arrow looked half-
   cropped (like a checkmark). Force desc onto its own line below the
   row-1 trio.
   ───────────────────────────────────────────── */

@media (max-width: 720px) {
    .subcat-summary {
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.6rem;
        row-gap: 0.25rem;
        padding: 0.85rem 0.875rem;
    }
    .subcat-name {
        flex: 1 1 auto;
        font-size: 1.05rem;
        line-height: 1.25;
    }
    .subcat-count {
        flex: 0 0 auto;
        order: 2;
    }
    .subcat-chev {
        flex: 0 0 auto;
        order: 3;
        margin-right: 0.25rem;       /* keep the rotated diamond off the edge */
    }
    /* Description wraps to a full-width second line under the trio. */
    .subcat-desc {
        order: 99;
        flex: 1 1 100%;
        font-size: 0.85rem;
        font-style: italic;
        color: #6a7a8a;
        margin: 0;
        line-height: 1.4;
    }
}


/* ─────────────────────────────────────────────
   HOME PAGE — center the .btn-primary buttons on mobile
   On desktop the buttons sit at the left of the text column
   (natural alignment with body copy). On mobile, with the text
   column now full-width, a left-aligned button looks orphaned.
   Center them block-wise without forcing the prose to center.
   ───────────────────────────────────────────── */

@media (max-width: 900px) {
    .module-text .btn-primary,
    .module-custom-content .btn-primary {
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}


/* ─────────────────────────────────────────────
   HOME-CONTENT — don't let it outrank the hamburger
   `.home-content` is `position: relative; z-index: 20` which creates a
   stacking context. The hamburger has z-index: max-int and SHOULD win,
   but in some browsers/layouts the trapping isn't perfectly intuitive.
   Drop the home-content z-index on mobile — it doesn't need one once
   the hero stops overlapping it.
   ───────────────────────────────────────────── */

@media (max-width: 1023px) {
    .home-content {
        z-index: auto !important;
    }
}