/* ============================================================
   Word Clock - app/word-clock/  (moved out of index.php 16 Oct 2026)
   Site palette: #4bb2d5 primary blue, #3b779b dark blue,
                 #3a9d85 teal, #ce3527 red
   The grid is sized in em off one font-size on .wc-frame, and that
   font-size follows the stage width (container units) inline, or the
   smaller of viewport width/height in fullscreen, so it never overflows.
   ============================================================ */
.wc-stage{
    --clock-color:#ffffff;
    --glow:0.85;
    --ghost:0.08;
    --lit-op:1;
    background:#0a0a0a;
    border-radius:12px;
    padding:1.5rem 1rem;
    margin:1rem 0 1.5rem 0;
    box-shadow:rgba(0,0,0,.15) 0 4px 20px;
    text-align:center;
    container-type:inline-size;
    overflow:hidden;
}
.wc-frame{
    display:inline-block;
    position:relative;
    padding:1.1em;
    font-size:clamp(10px, 3.4vw, 26px);
    font-size:clamp(10px, 3.9cqi, 30px);
}
.wc-grid{
    display:grid;
    grid-template-columns:repeat(11, 1.2em);
    column-gap:.7em;
    row-gap:.5em;
    font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
    font-weight:700;
    line-height:1;
    -webkit-user-select:none;
    user-select:none;
}
.wc-cell{
    color:rgba(255,255,255,var(--ghost));
    transition:color .35s ease, text-shadow .35s ease;
    text-align:center;
}
.wc-cell.lit{
    color:var(--clock-color);
    opacity:var(--lit-op);
    text-shadow:
        0 0 calc(8px * var(--glow)) var(--clock-color),
        0 0 calc(18px * var(--glow)) var(--clock-color);
}
.wc-dots{
    position:absolute;
    inset:.3em;
    pointer-events:none;
}
.wc-dot{
    position:absolute;
    width:.32em;height:.32em;
    min-width:5px;min-height:5px;
    border-radius:50%;
    background:rgba(255,255,255,var(--ghost));
    transition:background .35s ease, box-shadow .35s ease;
}
.wc-dot[data-dot="1"]{top:0;left:0;}
.wc-dot[data-dot="2"]{top:0;right:0;}
.wc-dot[data-dot="3"]{bottom:0;right:0;}
.wc-dot[data-dot="4"]{bottom:0;left:0;}
.wc-dot.lit{
    background:var(--clock-color);
    opacity:var(--lit-op);
    box-shadow:0 0 calc(8px * var(--glow)) var(--clock-color);
}
.wc-readout{margin-top:1rem;}
.wc-sentence{
    color:var(--clock-color);
    opacity:calc(.8 * var(--lit-op));
    font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
    font-size:1.05rem;
    font-size:clamp(.85rem, 3.2cqi, 1.25rem);
    letter-spacing:1px;
    text-transform:uppercase;
    text-shadow:0 0 calc(8px * var(--glow)) var(--clock-color);
    min-height:1.4em;
}
.wc-digital{
    margin-top:.35rem;
    color:var(--clock-color);
    opacity:calc(.6 * var(--lit-op));
    font:600 .95rem/1.2 Consolas,"Segoe UI",monospace;
    font-variant-numeric:tabular-nums;
    letter-spacing:1px;
}

/* Brightness levels (data-level is the effective level, so Auto resolves to dim or med) */
.wc-stage[data-level="dim"]{--glow:0.35;--ghost:0.05;--lit-op:.62;}
.wc-stage[data-level="med"]{--glow:0.85;--ghost:0.08;--lit-op:1;}
.wc-stage[data-level="bright"]{--glow:1.4;--ghost:0.13;--lit-op:1;}

/* Hide states */
.wc-stage[data-show-sentence="0"] .wc-readout{display:none;}
.wc-stage[data-show-dots="0"] .wc-dots{display:none;}
.wc-stage[data-ghost="0"] .wc-cell:not(.lit){color:transparent;}
.wc-stage[data-ghost="0"] .wc-dot:not(.lit){background:transparent;}

