@charset "UTF-8";
/* CSS Document */

/* Align language dropdown with search icon in header */
ul#top_tools .dropdown-mini {
    vertical-align: middle;
}
ul#top_tools a#lang_link {
    font-size: 13px;
    line-height: 18px;
}
ul#top_tools a#lang_link:before {
    font-size: 18px;
    top: -1px;
}

/* Beach amenities - compact icon list */
ul.beach-amenities {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
ul.beach-amenities li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    color: #555;
}
ul.beach-amenities li i.fa-solid {
    font-size: 15px;
    color: #0097a7;
}

/* Beach list amenity icons */
.beach-list-amenities {
    display: flex;
    gap: 8px;
    margin-top: 5px;
}
.beach-list-amenities i.fa-solid {
    font-size: 14px;
    color: #999;
}

/* InfoBox image sizing */
.marker_info_2 img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

/* List page thumbnail cropping */
.img_list {
    min-height: 220px;
}
.img_list img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Footer active language */
footer li.active a {
    font-weight: 600;
}

/* Search overlay: base citytours CSS targets input[type="text"] but we use
   input[type="search"] for accessibility. Mirror the styling. */
.search-overlay-menu input[type="search"] {
    height: 100%;
    width: 100%;
    color: #fff;
    background: transparent;
    border-top: 0 solid transparent;
    border-bottom: 2px solid #909090 !important;
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
    font-size: 32px;
    font-weight: 400;
    outline: none;
    padding: 10px 0;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}
.search-overlay-menu input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Uniform card thumbnails (3:2 aspect ratio) across article, hotel, resort, camping, restaurant cards */
.tour_container .img_container,
.hotel_container .img_container,
.resort_container .img_container,
.camping_container .img_container,
.restaurant_container .img_container {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.tour_container .img_container img,
.hotel_container .img_container img,
.resort_container .img_container img,
.camping_container .img_container img,
.restaurant_container .img_container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Footer weather widget */
footer .weather-widget {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 12px 14px;
    max-width: 320px;
    color: #bfbfbf;
    font-size: 14px;
}
footer .weather-current {
    font-size: 15px;
    color: #fff;
}
footer .weather-current strong {
    font-size: 16px;
}
footer .weather-current .weather-icon {
    font-size: 20px;
    margin-right: 4px;
}
footer .weather-current-vals {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
footer .weather-current .weather-sea {
    font-size: 13px;
    color: #cfcfcf;
    position: relative;
    padding-left: 12px;
}
footer .weather-current .weather-sea::before {
    content: '·';
    position: absolute;
    left: 0;
    color: #777;
}
footer .weather-current .weather-sea i {
    margin-right: 4px;
    color: #bfbfbf;
}
footer .weather-extra {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
    font-size: 13px;
    color: #ddd;
    gap: 6px 10px;
}
footer .weather-extra span {
    white-space: nowrap;
}
footer .weather-extra i {
    color: #bfbfbf;
    margin-right: 4px;
    width: 14px;
    text-align: center;
}
footer .weather-forecast {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
    gap: 8px;
}
footer .weather-day {
    flex: 1;
}
footer .weather-day-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
}
footer .weather-day .weather-icon {
    font-size: 22px;
    line-height: 1.2;
    margin: 2px 0;
}
footer .weather-day-temp {
    font-size: 13px;
    color: #ddd;
}
footer .weather-source {
    font-size: 11px;
    color: #666;
}

/* Article TOC — subtle in-body table of contents (CityTours has no equivalent shortcode) */
.article-body .article-toc {
    background: #eef5fa;
    border-left: 3px solid #4a90e2;
    border-radius: 4px;
    padding: 18px 22px;
    margin: 24px 0 32px 0;
}
.article-body .article-toc p {
    margin: 0 0 8px 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #3c6897;
}
.article-body .article-toc ul {
    margin: 0;
    padding-left: 20px;
    columns: 2;
    column-gap: 24px;
}
.article-body .article-toc li {
    margin-bottom: 4px;
    break-inside: avoid;
}
.article-body .article-toc a {
    color: #2a2a2a;
    text-decoration: none;
    border-bottom: 1px dotted #a9c5e4;
}
.article-body .article-toc a:hover {
    color: #2b6db8;
    border-bottom-color: #2b6db8;
}
@media (max-width: 767px) {
    .article-body .article-toc ul { columns: 1; }
}

/* Article disclaimer — subtle warning block for legal/tax/financial content */
.article-body .article-disclaimer {
    background: #fff8e6;
    border-left: 3px solid #e6a817;
    border-radius: 4px;
    padding: 14px 18px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.55;
    color: #4a3d15;
}
.article-body .article-disclaimer p {
    margin: 0;
}
.article-body .article-disclaimer strong:first-child {
    color: #8a5f0a;
}
.article-body .article-disclaimer a {
    color: #8a5f0a;
    text-decoration: underline;
}
.article-body .article-disclaimer a:hover {
    color: #e6a817;
}

/* Smooth scroll + offset so anchor jumps don't hide behind sticky header */
html { scroll-behavior: smooth; }
.article-body h2[id] { scroll-margin-top: 90px; }

/* Footer webcams link — sits under weather widget */
footer .footer-webcams-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    font-size: 13px;
    color: #ddd;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
footer .footer-webcams-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}
footer .footer-webcams-link i {
    font-size: 15px;
}

