/* ============================================================================
   aqua / light.css — THEME (SKIN). "A reef-science field guide."
   For a serious aquarium/aquatics site: a deep-water DEPTH gradient banner with a
   sticky "waterline" menu bar, a naturalist serif (Fraunces) over a technical sans
   (IBM Plex Sans) + mono (IBM Plex Mono) for water parameters, and a reef-teal /
   planted-green / coral palette on clean cool-white content. Pairs with the BANNER
   header + WIDE footer + the 'aqua' menu style. Builds on the default base skin
   (@import). SKIN ONLY — no layout/positioning (that's base.css + the arrangement).
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
@import url("../default/light.css");
@import url("chrome.css");           /* banner + waterline + wide-footer geometry (bundled, not in base.css) */

:root {
    /* text + surfaces — cool white, easy on the eyes for long reference reading */
    --ink:        #0b2530;
    --ink-soft:   #2e4d59;
    --muted:      #607e8a;
    --line:       #d3e6ec;
    --bg:         #f3f9fb;
    --bg-alt:     #e4f1f5;
    --card:       #ffffff;
    --code-bg:    #eaf4f7;

    /* accent + links — blue-green reef teal, planted-green for visited */
    --accent:        #0a9d8c;
    --accent-hover:  #08786b;
    --accent-ink:    #ffffff;
    --visited:       #2f8f6a;

    /* status */
    --ok:     #1f9d6b;
    --warn:   #e08a1e;
    --danger: #e0524a;

    /* typography */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-sans:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --leading:      1.65;

    /* surface treatment */
    --radius:    12px;
    --radius-sm: 8px;
    --shadow:    0 14px 34px rgba(8, 60, 78, .16);

    /* depth palette — the chrome (banner / waterline): blue-green surface sinking to a deep-blue abyss */
    --deep-surface: #11a09a;
    --deep-mid:     #0b4f5e;
    --abyss:        #06202c;
    --waterline:    #0a3a44;
    --glint:        #34d6c2;
    --coral:        #ff6f5e;
}

/* a faint cool wash behind the page; content sits on white cards/surfaces */
body { background: linear-gradient(180deg, var(--bg-alt), var(--bg)); background-attachment: fixed; }

/* naturalist serif headings over the technical body */
h1, h2, h3, h4, .site-banner-title, .hero-block h1, .article-title, .feed-title, .widget-title, .comments-title {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
}
h1, .article-title { font-weight: 700; }
.eyebrow { color: var(--accent); }
.lede { color: var(--ink-soft); }

/* image-heavy site: rounded, soft-shadowed media */
.article-body img, .widget-image img { border-radius: var(--radius-sm); box-shadow: var(--shadow); }

