/* ========================================================= */
/* Moon Station                                                */
/* moon.css                                                    */
/* WhichPhase's own hero + expansion panel. Does NOT include    */
/* WhatPhase's collapsed .moon-bar styling — WhichPhase keeps    */
/* its own large always-visible hero, adopted only WhatPhase's   */
/* expansion panel architecture (Section 1/2/3 below).           */
/* ========================================================= */

/* ── Hero layout ── */
/* Outer spacing (margin-top, relative to Weather above) stays in
   styles.css as global page geometry — this is Moon's own
   internal layout only. max-width/margin:auto match every other
   Station's own 580px column; justify-content:center groups the
   image+info pair as one visual unit centered in that column —
   the info block's own text stays left-aligned internally (see
   .moon-hero-info below), only the group's position shifts. */
.moon-hero{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    padding:8px 8px 8px 18px;
    max-width:656px;
    margin-left:auto;
    margin-right:auto;
}

.moon-hero-image{
    flex:0 0 auto;
    cursor:pointer;
}

#wp-moon-img-wrap{
    position:relative;
    cursor:pointer;
}

/* Persistent diffuse cyan glow — sized as a percentage of the
   wrapper so it scales automatically at every breakpoint (160px
   desktop, 80px/70px mobile) with no extra media queries needed.
   Sits behind the moon image via z-index:-1 within this
   position:relative wrapper; blurred radial gradient, not a
   drop-shadow, so it never traces the asset's edge — safe at
   New Moon's dark disc too. */
#wp-moon-img-wrap::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:180%;
    height:180%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,255,255,0.55) 0%, rgba(0,255,255,0.28) 45%, rgba(0,255,255,0) 78%);
    filter:blur(22px);
    pointer-events:none;
    z-index:-1;
}

/* Light mode: original, gentler intensity — unchanged from before. */
body.light-mode #wp-moon-img-wrap::before{
    background:radial-gradient(circle, rgba(0,255,255,0.35) 0%, rgba(0,255,255,0.16) 45%, rgba(0,255,255,0) 75%);
    filter:blur(18px);
}

/* Ultra mode: no glow at all — preserves dark-adapted night vision. */
body.ultra-mode #wp-moon-img-wrap::before{
    content:none;
}

/* Styled hover hint — hidden by default everywhere (safe default
   on touch/no-hover devices); only revealed by the hover-capable,
   fine-pointer media query below. Not a native title tooltip. */
.moon-hover-hint{
    position:absolute;
    left:50%;
    bottom:-8px;
    transform:translate(-50%, 4px);
    white-space:nowrap;
    padding:6px 12px;
    border-radius:var(--radius-pill);
    background:var(--glass);
    border:1px solid var(--glass-border);
    color:var(--text);
    font-size:12px;
    font-weight:600;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.18s ease, transform 0.18s ease;
    z-index:5;
}

.moon-hover-arrow{
    font-size:18px;
    font-weight:800;
    line-height:1;
    vertical-align:-2px;
}

@media (hover:hover) and (pointer:fine){
    #wp-moon-img-wrap:hover .moon-hover-hint{
        opacity:1;
        transform:translate(-50%, 12px);
    }
}

body.ultra-mode .moon-hover-hint{
    display:none;
}

.moon-hero-info{
    display:flex;
    flex-direction:column;
    gap:6px;
    text-align:left;
    align-items:flex-start;
    text-shadow:0 1px 3px rgba(0,0,0,.75);
}

body.light-mode .moon-hero-info{
    text-shadow:0 1px 1px rgba(0,0,0,0.20);
}

/* ── Typography — Pass 2 targets ── */
.lunar-phase-name{
    font-size:17px;
    font-weight:600;
    color:var(--text);
    text-align:left;
    line-height:1.2;
    letter-spacing:0;
}

body.light-mode .lunar-phase-name{
    color:#2F3E56;
}

body.ultra-mode .lunar-phase-name{
    color:var(--soft-text);
}

.lunar-illumination{
    font-size:16px;
    font-weight:500;
    color:var(--text);
    letter-spacing:0;
    text-align:left;
    line-height:1.2;
}