/* Webcams page — long-form content with inline live-stream embeds */
.webcams-page .lead {
    font-size: 17px;
    line-height: 1.55;
    color: #2a2a2a;
}
.webcams-page .webcam-section {
    margin-top: 48px;
}
.webcams-page .webcam-section h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}
.webcams-page .webcam-section h3 {
    font-size: 17px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 8px;
}
.webcams-page .webcam-player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.webcams-page .webcam-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Click-to-play facade: show a lightweight snapshot poster and only load the
   heavy live-stream iframe when the visitor clicks. Six live players at once
   made this page crawl on mobile; posters are a fraction of the weight. */
.webcams-page .webcam-player[data-embed] {
    cursor: pointer;
}
.webcams-page .webcam-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.webcams-page .webcam-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    border-radius: 40px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background 0.15s;
}
.webcams-page .webcam-player:hover .webcam-play {
    background: rgba(0, 0, 0, 0.82);
}

/* Mobile header — give language selector breathing room from the hamburger icon */
@media (max-width: 991px) {
    #top_tools {
        margin-right: 20px;
    }
    #top_tools > li {
        padding-right: 4px;
    }
}

/* Real estate — WhatsApp CTA button (rounded, soft shadow, hover lift) */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #25D366;
    color: #fff;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 12px 24px;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(37, 211, 102, .35);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    text-decoration: none;
    cursor: pointer;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus {
    background-color: #1ebe5b;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(37, 211, 102, .45);
}
.btn-whatsapp i { font-size: 1.3em; line-height: 1; }
.btn-whatsapp--block { display: flex; width: 100%; }

/* Real estate — tighten the "browse by" intent-link chips */
.re-intent-links .btn_1.outline {
    padding: 8px 16px;
    font-size: 12px;
}

/* The seller invitation, under the listings.
   ---------------------------------------------------------------------------
   It used to be a filled chip at the end of the row above, which was wrong on
   both counts: every other chip there narrows the list of things to buy, and
   with five of them wrapping it landed alone on a second line. Here it follows
   the grid, which is the one moment an owner has just held every asking price
   in Rovinj up against his own place. The whole band is the link — one line of
   text on the page's own quiet grey, no fill and no button, because it must
   not outshout the listings it sits under. */
.re-sell-band a {
    display: block;
    padding: 16px 20px;
    margin-bottom: 30px;
    background: #f6f7f9;
    border: 1px solid #ececec;
    border-radius: 3px;
}
.re-sell-band a::after {
    content: " \2192";
    white-space: nowrap;
}
.re-sell-band a:hover,
.re-sell-band a:focus {
    background: #f0f1f4;
}

