/* ============================================================
   Weather CMS by SEO NW v3.0 — Base stylesheet (reset + utilities)
   Templates inherit from this and layer their own style on top.
============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{margin:0;min-height:100vh}
img,svg,video{max-width:100%;height:auto;display:block}
button{font:inherit}
a{color:inherit}
.muted{color:var(--color-muted,#64748b)}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}

/* Shared minimal elements used across templates */
code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.875em}

/* Focus: visible but not ugly */
:focus-visible{outline:2px solid var(--color-primary,#0369a1);outline-offset:2px;border-radius:4px}

/* Prevent FOUC on the font swap for templates that preload */
.tpl-aurora, .tpl-observatory, .tpl-meadow{font-display:swap}

/* ============================================================
   Shared nav with hover/focus dropdowns (used by all templates)
   ============================================================ */
.wcms-nav{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap}
.wcms-nav-item,
.wcms-nav-toggle{
    background:none;border:0;cursor:pointer;
    padding:.5rem .875rem;border-radius:.375rem;
    font:inherit;color:inherit;text-decoration:none;
    display:inline-flex;align-items:center;gap:.375rem;
    white-space:nowrap;line-height:1.2;
    transition:background .15s, color .15s;
}
.wcms-nav-item:hover,
.wcms-nav-toggle:hover,
.wcms-nav-toggle:focus-visible{
    background:color-mix(in srgb, currentColor 8%, transparent);
}
.wcms-nav-group{position:relative}
.wcms-nav-toggle span{font-size:.65em;opacity:.6}
.wcms-nav-dropdown{
    display:none;
    position:absolute;top:100%;left:0;z-index:50;
    min-width:180px;
    background:var(--color-bg,#fff);
    border:1px solid color-mix(in srgb, currentColor 15%, transparent);
    border-radius:.5rem;
    box-shadow:0 8px 24px -8px rgba(0,0,0,.15);
    padding:.375rem;
    margin-top:.25rem;
}
.wcms-nav-dropdown a{
    display:block;
    padding:.5rem .75rem;
    border-radius:.25rem;
    color:inherit;text-decoration:none;
    font-size:.9rem;white-space:nowrap;
}
.wcms-nav-dropdown a:hover,
.wcms-nav-dropdown a:focus-visible{
    background:color-mix(in srgb, currentColor 10%, transparent);
}
.wcms-nav-group:hover .wcms-nav-dropdown,
.wcms-nav-group:focus-within .wcms-nav-dropdown{
    display:block;
}

/* mobile: stack nav vertically */
@media (max-width: 720px){
    .wcms-nav{flex-direction:column;align-items:stretch;width:100%}
    .wcms-nav-group{width:100%}
    .wcms-nav-toggle{width:100%;justify-content:space-between}
    .wcms-nav-dropdown{
        position:static;
        border:0;box-shadow:none;
        background:transparent;
        padding-left:1rem;
    }
}

/* ============================================================
   Home-page info boxes: almanac + station info
   ============================================================ */
.wcms-info-grid{
    display:grid;gap:1rem;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    margin:1.5rem 0;
}
.wcms-info-card{
    padding:1.25rem 1.5rem;
    border:1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius:.75rem;
    background:color-mix(in srgb, currentColor 2%, transparent);
}
.wcms-info-card h3{
    font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
    margin:0 0 .75rem;opacity:.7;font-weight:600;
    display:flex;align-items:center;gap:.375rem;
}
.wcms-info-card dl{
    margin:0;display:grid;gap:.375rem .75rem;
    grid-template-columns:auto 1fr;
}
.wcms-info-card dt{opacity:.7;font-size:.85rem}
.wcms-info-card dd{margin:0;font-weight:500;font-size:.9rem;text-align:right}

/* ============================================================
   Fire-danger badge
   ============================================================ */
.wcms-firedanger{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.5rem 1rem;border-radius:999px;
    font-weight:600;color:#fff;
}
.wcms-fireforecast{
    display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap;
}
.wcms-fireday{
    flex:1;min-width:80px;text-align:center;
    padding:.625rem .5rem;border-radius:.5rem;
    color:#fff;font-weight:600;
}
.wcms-fireday .day{font-size:.75rem;opacity:.85;font-weight:400;margin-bottom:.25rem}

/* Comparison table — today vs yesterday */
.wcms-compare{width:100%;border-collapse:collapse;margin:1rem 0}
.wcms-compare th,.wcms-compare td{
    padding:.625rem .75rem;
    border-bottom:1px solid color-mix(in srgb, currentColor 10%, transparent);
    text-align:right;
}
.wcms-compare th:first-child,.wcms-compare td:first-child{text-align:left}
.wcms-compare thead th{font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.wcms-delta-up{color:#dc2626}
.wcms-delta-down{color:#2563eb}

/* Footer menu partial (used by all templates) */
.wcms-footer-nav {
    display: flex; flex-wrap: wrap; gap: .5rem 0;
    justify-content: center; align-items: center;
    margin: .75rem 0;
    font-size: .85rem;
}
.wcms-footer-nav a {
    color: inherit; text-decoration: none;
    padding: .25rem .5rem; border-radius: .25rem;
}
.wcms-footer-nav a:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.wcms-footer-sep { color: inherit; opacity: .3; margin: 0 .25rem; }

/* Admin-table tweaks */
.admin-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.admin-table th, .admin-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; }
.admin-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; font-weight: 600; }