/* Base Theme Styles - Minimal and Clean */

:root {
    /* ==========================================
       SPACING SYSTEM - UNIFORM ACROSS ALL PAGES
       ========================================== */
    
    /* Section spacing - gap between major sections/boxes */
    --section-gap: 3rem;             /* 48px - Desktop spacing between sections */
    --section-gap-mobile: 2.25rem;   /* 36px - Mobile spacing between sections */
    
    /* Page wrapper padding - top/bottom of page wrappers */
    --page-padding-desktop: 0 0 1.5rem 0;  /* 0px top, 24px bottom - Desktop page padding (no top spacing) */
    --page-padding-mobile: 0 0 1rem 0; /* 0px top, 16px bottom - Mobile page padding (no top spacing) */
    
    /* Footer spacing - distance from last content to footer */
    --footer-gap: 3rem;           /* 48px - Desktop spacing before footer */
    --footer-gap-mobile: 2.25rem; /* 36px - Mobile spacing before footer */
    
    /* Box sizing - uniform across all pages */
    --box-max-width: 1400px;

    /* The theme's glass box, as an RGB triple so every existing alpha keeps working.
       In the dark theme these are exactly the literals they replaced, so dark renders
       byte-identical. The light theme swaps them, which is the whole point: 136 boxes
       were staying dark-translucent over a white page and coming out mid grey. */
    --glass-rgb: 28, 28, 30;
    --glass-hover-rgb: 44, 44, 46;
    --box-padding-desktop: 2.5rem;
    --box-padding-mobile: 1.5rem 1rem;
    --box-border-radius: 24px;
    --box-border-radius-mobile: 16px;
    --card-border-radius: 12px;
    --card-border-radius-mobile: 10px;
    --button-border-radius: 12px;
    
    /* Wrapper horizontal padding */
    --wrapper-padding-desktop: 0 2rem;
    --wrapper-padding-mobile: 0 1rem;
    
    /* Header/Title spacing within boxes */
    --title-margin-bottom: 2rem;     /* Space below section titles */
    --title-margin-bottom-mobile: 1.5rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================
   ACCESSIBILITY - FOCUS STATES
   ========================================== */
/* Visible focus for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Remove default focus outline (we use focus-visible instead) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

body {
    font-family: 
        -apple-system,       /* Font per i dispositivi Apple (iPhone, iPad, macOS) */
        BlinkMacSystemFont,  /* Supporto per Safari su macOS */
        "SF Pro Text",       /* Specifico per macOS */
        "SF Pro Display",    /* Specifico per macOS */
        "Segoe UI",          /* Font per Windows */
        Roboto,              /* Font per Android */
        Ubuntu,              /* Font per Linux */
        "Helvetica Neue",    /* Fallback per Helvetica */
        Arial,               /* Fallback generico */
        system-ui,           /* Font di sistema per altri dispositivi */
        sans-serif;          /* Fallback finale */
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 50%, #1c1c1e 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Prevent "white flash" from the html background (notably when body is position:fixed for menu open) */
html {
    background: #1c1c1e;
}

html.brightness-dark {
    background: #121214;
}

html.brightness-light {
    background: #ffffff;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.site-main {
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* ==========================================
   GLOBAL BOX TITLE STYLE
   ========================================== */
.box-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

@media (max-width: 1024px) {
    .box-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .box-title {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }
}

p {
    margin-bottom: 1rem;
}

a {
    color: #a78bfa;
    text-decoration: none;
}

/* Underline links on hover, but only when the component has not said otherwise.
   Written as a:where(:hover) so this weighs (0,0,1) instead of (0,1,1). A plain prose link still
   gets its underline, because the bare `a` rule above weighs the same and loses on source order.
   A card or button link carrying `text-decoration: none` on its own class now weighs (0,1,0) and
   wins, which is what we want: hovering a card used to underline its heading, its paragraph and
   its button label all at once, and that reads as a rendering fault rather than an affordance.
   74 declarations of text-decoration:none across the theme were being overridden this way. */
a:where(:hover) {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

/* Entry Content */
.entry-header {
    margin-bottom: 2rem;
}

.entry-title {
    font-size: 2.5rem;
}

.entry-content {
    font-size: 1.125rem;
}

/* No Content Message */
.no-content {
    text-align: center;
    padding: 4rem 2rem;
}

.no-content h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* ==========================================
   HEADER STYLES
   ========================================== */

.site-header {
    position: relative;
    width: 100%;
    min-height: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.header-gradient-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}

.header-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
    gap: 2rem;
}

.header-brand-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    min-height: auto;
    padding: 0;
    margin: 0;
}

.header-brand-link {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.header-brand-link:hover {
    opacity: 0.8;
}

.header-brand-link:active {
    opacity: 0.9;
}

.header-brand-image {
    max-width: 800px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    /* Dark shadow for depth and contrast */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) 
            drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3))
            drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
    transition: filter 0.3s ease, transform 0.3s ease;
}