/* Seller landing header band.
   ---------------------------------------------------------------------------
   A plain background band, not the site's `parallax-window`. The parallax
   plugin can only anchor an image top / centre / bottom or at a pixel offset,
   and this photo needs a percentage: it is 1600x1066 behind a 470px band, so
   roughly two thirds of its height is cropped, and WHICH two thirds is the
   whole decision. Centre lands on open water; flush top lands on empty sky and
   the sun flare, where white type sits worst. `center 22%` keeps the sun and
   the lit roofs in frame and drops the empty water at the bottom — and being a
   percentage it holds at every viewport width, which a pixel offset would not.
   The inner .parallax-content-1 / .opacity-mask markup is unchanged, so the
   height, typography and dark mask match every other header on the site.

   The asset is 1600px wide against a full-bleed band: it is shown 1:1 up to a
   1600px viewport and upscaled beyond it (1.2x at 1920, 1.6x on a 2560
   monitor). Acceptable behind a 45% black mask; a ~2400px export would remove
   the compromise entirely. */
.sell-hero {
    min-height: 470px;
    position: relative;
    background-color: #23404d;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 22%;
}
/* Matches the 767px breakpoint where style.css drops .parallax-content-1 to
   360px — the band and its content must shrink together or the mask stops
   covering the photo. */
@media (max-width: 767px) {
    .sell-hero {
        min-height: 360px;
    }
}

/* Seller landing — the numbered "what happens next" list and the proof line.
   The proof (traffic + who reads it) is the whole argument of the page, so it
   is set larger than body copy and given the accent rule. */
.sell-proof {
    border-left: 3px solid #2d8a8a;
    padding-left: 16px;
}
.sell-point h3,
.sell-steps h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}
.sell-point {
    margin-bottom: 18px;
}
.sell-steps {
    counter-reset: sellstep;
    list-style: none;
    padding-left: 0;
}
.sell-steps > li {
    counter-increment: sellstep;
    position: relative;
    padding-left: 46px;
    margin-bottom: 18px;
}
.sell-steps > li:before {
    content: counter(sellstep);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2d8a8a;
    color: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 32px;
}
/* The steps are also the row's columns. `padding-left` on the li would
   otherwise replace Bootstrap's gutter rather than add to it, and the counter
   circle at `left: 0` would sit in the gutter instead of on the text edge — so
   both are re-expressed against the live gutter width. */
.sell-steps.row > li {
    padding-left: calc(46px + var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
}
.sell-steps.row > li:before {
    left: calc(var(--bs-gutter-x) * 0.5);
}
.realestate-sell-box .form-group {
    margin-bottom: 12px;
}
/* One form, at the end of the page. The hero's button is a link to it, which
   is what keeps the phone reader's route to the form short now that there is
   no copy of it near the top. */
.sell-hero-cta {
    margin-top: 22px;
}
.sell-page .realestate-sell-box {
    margin-top: 40px;
    /* The header is sticky and `html` scrolls smoothly, so without this the
       jump from the hero lands with the form's own heading behind the nav. */
    scroll-margin-top: 90px;
}

/* ------------------------------------------------------------------
   In-article partner card (replaces the old dark "banner ad" block).
   The old markup used aspect-ratio:4/1 + min-height:120px, and CSS
   transfers a min-height through the ratio into min-width (120*4=480px),
   so the card blew past a 366px article column and gave the whole page
   a horizontal scrollbar on mobile. No aspect-ratio here — the card
   sizes from its content, and min-width:0 keeps the flex kids honest.
   ------------------------------------------------------------------ */
.partner-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 30px 0 42px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    text-decoration: none !important;
    color: inherit;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
/* Lifted-corner shadow recycled from the CityTours .banner component. */
.partner-card:after,
.partner-card:before {
    position: absolute;
    content: "";
    z-index: 1;
    height: 18px;
    width: 50%;
    top: 100%;
    pointer-events: none;
}
.partner-card:after { left: 0; background: url("../img/shadow-bg.bb9034419f6b.png") no-repeat top left; }
.partner-card:before { right: 0; background: url("../img/shadow-bg.bb9034419f6b.png") no-repeat top right; }
.partner-card:hover,
.partner-card:focus-visible {
    border-color: #d0d5dd;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .13);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Corner ribbon — adapted from the theme's .ribbon_3, in our partner green. */
.partner-card__ribbon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 78px;
    height: 78px;
    overflow: hidden;
    pointer-events: none;
}
.partner-card__ribbon span {
    position: absolute;
    top: 17px;
    left: -25px;
    display: block;
    width: 110px;
    background: linear-gradient(#3cb87a 0%, #2b8d5b 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    transform: rotate(-45deg);
}
.partner-card__media {
    flex: 0 0 104px;
    min-width: 0;
    align-self: stretch;
    min-height: 104px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.partner-card__body {
    flex: 1 1 180px;
    min-width: 0;
    padding: 13px 16px;
}
.partner-card__eyebrow {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #8a94a6;
    margin-bottom: 3px;
}
.partner-card__title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: #222;
    margin-bottom: 3px;
}
.partner-card__price {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #2b8d5b;
    margin-bottom: 4px;
}
.partner-card__price .partner-card__unit {
    font-weight: 400;
    font-size: 12.5px;
    color: #8a94a6;
}
.partner-card__trust {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #8a94a6;
}
.partner-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.45;
    color: #6b7280;
    margin: 0;
}
.partner-card__cta {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    padding: 12px 18px;
    background: #32a067;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.partner-card:hover .partner-card__cta { background: #2b8d5b; }
.partner-card__cta .partner-card__arrow {
    transition: transform .18s ease;
}
.partner-card:hover .partner-card__arrow { transform: translateX(3px); }

/* Partner detail — quick-facts strip above the prose */
.partner-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 26px;
    margin-bottom: 26px;
    padding: 14px 18px;
    background: #f7f9fa;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
}
.partner-facts__price {
    font-size: 22px;
    font-weight: 700;
    color: #2b8d5b;
    line-height: 1.2;
}
.partner-facts__price span {
    font-size: 13px;
    font-weight: 400;
    color: #8a94a6;
}
.partner-facts__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    color: #6b7280;
}
.partner-facts__list li { margin: 0; }
.partner-facts__list i { color: #8a94a6; margin-right: 4px; }

/* End-of-article recommendation block */
.partner-recos {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid #e4e7ec;
}
.partner-recos__title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 18px;
}
.partner-recos .partner-card { margin-top: 0; }