/* ============================================================
   Fullscreen. The whole page goes fullscreen (so the touch Exit
   button and toast stay visible) and the stage is pinned over it.
   On iPhone Safari, which has no fullscreen API, the pinned stage
   alone still fills the screen.
   ============================================================ */
html.wc-fs,
html.wc-fs body{overflow:hidden;}
.wc-stage.is-fs{
    position:fixed;
    inset:0;
    z-index:2147483000;
    width:100%;height:100%;
    margin:0;
    padding:env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    border-radius:0;
    box-shadow:none;
    background:#000;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.wc-stage.is-fs .wc-frame{font-size:min(3.9vw, 4.3vh, 64px);}
@supports (height:100dvh){
    .wc-stage.is-fs{height:100dvh;}
    .wc-stage.is-fs .wc-frame{font-size:min(3.9vw, 4.3dvh, 64px);}
}
.wc-stage.is-fs .wc-sentence{font-size:min(4.4vw, 4.4vh, 2rem);}
.wc-stage.is-fs .wc-digital{font-size:min(3vw, 3vh, 1.25rem);}
.wc-stage.is-fs .wc-readout{margin-top:min(3vh, 2rem);}
.wc-stage.is-fs.wc-idle,
.wc-stage.is-fs.wc-idle *{cursor:none;}

/* ============================================================
   Controls
   ============================================================ */
.wc-controls{
    background:#fff;
    border:1px solid #e1e5e9;
    border-radius:8px;
    padding:1.25rem;
    margin-bottom:2rem;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap:1.25rem;
}
.wc-control-group{display:flex;flex-direction:column;gap:.5rem;min-width:0;}
.wc-control-label{
    font-size:.75rem;
    font-weight:700;
    color:#3b779b;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.wc-color-row{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;}
.wc-color-swatch{
    width:44px;height:44px;
    border-radius:50%;
    border:3px solid #fff;
    box-shadow:0 0 0 1px #c9d6df;
    background:var(--swatch);
    cursor:pointer;
    padding:0;
    transition:transform .15s ease, box-shadow .15s ease;
}
.wc-color-swatch[data-color="#ffffff"]{box-shadow:0 0 0 1px #9fb2c0;}
.wc-color-swatch:hover{transform:scale(1.06);}
.wc-color-swatch[aria-pressed="true"]{box-shadow:0 0 0 3px #3b779b;}
.wc-picker{
    display:inline-flex;align-items:center;gap:.4rem;
    min-height:44px;
    margin-left:.25rem;
    font-size:.85rem;font-weight:600;color:#3b779b;
    cursor:pointer;
}
#wcColorPicker{
    width:44px;height:44px;
    border:1px solid #c9d6df;
    border-radius:6px;
    cursor:pointer;
    padding:2px;
    background:#fff;
}
.wc-segmented{
    display:inline-flex;
    max-width:100%;
    border:1px solid #c9d6df;
    border-radius:6px;
    overflow:hidden;
    background:#f7fafb;
    width:fit-content;
}
.wc-seg{
    flex:1 1 auto;
    background:transparent;
    border:none;
    min-height:44px;
    padding:.5rem .8rem;
    font:600 .85rem "Open Sans",sans-serif;
    color:#2f6e8d;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
}
.wc-seg:not(:last-child){border-right:1px solid #c9d6df;}
.wc-seg:hover{background:#eaf2f7;}
.wc-seg[aria-pressed="true"]{background:#2f6e8d;color:#fff;}
.wc-hint{margin:0;font-size:.8rem;color:#5a6b78;line-height:1.4;}
.wc-toggles{display:flex;flex-direction:column;gap:0;}
.wc-toggle{display:flex;align-items:center;gap:.6rem;min-height:44px;font-size:.9rem;color:#2f6e8d;cursor:pointer;}
.wc-toggle input{accent-color:#3b779b;width:20px;height:20px;margin:0;flex:none;}
.wc-actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;gap:.5rem;}
.wc-btn{
    background:#5f7a8f;
    color:#fff !important;
    border:none;
    border-radius:6px;
    min-height:44px;
    padding:.6rem 1rem;
    font:600 .9rem "Open Sans",sans-serif;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    transition:background .2s ease;
}
.wc-btn:hover{background:#3b779b;}
.wc-btn-primary{background:#2c7d69;}
.wc-btn-primary:hover{background:#235f51;}

.wc-color-swatch:focus-visible,
.wc-seg:focus-visible,
.wc-btn:focus-visible,
#wcColorPicker:focus-visible,
.wc-toggle input:focus-visible,
.faq-q:focus-visible,
.wc-related-card:focus-visible,
.wc-share-box input:focus-visible{outline:3px solid #4bb2d5;outline-offset:2px;}
.wc-seg:focus-visible{outline-offset:-3px;}

.wc-share-box{
    grid-column:1/-1;
    display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
    background:#eaf2f7;
    padding:.6rem;
    border-radius:6px;
}
.wc-share-box label{font-size:.85rem;color:#2f6e8d;font-weight:600;}
.wc-share-box input{flex:1 1 200px;min-width:0;min-height:40px;padding:.4rem;border:1px solid #c9d6df;border-radius:4px;font-size:.85rem;}

/* Toast */
.wc-toast{
    position:fixed;
    left:50%;
    bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    transform:translate(-50%, 12px);
    z-index:2147483646;
    max-width:calc(100% - 32px);
    padding:.7rem 1.1rem;
    border-radius:8px;
    background:#1d2a33;
    color:#fff;
    font:600 .9rem/1.3 "Open Sans",sans-serif;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
}
.wc-toast.show{opacity:1;transform:translate(-50%, 0);}

/* ============================================================
   Sections / lists / FAQ
   ============================================================ */
.wc-section-title{
    color:#2f6e8d;
    font:700 1.4rem "Trebuchet MS",Arial,sans-serif;
    margin:2rem 0 1rem 0;
    padding-bottom:.5rem;
    border-bottom:2px solid #e9f2f7;
}
.wc-section-title--sub{font-size:1.15rem;border-bottom:none;margin-top:1rem;}
.wc-list{margin:0 0 1rem 1.5rem;line-height:1.6;color:#374351;}
.wc-list li{margin-bottom:.4rem;}
.content__main kbd{
    background:#eaf2f7;
    color:#2f6e8d;
    border:1px solid #c9d6df;
    border-bottom-width:2px;
    border-radius:4px;
    padding:1px 6px;
    font-size:.85em;
    font-family:Consolas,monospace;
}

.faq{margin-top:.5rem;}
.faq-item{border:1px solid #e1e5e9;border-radius:6px;margin-bottom:.5rem;overflow:hidden;background:#fff;}
.faq-q{
    width:100%;background:#f7fafb;border:none;
    min-height:44px;
    padding:.85rem 1rem;text-align:left;font:600 1rem "Open Sans",sans-serif;
    color:#2f6e8d;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.75rem;
    transition:background .2s ease;
}
.faq-q:hover{background:#eaf2f7;}
.faq-q i{flex:none;transition:transform .2s ease;}
.faq-q[aria-expanded="true"] i{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a > p{padding:1rem;margin:0;line-height:1.6;color:#374351;}
.faq-item.open .faq-a{max-height:600px;}

/* Related cards */
.wc-related{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap:.75rem;
    margin-top:.5rem;
}
.wc-related-card{
    display:flex;align-items:center;gap:.5rem;
    min-height:44px;
    padding:.85rem 1rem;
    background:#f7fafb;
    border:1px solid #e1e5e9;
    border-radius:6px;
    color:#2f6e8d !important;
    font-weight:600;
    text-decoration:none;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.wc-related-card:hover{background:#eaf2f7;border-color:#4bb2d5;transform:translateY(-2px);}
.wc-related-card i{color:#2c7d69;font-size:1.1rem;}

/* Mobile */
@media(max-width:768px){
    .wc-stage{padding:1.25rem .5rem;}
    .wc-controls{padding:1rem;gap:1rem;}
    .wc-section-title{font-size:1.2rem;}
}

@media (prefers-reduced-motion: reduce){
    .wc-cell,.wc-dot,.wc-color-swatch,.wc-seg,.wc-btn,.faq-q,.faq-q i,.faq-a,.wc-related-card,.wc-toast{transition:none;}
    .wc-color-swatch:hover,.wc-related-card:hover{transform:none;}
}