/* Tomahawk Weather Signal — page-scoped coastal dashboard */
.weather-page {
    /* Mapped onto the Coastal Mist palette rather than a teal scheme of its
       own, so the page belongs to the site instead of sitting beside it. */
    --weather-ink: var(--ink);
    --weather-ink-soft: var(--ink-soft);
    --weather-ocean: var(--ocean-600);
    --weather-ocean-deep: var(--ocean-700);
    --weather-cyan: var(--ocean-500);
    --weather-mist: var(--mist-100);
    --weather-sky: var(--ocean-100);
    --weather-sun: var(--sand-500);
    --weather-card: var(--surface);

    /* The tide panel is the one dark surface; it follows the footer. */
    --weather-deep: #1e3a50;
    --weather-deep-ink: rgba(255, 255, 255, 0.72);
    --weather-deep-soft: var(--ocean-300);
    color: var(--ink);
    background: var(--mist-100);
    min-height: 100vh;
}

.weather-page h1,
.weather-page h2,
.weather-page h3 { color: inherit; }

.weather-kicker {
    margin: 0 0 .4rem;
    color: var(--weather-ocean);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.weather-hero {
    /* The photograph was configured in weather.php but the rule using it was
       commented out, leaving a flat panel where every other page has an
       image. Restored, and left to the shared .hero scrim and mist dissolve
       so it matches the rest of the site rather than carrying its own. */
    color: #fff;
    background-color: var(--ocean-700);
    background-image: var(--weather-hero-image);
    background-position: center 40%;
    background-repeat: no-repeat;
    background-size: cover;
}

.weather-hero .weather-kicker { color: var(--ocean-300); }
.weather-hero__title { margin: 0; padding: 0; }

.weather-hero__top {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}

.weather-status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex: 0 0 auto;
    padding: .65rem .85rem;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: var(--radius-pill);
    color: var(--ocean-100);
    background: rgb(255 255 255 / 8%);
    font-size: .74rem;
    font-weight: 800;
    backdrop-filter: blur(12px);
}

.weather-status i {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--seafoam-500);
    box-shadow: 0 0 0 5px rgb(127 165 150 / 22%);
}

.weather-status--stale i,
.weather-status--partial i { background: var(--weather-sun); box-shadow: 0 0 0 5px rgb(201 177 132 / 26%); }
.weather-status--estimated i { background: var(--ocean-300); box-shadow: 0 0 0 5px rgb(169 196 210 / 22%); }
.weather-status--unavailable i { background: var(--ink-faint); box-shadow: none; }

.weather-now {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 2.8rem 0 2.2rem;
}