/* ---- BANNER: looking down into deep water -------------------------------- */
.site-banner {
    background: linear-gradient(178deg, var(--deep-surface) 0%, var(--deep-mid) 52%, var(--abyss) 100%);
    color: #eafaff;
    overflow: hidden;
}
/* soft light shafts from the surface — quiet, not cartoonish */
.site-banner::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(168, 245, 255, .28), transparent 60%),
        radial-gradient(50% 60% at 22% -10%, rgba(120, 230, 255, .14), transparent 70%),
        radial-gradient(45% 60% at 80% -10%, rgba(120, 230, 255, .12), transparent 70%);
}
/* with a banner photo: darken into legibility */
.site-banner.has-banner::before { background: linear-gradient(180deg, rgba(6, 47, 64, .45), rgba(6, 32, 44, .78)); }
.site-banner-title { color: #f3feff; }
.site-banner-title:hover { color: #ffffff; text-decoration: none; }
.site-banner-tagline { color: rgba(225, 248, 252, .82); font-style: italic; }

/* ---- WATERLINE: the sticky menu bar -------------------------------------- */
.site-menubar {
    background: var(--waterline);
    box-shadow: 0 1px 0 rgba(63, 214, 207, .35) inset, 0 10px 24px -16px rgba(6, 32, 44, .9);
    border-bottom: 1px solid rgba(63, 214, 207, .22);
}
.site-menubar-brand { color: #eafaff; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; }
.site-menubar-brand:hover { color: #ffffff; text-decoration: none; }
.site-menubar .menu a { color: #cfeef2; font-weight: 500; text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; }
.site-menubar .menu a:hover { color: #ffffff; border-bottom-color: var(--glint); }
.site-menubar .menu .has-children > a::after { content: " ▾"; color: rgba(207, 238, 242, .6); font-size: .8em; }
/* dropdowns drop onto the deep surface so they read over the light page below */
.site-menubar .menu-horizontal li ul { background: var(--deep-mid); border: 1px solid rgba(63, 214, 207, .22); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .3rem 0; }
.site-menubar .menu-horizontal li ul a { display: block; padding: .45rem 1rem; border-bottom: 0; color: #d7eff2; white-space: nowrap; }
.site-menubar .menu-horizontal li ul a:hover { background: rgba(63, 214, 207, .14); color: #ffffff; }

/* ---- WIDE footer --------------------------------------------------------- */
.site-footer--wide { background: var(--abyss); color: rgba(214, 239, 242, .72); border-top: 1px solid rgba(63, 214, 207, .18); font-size: .92rem; }
.site-footer--wide .menu a, .site-footer--wide a { color: rgba(214, 239, 242, .82); }
.site-footer--wide .menu a:hover, .site-footer--wide a:hover { color: var(--glint); }
.site-footer-copy { margin: 0; color: rgba(214, 239, 242, .55); }

/* ---- COMPANION menu style: aqua (standalone, e.g. a footer/sidebar menu) -- */
.menu-style-aqua { background: var(--waterline); border-radius: 999px; padding: .35rem 1.15rem; }
.menu-style-aqua a { color: #cfeef2; }
.menu-style-aqua a:hover { color: #ffffff; }
.menu-style-aqua .has-children > a::after { color: rgba(207, 238, 242, .6); }
.menu-style-aqua li ul { background: var(--deep-mid); border-color: rgba(63, 214, 207, .22); }
.menu-style-aqua li ul a:hover { background: rgba(63, 214, 207, .14); color: #ffffff; }

/* ---- COMPANION menu style: applied-menu ---------------------------------
   Mimics the light top-bar nav in the AppliedHome mockup: slate links sitting
   directly on a light header bar (transparent — no pill), a teal underline that
   grows under an item on hover/focus, a caret on dropdown parents, and clean white
   dropdown panels. Meant for a LIGHT header (e.g. the default header). The menu
   system marks no "current" item, so the teal accent is the hover/focus state. */
.menu-style-applied-menu { background: transparent; }
.menu-style-applied-menu.menu-horizontal > ul { gap: 1.9rem; align-items: center; }
.menu-style-applied-menu a { color: var(--ink); font-weight: 500; text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.menu-style-applied-menu a:hover,
.menu-style-applied-menu a:focus { color: var(--accent); border-bottom-color: var(--accent); }
.menu-style-applied-menu .has-children > a::after { content: " ▾"; color: var(--muted); font-size: .8em; }
.menu-style-applied-menu.menu-horizontal li ul { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .3rem 0; }
.menu-style-applied-menu.menu-horizontal li ul a { display: block; padding: .45rem 1rem; border-bottom: 0; color: var(--ink-soft); white-space: nowrap; }
.menu-style-applied-menu.menu-horizontal li ul a:hover,
.menu-style-applied-menu.menu-horizontal li ul a:focus { background: var(--bg-alt); color: var(--accent); }

/* ---- SCIENTIFIC MOTIF: water-parameter tags ------------------------------ */
/* a monospace spec strip — drop <p class="spec">pH <b>8.2</b> · dKH <b>9</b> · <b>78°F</b></p> in content */
.spec { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .01em; color: var(--ink-soft); }
.spec b, .spec strong { color: var(--accent); font-weight: 600; }
/* a single pill: <span class="param">pH <b>8.2</b></span> */
.param { display: inline-block; font-family: var(--font-mono); font-size: .76rem; padding: .12rem .55rem; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); color: var(--ink-soft); }
.param b { color: var(--accent); font-weight: 600; }
.param + .param { margin-left: .35rem; }

/* a touch of reef in the small stuff */
.series-num { background: var(--accent); }
blockquote { border-left-color: var(--accent); background: var(--bg-alt); }
.widget-callout { border-left-color: var(--accent); }
mark { background: color-mix(in srgb, var(--coral) 28%, transparent); }