/* Side-by-side only when the row genuinely fits (media + text + button).
   Below this the CTA orphans under the photo as a stray pill — keep the
   stacked layout with the full-width button instead. nowrap so the button
   can never wrap out of the row; the text column shrinks first. */
@media (min-width: 768px) {
    .partner-card { flex-wrap: nowrap; }
    .partner-card__media { flex-basis: 168px; min-height: 128px; }
    .partner-card__body { padding: 16px 20px; align-self: center; }
    .partner-card__title { font-size: 19px; }
    .partner-card__cta {
        flex: 0 0 auto;
        align-self: center;
        margin: 0 20px 0 8px;
        border-radius: 8px;
        min-height: 44px;
    }
}

/* Weather page (/weather/) — its own namespace on purpose. The footer widget
   owns `.weather-*` and is scoped `footer .weather-*`; reusing those names here
   inherited nothing and stacked every row into a single column. */
.wx-measured {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0 10px;
}
.wx-stat {
    flex: 1 1 140px;
    background: #f8f8f8;
    border-radius: 6px;
    padding: 18px 12px;
    text-align: center;
}
.wx-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: #222;
}
.wx-stat-label {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #777;
}
.wx-note {
    font-size: 12px;
    color: #999;
    margin-bottom: 30px;
}

/* Seven cells across on desktop, wrapping to a readable size on a phone. */
.wx-days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 30px;
}
.wx-day {
    flex: 1 1 calc(100% / 7 - 8px);
    min-width: 90px;
    text-align: center;
    padding: 14px 6px;
    background: #f8f8f8;
    border-radius: 6px;
}
.wx-day-name {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #777;
}
.wx-day-temp {
    display: block;
    font-size: 17px;
    color: #222;
}
.wx-low {
    color: #999;
}
.wx-day-rain {
    display: block;
    font-size: 12px;
    color: #4a90d9;
    min-height: 16px;
}

/* 24 cells never fit a phone, so this strip scrolls sideways instead of
   wrapping into a wall. Same shape every weather app uses. */
.wx-hours {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 10px;
    margin: 20px 0 30px;
    -webkit-overflow-scrolling: touch;
}
.wx-hour {
    flex: 0 0 auto;
    width: 72px;
    text-align: center;
    padding: 12px 4px;
    background: #f8f8f8;
    border-radius: 6px;
}
.wx-hour-time {
    display: block;
    font-size: 13px;
    color: #777;
}
.wx-hour-temp {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #222;
}
.wx-hour-wind {
    display: block;
    font-size: 11px;
    color: #999;
}
.wx-icon {
    display: block;
    font-size: 26px;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .wx-day { flex: 1 1 calc(100% / 3 - 8px); }
    .wx-stat-value { font-size: 24px; }
}