.weather-now__reading { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.weather-now__temp {
    font-size: clamp(4.2rem, 16vw, 8.5rem);
    font-weight: 800;
    line-height: .82;
    letter-spacing: -.1em;
    font-variant-numeric: tabular-nums;
}

.weather-now__condition { margin: 0 0 .35rem; font-size: clamp(1.05rem, 3vw, 1.45rem); font-weight: 800; }
.weather-now__detail { margin: 0; color: var(--mist-200); font-size: .84rem; }
.weather-now__detail span { margin: 0 .25rem; opacity: .55; }
.weather-now__updated { margin: .45rem 0 0; color: var(--ocean-300); font-size: .72rem; font-weight: 700; }
.weather-now--empty { justify-content: flex-start; max-width: 42rem; }
.weather-now--empty h2 { color: #fff; }
.weather-now--empty p { margin: 0; color: var(--weather-deep-ink); }

.weather-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.weather-metric {
    min-width: 0;
}

.weather-metric > span,
.weather-metric small { display: block; }
.weather-metric > span { color: var(--ocean-700); font-size: .63rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.weather-metric strong { display: block; margin: .28rem 0 .15rem; color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.weather-metric small { overflow: hidden; color: var(--ink-soft); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }

.weather-body { padding-top: 1.25rem; padding-bottom: 4rem; }
.weather-overview { padding: 1.5rem 0 .25rem; }
.weather-overview .section-head { margin: 0; }
.weather-overview .lede { font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.75; }
.weather-card {
    margin: 1rem 0;
    padding: 1.15rem;
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.weather-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.weather-section-head h2 { margin: 0; font-size: clamp(1.25rem, 4vw, 1.85rem); }
.weather-empty { margin: 0; padding: 1.1rem; border-radius: var(--radius-md); color: var(--weather-ink-soft); background: var(--weather-mist); }

.weather-tide {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--ink) 0%, var(--ocean-700) 100%);
}
.weather-tide .weather-kicker { color: var(--ocean-300); }
.weather-tide h2 { color: #fff; }
.weather-tide__state { padding: .5rem .7rem; border-radius: var(--radius-pill); color: var(--ocean-100); background: rgb(72 194 203 / 13%); font-size: .7rem; font-weight: 800; text-transform: capitalize; }
.weather-tide__state--unavailable { color: var(--mist-200); background: rgb(255 255 255 / 8%); }
.weather-tide__next { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; z-index: 2; }
.weather-tide__next span,
.weather-tide__next small { display: block; color: var(--weather-deep-soft); font-size: .68rem; font-weight: 700; }
.weather-tide__next strong { display: block; margin: .15rem 0; color: #fff; font-size: clamp(2.1rem, 8vw, 3.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.weather-tide__count { flex: 0 0 auto; padding: .7rem .8rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: var(--radius-sm); color: #fff !important; background: rgb(255 255 255 / 7%); }

.weather-tide__graphic { position: relative; height: 5rem; margin: .5rem -1.15rem 0; overflow: hidden; }
.weather-tide__graphic::before,
.weather-tide__graphic::after,
.weather-tide__graphic i {
    content: '';
    position: absolute;
    left: -8%;
    width: 116%;
    height: 4rem;
    border-radius: 50%;
    border-top: 2px solid var(--ocean-500);
}
.weather-tide__graphic::before { top: 2.5rem; opacity: .9; }
.weather-tide__graphic::after { top: 3.25rem; opacity: .3; }
.weather-tide__graphic i:first-child { top: 3.7rem; opacity: .12; }
.weather-tide__graphic i:last-child { inset: auto 0 0; width: 100%; height: 2.8rem; border: 0; border-radius: 0; background: linear-gradient(180deg, rgb(72 194 203 / 16%), rgb(72 194 203 / 4%)); }

.weather-tide__events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; position: relative; z-index: 2; }
.weather-tide__events article { padding: .75rem; border: 1px solid rgb(255 255 255 / 8%); border-radius: var(--radius-sm); background: rgb(255 255 255 / 5%); }
.weather-tide__events span,
.weather-tide__events small { display: block; color: var(--weather-deep-soft); font-size: .65rem; font-weight: 700; }
.weather-tide__events strong { display: block; margin: .15rem 0; color: #fff; font-size: 1rem; font-variant-numeric: tabular-nums; }
/* Which day an event belongs to. The list runs across today and tomorrow,
   and without this two different days read as one contradictory set. */
.weather-tide__day {
    display: block;
    margin-top: .2rem;
    color: var(--ocean-300);
    font-size: .6rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.weather-tide__events article.is-day-start { border-color: rgb(255 255 255 / 22%); }
.weather-tide__events article.is-day-start .weather-tide__day { color: var(--ocean-300); }
.weather-tide__next-day {
    margin-left: .4rem;
    color: var(--ocean-300);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: middle;
}
.weather-tide .weather-empty { color: var(--weather-deep-ink); background: rgb(255 255 255 / 6%); }

.weather-hourly__controls { display: flex; gap: .4rem; }
.weather-hourly__controls button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--mist-200);
    border-radius: var(--radius-sm);
    color: var(--weather-ink);
    background: var(--weather-mist);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.weather-hourly__controls button:hover { border-color: var(--weather-cyan); background: var(--ocean-100); }
.weather-hourly__controls button:disabled { opacity: .38; cursor: default; }
.weather-hourly__controls button:focus-visible,
.weather-hourly__rail:focus-visible { outline: 3px solid var(--weather-cyan); outline-offset: 3px; }

.weather-hourly__rail {
    display: grid;
    grid-auto-columns: minmax(7.2rem, 1fr);
    grid-auto-flow: column;
    gap: .55rem;
    overflow-x: auto;
    padding: .2rem .1rem .7rem;
    scroll-padding: .1rem;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--ocean-300) transparent;
}
.weather-hour { display: grid; justify-items: center; gap: .45rem; padding: .85rem .65rem; border: 1px solid var(--mist-200); border-radius: var(--radius-md); background: var(--mist-50); scroll-snap-align: start; text-align: center; }
.weather-hour time { color: var(--weather-ink-soft); font-size: .68rem; font-weight: 800; }
.weather-hour > strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.weather-hour > span { color: var(--weather-ocean-deep); font-size: .68rem; font-weight: 700; }
.weather-hour > small { color: var(--ink-soft); font-size: .6rem; white-space: nowrap; }

.weather-feature-grid { display: grid; gap: 0; }
.weather-coastal__primary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--ocean-100), var(--mist-100)); }
.weather-coastal__primary span { color: var(--weather-ocean-deep); font-size: .74rem; font-weight: 800; }
.weather-coastal__primary strong { font-size: 2.2rem; font-variant-numeric: tabular-nums; }
.weather-coastal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .65rem; }
.weather-coastal__grid article { padding: .8rem; border: 1px solid var(--mist-200); border-radius: var(--radius-md); }
.weather-coastal__grid span,
.weather-coastal__grid small { display: block; color: var(--weather-ink-soft); font-size: .65rem; }
.weather-coastal__grid strong { display: block; margin: .25rem 0; font-size: 1.2rem; font-variant-numeric: tabular-nums; }