body.light-mode .lunar-illumination{
    color:#2F3E56;
}

.lunar-countdown{
    font-size:16px;
    font-weight:500;
    color:var(--text);
    letter-spacing:0;
    text-align:left;
    line-height:1.2;
}

body.light-mode .lunar-countdown{
    color:#2F3E56;
}

.lunar-monthly-label{
    margin-top:4px;
    display:flex;
    flex-direction:column;
    gap:1px;
}

.lunar-monthly-prefix{
    font-size:13px;
    opacity:0.75;
    text-align:left;
    line-height:1.3;
}

.lunar-monthly-name{
    display:block;
    font-size:16px;
    font-weight:600;
    color:var(--text);
    text-align:left;
    line-height:1.2;
}

body.light-mode .lunar-monthly-name{
    color:#243B63;
}

/* ── Countdown label/value pair ── */
.lunar-countdown-group{
    display:flex;
    flex-direction:column;
    gap:1px;
}

.lunar-countdown-label{
    font-size:13px;
    opacity:0.75;
    text-align:left;
    line-height:1.3;
}

/* ── Hero moon image ── */
/* Pre-rendered, already-circular phase assets — no cropping or  */
/* clipping needed, unlike the old NASA-photo approach this      */
/* replaces (which needed border-radius/overflow-hidden/scale    */
/* trickery to crop a rectangular photo into a circle). Plain    */
/* object-fit:contain is correct for this asset type.            */
#hero-moon{
    display:block;
    width:160px;
    height:160px;
    object-fit:contain;
}

/* ========================================================= */
/* EXPANSION PANEL                                             */
/* ========================================================= */

.moon-panel{
    display:grid;
    grid-template-rows:0fr;
    width:100%;
    max-width:656px;
    padding:0 clamp(10px,3vw,18px);
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;

    transition:grid-template-rows .35s ease;
}

#moon-station.is-open + .moon-panel{
    grid-template-rows:1fr;
}

.moon-panel-inner{
    overflow:hidden;
    min-height:0;
}

.moon-panel-content{
    position:relative;
    padding:18px 20px 20px;

    border:1px solid rgba(180,178,232,.32);
    border-radius:20px;

    background:var(--glass);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 4px 18px rgba(0,0,0,.12);
}

/* Close (X) button — donor: which-tides.css .tides-expand-close-btn,
   same sizing/behavior. Moon has no local token-alias block (unlike
   Aurora/Solar/Time), so this references the global tokens directly;
   focus ring uses --gold, Moon's own established accent. */
.moon-expand-close-btn{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;background:none;border:0;border-radius:50%;color:var(--soft-text);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}
.moon-expand-close-btn:hover{background:var(--glass-hover);color:var(--text)}
.moon-expand-close-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

@media (prefers-reduced-motion:reduce){

    .moon-panel{
        transition:none;
    }

}

/* ========================================================= */
/* SECTION 1 — HERO PHASE STRIP                                */
/* ========================================================= */

.moon-hero-strip{
    width:100%;
    padding:14px;

    border:1px solid rgba(180,178,232,.28);
    border-radius:16px;

    background:rgba(255,255,255,.02);
}

.moon-hero-image-wrap{
    position:relative;

    width:100%;
    line-height:0;

    border-radius:18px;
    overflow:hidden;
}

.moon-phase-strip-image{
    display:block;

    width:100%;
    height:auto;
}

.moon-position-star{
    position:absolute;
    left:0;
    bottom:27%;

    width:42px;
    height:42px;

    object-fit:contain;
    pointer-events:none;

    filter:drop-shadow(0 0 8px rgba(214,165,66,.78));

    transform:translateX(-50%);
    z-index:3;
}

.moon-hero-phase-name{
    margin-top:10px;

    color:var(--gold);
    font-size:16px;
    font-weight:500;
    letter-spacing:-.01em;
    text-align:center;
}

/* ========================================================= */
/* SECTION 2 — MOON TIMES                                      */
/* ========================================================= */