.header-brand-image:hover {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)) 
            drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35))
            drop-shadow(0 12px 32px rgba(0, 0, 0, 0.25));
    transform: scale(1.02);
    display: block;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .site-header {
        min-height: auto;
        padding: 0;
    }
    
    .header-container {
        padding: 0 0.25rem;
        max-width: 100%;
    }
    
    .header-brand-container {
        min-height: auto;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    .header-brand-image {
        max-width: 100%;
        width: auto;
        max-height: 130px;
        height: auto;
        display: block;
        margin: 0 auto;
        object-fit: contain;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) 
                drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
    }
}

/* ==========================================
   GLOBAL PAGE WRAPPER - FOOTER SPACING
   Uniforme su tutte le pagine
   ========================================== */

/* Apply uniform footer spacing to all page wrappers */
.homepage-wrapper,
.brand-page-wrapper,
.brands-page-wrapper,
.legal-page-wrapper,
.xrated-lab-page-wrapper,
.xrated-lab-single-article-wrapper,
.article-page-wrapper,
.prompt-generator-page-wrapper {
    padding-bottom: var(--footer-gap) !important;
}

/* Remove margin-bottom from last child of containers to avoid double spacing */
.homepage-container > *:last-child,
.brand-page-container > *:last-child,
.brands-page-container > *:last-child,
.legal-page-container > *:last-child,
.xrated-lab-page-container > *:last-child,
.xrated-lab-single-article-container > *:last-child,
.article-page-container > *:last-child,
.prompt-generator-page-container > *:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .homepage-wrapper,
    .brand-page-wrapper,
    .brands-page-wrapper,
    .legal-page-wrapper,
    .xrated-lab-page-wrapper,
    .xrated-lab-single-article-wrapper,
    .article-page-wrapper,
    .prompt-generator-page-wrapper {
        padding-bottom: var(--footer-gap-mobile) !important;
    }
}
/* ==========================================================================
   Editorial stamps (brand badges)
   --------------------------------------------------------------------------
   One colour per stamp, grouped by what the brand is for: pink to violet for
   companions, gold to burnt orange for image tools, blue and cyan for video and
   faceswap, indigo for anime (deliberately off the pink ramp so it does not read
   as another companion), green for the one that talks about price.

   The label is white on all fourteen. Several of these backgrounds are too bright
   for white to clear 4.5:1 on their own, so the text-shadow below is doing real
   work, not decoration: it puts a dark edge under every glyph and keeps the label
   readable without draining the colour. The alternative was darkening the whole
   set by about half, which is what the first version did and it looked flat.

   The inset highlight plus the drop shadow give the pill a lit edge rather than a
   printed block, which is what makes it sit on the dark cards instead of on top
   of them.

   Every selector here is doubled on purpose, colours and glass alike. The single
   brand page paints its own translucent badge in brand-single.css, which loads
   after this file, so at equal specificity it would win the border, the shadow and
   the backdrop-filter and the stamp would look different there than everywhere
   else. Doubling lifts these to (0,2,0) and the stamp stays identical on the grid,
   the brand page, the generator and the article sidebars.

   Two selectors, and both are needed:
   - [class$="badge-x"] alone loses on the single brand page, where
     .brand-page-badge-below-title paints a translucent glass background from
     brand-single.css, which loads after this file and wins at equal specificity.
     Repeating the attribute lifts these to (0,2,0) so the colour survives.
   - The badge class is always last in the class attribute, which is why one pair
     of selectors covers all five prefixes used across the theme
     (.brand-badge-, .brand-page-badge-, .pg-brand-badge-, .related-brand-badge-).

   Labels live in madeprompt_brand_badges() in inc/acf-fields.php, keyed by these
   same slugs. Add a stamp there and add its colour here.
   ========================================================================== */