.weather-daylight__arc { position: relative; height: 6rem; margin: .25rem 1rem 0; overflow: hidden; }
.weather-daylight__arc::before { content: ''; position: absolute; left: 5%; right: 5%; top: 2.1rem; height: 7rem; border: 2px dashed var(--ocean-300); border-radius: 50% 50% 0 0; }
.weather-daylight__arc i { position: absolute; left: 50%; top: 1.45rem; width: 1.4rem; height: 1.4rem; margin-left: -.7rem; border-radius: 50%; background: var(--weather-sun); box-shadow: 0 0 24px rgb(201 177 132 / 55%); }
.weather-daylight__times { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; text-align: center; }
.weather-daylight__times article { min-width: 0; }
.weather-daylight__times span { display: block; color: var(--weather-ink-soft); font-size: .62rem; font-weight: 700; }
.weather-daylight__times strong { display: block; margin-top: .2rem; font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.weather-week__grid { display: grid; gap: .5rem; }
.weather-day { display: grid; grid-template-columns: 4.2rem 2.8rem 4rem minmax(6.5rem, 1fr); align-items: center; gap: .45rem; padding: .7rem; border: 1px solid var(--mist-200); border-radius: var(--radius-md); background: #fff; }
.weather-day--today { border-color: var(--ocean-300); background: var(--mist-100); }
.weather-day > div > span,
.weather-day > div > small { display: block; }
.weather-day > div > span { font-size: .76rem; font-weight: 800; }
.weather-day > div > small { color: var(--weather-ink-soft); font-size: .6rem; }
.weather-day__temps { display: flex; align-items: baseline; gap: .35rem; }
.weather-day__temps strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.weather-day__temps span { color: var(--weather-ink-soft); font-size: .8rem !important; }
.weather-day__detail { text-align: right; }
.weather-day__detail span,
.weather-day__detail small { white-space: nowrap; }


/* Condition icons: Meteocons, fill style (MIT, Bas Milius, meteocons.com),
   stored under assets/vendor/. Markup from WeatherView::icon(). The files
   carry their own gentle animation, with still copies for reduced motion. */
.weather-icon { --icon-size: 4rem; display: inline-block; flex: 0 0 auto; width: var(--icon-size); height: var(--icon-size); }
.weather-icon--sm { --icon-size: 3.4rem; }
.weather-icon--md { --icon-size: 4rem; }
.weather-icon--lg { --icon-size: clamp(6rem, 20vw, 9.5rem); }
.weather-icon__img,
.weather-icon__img img { display: block; width: 100%; height: 100%; }

/* The icons' clouds are white, and vanish on the white forecast cards. There
   they sit on a pale sea-blue disc; the hero photo and the tide card are dark
   enough without one. */
.weather-hourly .weather-icon,
.weather-week .weather-icon,
.weather-day .weather-icon { border-radius: 50%; background: color-mix(in srgb, var(--ocean-300) 55%, var(--ocean-100)); }

@keyframes weather-tide-flow { 50% { transform: translateX(2%); } }

.weather-tide__graphic::before,
.weather-tide__graphic::after { animation: weather-tide-flow 6s ease-in-out infinite; }

@media (min-width: 600px) {
    .weather-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .weather-card { padding: 1.5rem; }
    .weather-tide__graphic { margin-left: -1.5rem; margin-right: -1.5rem; }
    .weather-tide__events { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
    .weather-feature-grid { grid-template-columns: 1.15fr .85fr; gap: 1rem; }
    .weather-day { grid-template-columns: 5rem 3rem 5rem minmax(8rem, 1fr); }
}

@media (min-width: 1020px) {
    .weather-metrics { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .weather-body { padding-top: 1.8rem; }
    .weather-card { margin: 1.2rem 0; border-radius: var(--radius-lg); }
    .weather-hourly__rail { grid-auto-columns: minmax(8rem, 1fr); }
    .weather-week__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .weather-day { grid-template-columns: 1fr; justify-items: center; gap: .7rem; padding: 1rem .55rem; text-align: center; }
    .weather-day__detail { text-align: center; }
}

@media (max-width: 520px) {
    .weather-hero { background-position: 62% center; }
    .weather-hero__top { align-items: flex-start; }
    .weather-status { max-width: 8rem; justify-content: center; padding: .55rem .7rem; text-align: center; }
    .weather-now { align-items: flex-start; }
    .weather-now > .weather-icon { margin-top: .6rem; }
    .weather-now__reading { display: block; }
    .weather-now__temp { margin-bottom: .8rem; }
    .weather-now__detail span { display: none; }
    .weather-now__detail { display: grid; gap: .1rem; }
    .weather-daylight__times strong { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
    .weather-page *,
    .weather-page *::before,
    .weather-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Moon phase — drawn at its real illumination, oriented for the southern
   hemisphere, and worked out locally rather than fetched.
   -------------------------------------------------------------------------- */
.weather-moon {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--mist-200);
}
/* Moon phase: a Meteocons icon (WeatherView::moonDisc). Meteocons draws the
   northern-hemisphere moon, lit on the right while waxing; from Tasmania it
   is lit on the left, so it is mirrored. */
.moon-disc { display: inline-block; flex: 0 0 auto; line-height: 0; }
/* Sized by the image's own width and height (WeatherView::moonDisc $size);
   stretching it to the span let it grow to the page width. */
.moon-disc__img,
.moon-disc__img img { display: block; }
.moon-disc--south .moon-disc__img { transform: scaleX(-1); }

.weather-moon__detail { min-width: 0; }
.weather-moon__detail > span {
    display: block;
    color: var(--ink-faint);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.weather-moon__detail strong { display: block; margin: .1rem 0; color: var(--ink); font-size: 1rem; }
.weather-moon__detail small { display: block; color: var(--ink-soft); font-size: .74rem; }
.weather-moon__next { margin-top: .15rem; color: var(--ink-faint) !important; }

.weather-moon__times { margin-top: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Moon on each forecast day: the phase drawn small, with rise and set. */
.weather-day__moon {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--mist-200);
}
.weather-day__moon small {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .5rem;
    color: var(--ink-faint);
    font-size: .62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Tide curve — the modelled sea level, with now marked on it.
   Replaces three decorative arcs that represented nothing.
   -------------------------------------------------------------------------- */
.tide-curve {
    position: relative;
    margin: .6rem -1.15rem .9rem;
    padding: 0;
    height: 6.5rem;
}
@media (min-width: 600px) {
    .tide-curve { margin-left: -1.5rem; margin-right: -1.5rem; height: 7.5rem; }
}

.tide-curve__svg { display: block; width: 100%; height: 100%; }
.tide-curve__area { fill: rgb(255 255 255 / 10%); }
.tide-curve__line { fill: none; stroke: var(--ocean-300); stroke-width: 2; stroke-linecap: round; }

/* A second copy of the water, drifting slowly behind the first. The data is
   never moved — only this shadow of it — so the reading stays honest. */
.tide-curve__wave {
    fill: rgb(255 255 255 / 7%);
    animation: tide-drift 9s ease-in-out infinite;
}
@keyframes tide-drift {
    0%, 100% { transform: translate3d(-1.5%, 2px, 0); }
    50%      { transform: translate3d(1.5%, -2px, 0); }
}

/* Where the water is right now */
.tide-curve__now {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--at, 50%);
    width: 0;
    border-left: 2px dashed rgb(255 255 255 / 35%);
}
.tide-curve__now b {
    position: absolute;
    top: .35rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .12rem .5rem;
    color: var(--ink);
    background: var(--ocean-300);
    border-radius: var(--radius-pill);
    font-size: .68rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* The dot rides the waterline: --level is the curve's height at this moment,
   measured from the top of the plot with the same mapping as the path. */
.tide-curve__now::after {
    content: '';
    position: absolute;
    left: -4px;
    top: var(--level, 50%);
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--ocean-300);
    box-shadow: 0 0 0 0 rgb(169 196 210 / 55%);
    animation: tide-pulse 2.8s ease-out infinite;
}
@keyframes tide-pulse {
    0%   { box-shadow: 0 0 0 0 rgb(169 196 210 / 55%); }
    70%  { box-shadow: 0 0 0 12px rgb(169 196 210 / 0%); }
    100% { box-shadow: 0 0 0 0 rgb(169 196 210 / 0%); }
}

.tide-curve__axis {
    position: absolute;
    inset: auto 1.15rem .1rem;
    display: flex;
    justify-content: space-between;
    color: var(--weather-deep-soft);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tide-curve__axis i { font-style: normal; }
/* "now" belongs under the marker, not halfway along: the window is 6 hours
   back and 18 ahead, so now is about a quarter of the way in. --at-share is
   the marker's position across the figure (0–1); the axis is inset 1.15rem
   each side, so convert that into the axis's own width. */
.tide-curve__axis-now {
    position: absolute;
    left: calc((100% + 2.3rem) * var(--at-share, .25) - 1.15rem);
    transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
    .tide-curve__wave { animation: none; }
    .tide-curve__now::after { animation: none; box-shadow: none; }
}

/* Which service a coastal figure comes from, when it differs from the rest. */
.weather-coastal__source {
    margin-left: 0.35rem;
    font-style: normal;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.75;
}