.moon-times-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;

    margin-top:18px;
    padding:14px 0;

    border:1px solid rgba(180,178,232,.28);
    border-radius:14px;

    background:transparent;
}

.moon-time-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:0 10px;
}

.moon-time-col + .moon-time-col{
    border-left:1px solid rgba(180,178,232,.22);
}

.moon-time-label{
    margin-bottom:3px;

    color:var(--gold);
    opacity:.72;
    font-size:13px;
    font-weight:500;
    letter-spacing:.02em;
    text-transform:uppercase;
}

.moon-time-value{
    color:var(--text);
    font-size:17px;
    font-weight:600;
}

/* ========================================================= */
/* SECTION 3 — NOTABLE LUNAR EVENTS                            */
/* ========================================================= */

.moon-notable-section{
    margin-top:18px;
}

.moon-notable-heading{
    margin:0 0 14px;

    color:var(--gold);
    opacity:.72;
    font-size:13px;
    font-weight:500;
    letter-spacing:.02em;
    text-transform:uppercase;
    text-align:center;
}

.moon-notable-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 12px;

    width:100%;
}

.moon-notable-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    min-width:0;
}

.moon-notable-asset{
    display:block;

    width:56px;
    height:56px;

    margin-bottom:8px;

    object-fit:contain;

    filter:
        drop-shadow(0 0 8px rgba(122,129,226,.24))
        drop-shadow(0 0 3px rgba(255,255,255,.10));
}

.moon-notable-name{
    color:var(--text);
    font-size:14px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;

    max-width:100%;
}

.moon-notable-date{
    margin-top:3px;

    color:var(--soft-text);
    font-size:12px;
    font-weight:500;

    max-width:100%;
}

/* ========================================================= */
/* RESPONSIVE                                                  */
/* ========================================================= */

@media (max-width:390px){

    #hero-moon{
        width:80px;
        height:80px;
    }

}

@media (max-width:340px){

    #hero-moon{
        width:70px;
        height:70px;
    }

}

@media (max-width:700px){

    .moon-hero-phase-name{
        font-size:14px;
    }

    .moon-panel-content{
        padding:14px 16px 16px;
        border-radius:18px;
    }

    .moon-hero-strip{
        padding:10px;
        border-radius:14px;
    }

    .moon-position-star{
        bottom:25%;
        width:36px;
        height:36px;
    }

    .moon-times-row{
        margin-top:14px;
        padding:10px 0;
        border-radius:12px;
    }

    .moon-time-col{
        padding:0 6px;
    }

    .moon-time-label{
        font-size:12px;
    }

    .moon-time-value{
        font-size:15px;
    }

    .moon-notable-section{
        margin-top:14px;
    }

    .moon-notable-heading{
        font-size:12px;
        margin-bottom:12px;
    }

    .moon-notable-grid{
        gap:14px 10px;
    }

    .moon-notable-asset{
        width:48px;
        height:48px;
        margin-bottom:6px;
    }

    .moon-notable-name{
        font-size:13px;
    }

    .moon-notable-date{
        font-size:11px;
    }

}

@media (max-width:420px){

    .moon-hero-phase-name{
        font-size:12px;
    }

    .moon-panel-content{
        padding:12px 14px 14px;
        border-radius:16px;
    }

    .moon-hero-strip{
        padding:8px;
        border-radius:12px;
    }

    .moon-position-star{
        bottom:23%;
        width:32px;
        height:32px;
    }

    .moon-times-row{
        border-radius:10px;
    }

    .moon-time-col{
        padding:0 4px;
    }

    .moon-time-label{
        font-size:11px;
    }

    .moon-time-value{
        font-size:14px;
    }

    .moon-notable-section{
        margin-top:12px;
    }

    .moon-notable-heading{
        font-size:11px;
        margin-bottom:10px;
    }

    .moon-notable-grid{
        gap:12px 8px;
    }

    .moon-notable-asset{
        width:40px;
        height:40px;
        margin-bottom:5px;
    }

    .moon-notable-name{
        font-size:11px;
    }

    .moon-notable-date{
        font-size:10px;
    }

}