/*
|--------------------------------------------------------------------------
| Aurelia Press — Mobile Responsive Overrides
|--------------------------------------------------------------------------
|
| Loaded AFTER assets/css/app.css. Every rule below lives inside a
| max-width media query, so the desktop experience is pixel-identical
| to the original website. These rules only fix small-screen layout:
| horizontal overflow, squeezed portal topbars, wide charts/tables,
| oversized paddings and tap/zoom ergonomics.
|
*/

/* =============== Tablets & phones (below the lg breakpoint) =============== */
@media (max-width: 1023.98px) {

    /* Never allow sideways page scroll / mobile viewport blow-out. */
    html,
    body {
        overflow-x: clip !important;
        max-width: 100%;
    }

    /* Flex/grid items must be allowed to shrink below their content
       size — this is the root cause of most mobile overflow here
       (charts, cards and toolbars pushing past the viewport). */
    .flex > *,
    .grid > * {
        min-width: 0 !important;
    }

    main,
    section,
    header,
    footer,
    aside {
        min-width: 0;
    }

    img,
    video,
    canvas,
    iframe {
        max-width: 100%;
    }

    /* Charts (Recharts) must never exceed their card. */
    .recharts-responsive-container,
    .recharts-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .recharts-surface {
        max-width: 100%;
    }

    /* ---- Portal layouts (Admin / Affiliate / Reader dashboards) ---- */
    /* Topbar: let the title breathe and the actions wrap underneath
       instead of crushing the heading into "R.." / "Welcome ba...". */
    div[class*="lg:pl-"] > header > div {
        gap: 10px !important;
        padding: 12px 16px !important;
    }

    div[class*="lg:pl-"] > header [class~="flex-1"] {
        flex: 1 1 170px !important;
    }

    div[class*="lg:pl-"] > header h1 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 20px !important;
        line-height: 1.15 !important;
    }

    div[class*="lg:pl-"] > header p {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        letter-spacing: 0.14em;
    }

    div[class*="lg:pl-"] > header [class~="truncate"] {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Portal content gutter. */
    div[class*="lg:pl-"] > main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Public site header: tighter gutter so logo + actions fit. */
    body > div > header [class*="max-w-"] {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Dark-hero pages: the original design only gives the Home page a
       light-on-dark header, so on Books / Store / Contact etc. the logo
       text, cart and menu icons render navy-on-navy and disappear.
       Mirror the Home treatment on every dark-hero page while the
       header is still transparent (once scrolled it gains bg-white
       and correctly switches back to dark text). The html.dark-hero
       flag is set by the route script in layouts/app.blade.php;
       Checkout (light hero) is excluded. */
    html.dark-hero header[class*="z-[95]"]:not([class*="bg-white"]) a > span:nth-child(2) > span:first-child {
        color: #fff !important;
    }

    html.dark-hero header[class*="z-[95]"]:not([class*="bg-white"]) button[class~="text-navy"] {
        color: #fff !important;
    }

    html.dark-hero header[class*="z-[95]"]:not([class*="bg-white"]) button[class~="text-navy"]:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }
}

/* =============== Phones (below the sm breakpoint) =============== */
@media (max-width: 639.98px) {

    /* Roomier rhythm: huge desktop section padding becomes compact. */
    [class~="py-28"] {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    [class~="py-24"] {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    [class~="py-20"] {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Oversized card padding shrinks on phones. */
    [class~="p-8"] {
        padding: 1.25rem !important;
    }

    [class~="p-10"] {
        padding: 1.5rem !important;
    }

    /* Headings wrap gracefully and never poke out of the screen. */
    h1,
    h2,
    h3 {
        overflow-wrap: break-word;
    }

    /* Wide data tables become swipeable inside their card instead
       of stretching the whole page (affiliate leaderboard, orders…). */
    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Long links / handles / referral URLs wrap instead of overflowing. */
    code,
    .font-mono {
        overflow-wrap: anywhere;
    }

    /* Prevent iOS auto-zoom on focus + comfortable tap targets. */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    button,
    a,
    input,
    select,
    textarea,
    label {
        -webkit-tap-highlight-color: transparent;
    }

    /* Books page: the tilted twin-book display scales down to fit. */
    [class~="w-[180px]"] {
        width: 138px !important;
    }

    [class~="h-[260px]"] {
        height: 200px !important;
    }

    /* Home hero book stage is shorter on phones. */
    [class~="h-[520px]"] {
        height: 430px !important;
    }

    /* Any fixed-width drawer / panel stays inside the viewport. */
    [class*="w-[420px]"],
    [class*="w-[440px]"],
    [class*="w-[480px]"] {
        max-width: 94vw !important;
    }

    /* Footer newsletter row + long footer columns stack cleanly. */
    footer form {
        max-width: 100%;
    }

    /* Stat strips with tiny columns get breathing room. */
    [class~="grid-cols-3"] {
        gap: 1rem;
    }
}

/* =============== Dark-hero header text (ALL screen sizes) ===============
   The original design gives only the Home page a light-on-dark header.
   On every other dark-hero page (About, Books, Store, Affiliate, …) the
   logo, nav links, Portals, Search pill and cart icon render navy on
   navy and are invisible at the top of the page — on desktop too.
   The rules below mirror the Home header's exact palette while the
   header is transparent (not scrolled). Once scrolled, the header
   gains its bg-white class and these rules switch off automatically.
   Checkout (light hero, no html.dark-hero flag) is unaffected. */
html.dark-hero header[class*="z-[95]"]:not([class*="bg-white"]) a > span:nth-child(2) > span:first-child {
    color: #fff !important;
}

html.dark-hero header[class*="z-[95]"]:not([class*="bg-white"]) :is(a, button)[class*="text-navy/65"] {
    color: rgba(255, 255, 255, 0.7) !important;
}

html.dark-hero header[class*="z-[95]"]:not([class*="bg-white"]) :is(a, button)[class~="text-navy"] {
    color: #fff !important;
}

html.dark-hero header[class*="z-[95]"]:not([class*="bg-white"]) :is(a, button)[class*="text-navy"]:hover {
    color: #fff !important;
}

html.dark-hero header[class*="z-[95]"]:not([class*="bg-white"]) button[class~="text-navy"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

html.dark-hero header[class*="z-[95]"]:not([class*="bg-white"]) button[class*="border-navy/12"] {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

html.dark-hero header[class*="z-[95]"]:not([class*="bg-white"]) button[class*="border-navy/12"]:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
}

/* =============== Very small phones =============== */
@media (max-width: 380px) {
    [class~="w-[180px]"] {
        width: 118px !important;
    }

    [class~="h-[260px]"] {
        height: 172px !important;
    }

    div[class*="lg:pl-"] > header h1 {
        font-size: 18px !important;
    }
}