[class*="badge-workhorse"][class*="badge-"], [class*="badge-retouch"][class*="badge-"],
[class*="badge-stacked"][class*="badge-"], [class*="badge-detail"][class*="badge-"],
[class*="badge-wallet"][class*="badge-"], [class*="badge-anime"][class*="badge-"],
[class*="badge-scene"][class*="badge-"], [class*="badge-custom"][class*="badge-"],
[class*="badge-companion"][class*="badge-"], [class*="badge-pocket"][class*="badge-"],
[class*="badge-recall"][class*="badge-"], [class*="badge-zero-setup"][class*="badge-"],
[class*="badge-video"][class*="badge-"], [class*="badge-swap"][class*="badge-"] {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 14px rgba(0, 0, 0, .38);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* The Workhorse carries the gold because it is the stamp of the most-visited
   brand and gold is the one colour everybody already reads as first place. Taking
   it meant moving Detail Freak off its own gold, which sat 26 apart from this one
   and would have looked like the same stamp twice. */
[class$="badge-workhorse"][class$="badge-workhorse"]   { background: #f59e0b; }
[class$="badge-retouch"][class$="badge-retouch"]       { background: #c81e1e; }
[class$="badge-stacked"][class$="badge-stacked"]       { background: #ea580c; }
[class$="badge-detail"][class$="badge-detail"]         { background: #0f766e; }
[class$="badge-wallet"][class$="badge-wallet"]         { background: #22c55e; }
[class$="badge-anime"][class$="badge-anime"]           { background: #6366f1; }
[class$="badge-scene"][class$="badge-scene"]           { background: #7c3aed; }
[class$="badge-custom"][class$="badge-custom"]         { background: #a855f7; }
[class$="badge-companion"][class$="badge-companion"]   { background: #ff4d94; }
[class$="badge-pocket"][class$="badge-pocket"]         { background: #ff7aa8; }
[class$="badge-recall"][class$="badge-recall"]         { background: #e11d6b; }
[class$="badge-zero-setup"][class$="badge-zero-setup"] { background: #d946ef; }
[class$="badge-video"][class$="badge-video"]           { background: #3b82f6; }
[class$="badge-swap"][class$="badge-swap"]             { background: #06b6d4; }

/* ---------------------------------------------------------------------------
   PROSE LINKS
   Body copy was handing out five different link treatments depending on which
   block it sat in: violet from the global `a` on the tool pages, blue with a
   turquoise hover in the four About boxes, plain white underlined in article
   bodies, white with a bottom border and a lilac hover in brand descriptions,
   and a page accent on the newest tool page. Same kind of link, five looks.

   One treatment now, and it is the one the site already used on its longest
   texts: the page's own ink plus an underline. It reads as a link on any
   background and never argues with a page accent, which matters here because
   the accent is green on one tool page, violet on another and pink on a third.

   The value lives once, in these two custom properties. The eight rules that
   already existed in pages.css, article-pages.css, brand-single.css,
   brands.css, homepage.css and prompt-generator.css now reference them
   instead of carrying their own colour.
   --------------------------------------------------------------------------- */
:root {
    --prose-link: #ededf2;
    --prose-line: rgba(255, 255, 255, .38);
}

body.brightness-light {
    --prose-link: #15151a;
    --prose-line: rgba(0, 0, 0, .42);
}

.i2p-desc a,
.pc-about a,
.gf-desc a {
    color: var(--prose-link);
    text-decoration: underline;
    text-decoration-color: var(--prose-line);
    text-underline-offset: 3px;
}

.i2p-desc a:hover,
.pc-about a:hover,
.gf-desc a:hover {
    text-decoration-color: currentColor;
}