/* The footer widget is now a link to the full page. */
footer .weather-widget-link,
footer .weather-widget-link:hover {
    display: block;
    text-decoration: none;
    color: inherit;
}
footer .weather-credit {
    font-size: 10px;
    opacity: .6;
}

/* Meteogram. The SVG is stretched with preserveAspectRatio="none" so it fills
   any column width at a fixed height - correct for the curve and the bars,
   ruinous for glyphs, which is why no text lives inside it. Every label is HTML
   positioned by percentage over the same box. */
.wx-chart {
    margin: 20px 0 30px;
    background: #fbfbfb;
    border-radius: 6px;
    padding: 8px 10px 0;
}
.wx-chart-plot { position: relative; }
.wx-chart svg { display: block; width: 100%; height: 240px; }
.wx-chart .wx-night { fill: #eef1f5; }
.wx-chart .wx-grid { stroke: #e3e3e3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.wx-chart .wx-tick { stroke: #ededed; stroke-width: 1; vector-effect: non-scaling-stroke; }
.wx-chart .wx-tick-day { stroke: #cfcfcf; }
.wx-chart .wx-area { fill: rgba(244, 162, 41, .16); stroke: none; }
.wx-chart .wx-line {
    fill: none; stroke: #f4a229; stroke-width: 2.5;
    stroke-linejoin: round; stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.wx-chart .wx-rain-bar { fill: #4a90d9; opacity: .75; }

/* Labels: real text, unstretched, selectable. */
.wx-y-label {
    position: absolute;
    left: 2px;
    transform: translateY(-50%);
    font-size: 12px;
    color: #8a8a8a;
    background: rgba(251, 251, 251, .82);
    padding: 0 3px;
    border-radius: 2px;
    pointer-events: none;
}
.wx-x-axis { position: relative; height: 46px; margin-top: 2px; }
.wx-x-label {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    font-size: 12px;
    color: #999;
    line-height: 1.35;
    white-space: nowrap;
}
.wx-x-label b { display: block; font-weight: 500; color: #777; }
.wx-x-label em { display: block; font-style: normal; font-weight: 700; color: #555; }
.wx-x-label i { display: block; font-style: normal; font-size: 11px; color: #4a90d9; }
/* The first and last labels would otherwise hang off the chart edges. */
.wx-x-label:first-child { transform: translateX(-20%); }
.wx-x-label:last-child { transform: translateX(-80%); }

@media (max-width: 767px) {
    .wx-chart svg { height: 190px; }
    .wx-x-label i { display: none; }
}

/* Seven-day outlook: a range bar per day, scaled across the whole week, so the
   shape of the week is legible before any number is read. */
.wx-week { margin: 20px 0 30px; }
.wx-week-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.wx-week-row:last-child { border-bottom: 0; }
.wx-week-day {
    flex: 0 0 46px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #777;
}
.wx-week-row .wx-icon { flex: 0 0 30px; font-size: 22px; line-height: 1; }
.wx-week-low, .wx-week-high { flex: 0 0 42px; text-align: right; font-size: 15px; }
.wx-week-low { color: #999; }
.wx-week-high { text-align: left; color: #222; font-weight: 600; }
.wx-week-track {
    flex: 1 1 auto;
    height: 7px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    display: block;
}
.wx-week-bar {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #7fb2e5, #f4a229);
}
.wx-week-rain {
    flex: 0 0 60px;
    text-align: right;
    font-size: 12px;
    color: #4a90d9;
}
@media (max-width: 767px) {
    .wx-chart svg { height: 200px; }
    .wx-week-rain { display: none; }
}

/* Shown only while serving snapshots through an upstream outage. */
.wx-stale {
    background: #fff6e6;
    border-left: 3px solid #f4a229;
    padding: 12px 16px;
    margin: 0 0 24px;
    font-size: 14px;
    color: #6b5424;
}

/* The written outlook. Larger than body copy because it is the first thing
   worth reading on the page, and the only part written rather than rendered. */
.wx-summary {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    margin: 0 0 30px;
}

/* Marine note. Matches the stay CTA rather than sitting in a blue box: on this
   site an orange left rule on a warm ground is what "read this" looks like, and
   a blue panel reads as chrome to be scrolled past. Someone about to take a boat
   out is exactly the reader who must not scroll past it. */
.wx-marine {
    display: block;
    /* No top margin: the .row above is the theme's .margin_60, already 60px of
       padding-bottom. Adding more left the box floating. */
    margin: 0 0 18px;
    padding: 20px 24px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #f7941e;
    border-radius: 10px;
    background: linear-gradient(180deg, #fffdf9 0%, #fff 100%);
    font-size: 15px;
    line-height: 1.6;
}
.wx-marine p { margin: 0; }
.wx-marine__kicker {
    margin: 0 0 4px !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #f7941e;
}
.wx-marine a { color: #c2660a; text-decoration: underline; text-underline-offset: 2px; }
.wx-marine a:hover { color: #a0540a; }

/* Marine conditions. Blue rail rather than the orange used by .wx-marine
   below it: that box is a caution about the limits of a land forecast, this
   one is the sea forecast itself, and they should not read as the same note. */
.wx-sea {
    margin: 0 0 26px;
    padding: 20px 24px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #4a90d9;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.wx-sea h2 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
}
.wx-sea p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.wx-sea p:last-child { margin-bottom: 0; }
.wx-sea__verdict { font-weight: 600; color: #2c3e50; }
.wx-sea__verdict--bad { color: #c0392b; }

/* An in-force warning is the one thing on this page someone might act on in
   the next hour, so it outranks everything around it visually. */
.wx-sea__alert {
    padding: 12px 14px;
    border-radius: 8px;
    background: #fdecea;
    border: 1px solid #f5c6c2;
    color: #922b21;
}
.wx-sea__alert b { display: block; font-size: 15px; }
.wx-sea__alert span { display: block; margin-top: 4px; font-size: 13px; opacity: .85; }

.wx-sea__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}
.wx-sea__facts li { display: flex; flex-direction: column; }
.wx-sea__facts span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a94a0;
}
.wx-sea__facts b { font-size: 17px; font-weight: 700; color: #2c3e50; }
.wx-sea__facts i { font-style: normal; font-size: 12px; color: #6b7885; }

.wx-sea__squall { font-size: 14px; color: #8a5a00; }
.wx-sea__ahead { font-size: 14px; color: #5a6672; }
.wx-sea__ahead b { color: #2c3e50; }
.wx-sea__src { font-size: 12px; color: #8a94a0; }
.wx-sea__src a { color: #4a90d9; }

@media (max-width: 575px) {
    .wx-sea { padding: 16px 18px; }
    .wx-sea__facts { gap: 10px 20px; }
}

/* Storm banner. Above everything, including the stale-data notice: a storm
   outranks a note about how old the temperature is. Raised only when DHMZ
   forecasts one, never from our own reading of the model. */
.wx-storm {
    display: block;
    margin: 0 0 22px;
    padding: 18px 22px;
    border: 1px solid #f0c9a0;
    border-left: 4px solid #e8730c;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff7ef 0%, #fff 100%);
}
.wx-storm p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: #6b4415; }
.wx-storm p:last-child { margin-bottom: 0; }
.wx-storm__kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #e8730c;
}
.wx-storm__more a { color: #e8730c; font-weight: 600; }

/* Promoted out of the marine block to the top of the page, so it needs to
   stand on its own rather than inside a card. */
aside.wx-sea__alert {
    display: block;
    margin: 0 0 22px;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid #f5c6c2;
    border-left: 4px solid #c0392b;
    background: #fdecea;
    color: #922b21;
    font-size: 15px;
    line-height: 1.6;
}
aside.wx-sea__alert b { display: block; font-size: 16px; margin-bottom: 2px; }
aside.wx-sea__alert span { display: block; margin-top: 6px; font-size: 13px; opacity: .85; }

/* Deep links land on the heading, not behind the sticky header above it. */
.article-body h2[id],
.article-body h3[id] { scroll-margin-top: 90px; }