/* Minimal Sunfish Foundation theme for vanilla-cookieconsent v3.1.0. */
#cc-main {
    --cc-font-family: "Noto Serif", Georgia, serif;
    --cc-bg: #ffffff;
    --cc-primary-color: #294f56;
    --cc-secondary-color: #4a5153;
    --cc-btn-primary-bg: #C96732;
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-border-color: #C96732;
    --cc-btn-primary-hover-bg: #AC582B;
    --cc-btn-primary-hover-color: #ffffff;
    --cc-btn-primary-hover-border-color: #AC582B;
    --cc-btn-secondary-bg: #294f56;
    --cc-btn-secondary-color: #ffffff;
    --cc-btn-secondary-border-color: #294f56;
    --cc-btn-secondary-hover-bg: #338792;
    --cc-btn-secondary-hover-color: #ffffff;
    --cc-btn-secondary-hover-border-color: #338792;
    --cc-cookie-category-block-bg: #f7f1e8;
    --cc-cookie-category-block-border: rgba(41, 79, 86, 0.14);
    --cc-cookie-category-block-hover-bg: #efe8dc;
    --cc-cookie-category-block-hover-border: rgba(41, 79, 86, 0.25);
    --cc-cookie-category-expanded-block-bg: #f7f1e8;
    --cc-cookie-category-expanded-block-hover-bg: #efe8dc;
    --cc-toggle-readonly-bg: #8ea0a0;
    --cc-overlay-bg: rgba(20, 38, 41, 0.72);
    --cc-footer-bg: #f7f1e8;
    --cc-footer-color: #4a5153;
    --cc-footer-border-color: rgba(41, 79, 86, 0.14);
    --cc-modal-border-radius: 18px;
    /* The library uses this for the expandable category blocks and their
       description wrappers as well as for buttons, and those wrappers clip
       their own overflow. At a pill radius they ate their own text, so it
       stays modest here and the pill is set on the buttons themselves. */
    --cc-btn-border-radius: 12px;
    --cc-modal-width: 720px;
    --cc-modal-margin: 18px;
}

/* A card that floats near the foot of the window rather than a band across
   it: held to a reading width, centred, on white, and lifted off the page by
   its own shadow. Its buttons are deliberately their own thing: outlined,
   with the accept sitting solid. */
#cc-main .cm {
    width: min(760px, 100%);
    max-width: none;
    margin: 0 auto;
    padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
    border: 1px solid rgba(41, 79, 86, 0.14);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(13, 32, 36, 0.18);
}

#cc-main .cm--bottom {
    bottom: clamp(18px, 3vw, 34px);
    left: 0;
    right: 0;
}

/* The card no longer carries the page gutter itself, so the wrapper keeps it
   off the window edge on a narrow screen. */
#cc-main .cm-wrapper { padding-inline: clamp(16px, 4vw, 28px); }

#cc-main .cm__title,
#cc-main .cm__desc {
    color: var(--color-ink, #1C2021);
}

/* The secondary choices are outlined, the accept is solid: the same pairing
   the site uses everywhere else, in the site's own colours. */
#cc-main .cm__btn {
    min-width: 132px;
    padding: 0.55em 1.2em;
    border: 1px solid rgba(41, 79, 86, 0.34);
    background: #ffffff;
    color: var(--color-teal, #294f56);
}

#cc-main .cm__btn:hover {
    border-color: var(--color-teal, #294f56);
    background: #ffffff;
    color: var(--color-teal, #294f56);
}

#cc-main .cm__btn[data-role="all"] {
    border-color: var(--color-charcoal, #1C2021);
    background: var(--color-charcoal, #1C2021);
    color: #ffffff;
}

#cc-main .cm__btn[data-role="all"]:hover {
    border-color: var(--color-charcoal-hover, #343B3C);
    background: var(--color-charcoal-hover, #343B3C);
    color: #ffffff;
}

#cc-main .sff-cookie-close::before,
#cc-main .sff-cookie-close::after { background: var(--color-ink, #1C2021); }

#cc-main .cm__title,
#cc-main .pm__title {
    font-family: "Noto Serif", Georgia, serif;
    font-weight: 700;
    color: #294f56;
}

/* both sit on white now */
#cc-main .cm__title { color: var(--color-charcoal, #1C2021); }

#cc-main .cm__title { padding-right: 44px; }

/* The library gives these an inline padding of its own, which pushed the
   notice's text about 21px inside the band's own gutter and out of line with
   the site's content. The band already carries the site gutter, so the text
   starts flush with it. */
#cc-main .cm__title,
#cc-main .cm__desc {
    padding-left: 0;
}

#cc-main .cm__desc,
#cc-main .pm__section-desc {
    font-size: 16px;
    line-height: 1.6;
}

/* Centred in the column, then carried down. Geometric centre reads high
   here because the description's last line sits lower than the buttons do,
   so the block is weighted toward the bottom of the card to match it. */
#cc-main .cm__btn,
#cc-main .pm__btn,
#cc-main .pm__close-btn {
    /* the same radius the site's own buttons carry */
    border-radius: 12px;
}

/* One row of three. The library's cloud layout stacks them two over one and
   rules them off from the copy with a border; both go. */
#cc-main .cm--cloud .cm__btns,
#cc-main .cm__btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    max-width: none;
    border-left: 0;
}

#cc-main .cm__btn-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* The library stacks the groups, so it puts a top margin on the second one.
   Laid out as a row that margin drops Customize below its neighbours. */
#cc-main .cm__btn + .cm__btn,
#cc-main .cm__btn-group + .cm__btn-group {
    margin: 0;
}

/* Matches the .btn rule in styles.css, so the banner's buttons read as the
   same control as every other button on the site. */
#cc-main .cm__btn,
#cc-main .pm__btn {
    min-height: 44px;
    border-radius: 12px;
    /* the site's utility control: 16px semibold, no tracking */
    font-family: "Noto Sans", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
}

#cc-main .pm {
    border-radius: 18px;
    box-shadow: 0 22px 65px rgba(19, 42, 46, 0.24);
}

/* The closing contact note is plain supporting copy, not another setting. */
#cc-main .pm__body .pm__section:last-child {
    margin-inline: 0;
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#cc-main .section__toggle:checked ~ .toggle__icon { background: #C96732; }

#cc-main a {
    color: #C96732;
    font-weight: 600;
    text-underline-offset: 3px;
}

#cc-main .sff-cookie-close {
    position: absolute;
    z-index: 5;
    top: 14px;
    right: 16px;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

#cc-main .sff-cookie-close::before,
#cc-main .sff-cookie-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: #294f56;
}

#cc-main .sff-cookie-close::before { transform: translate(-50%, -50%) rotate(45deg); }
#cc-main .sff-cookie-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* The band is light now, so the mark stays dark: white was invisible on it. */
#cc-main .cm .sff-cookie-close::before,
#cc-main .cm .sff-cookie-close::after {
    background: var(--color-charcoal, #1C2021);
}

.cookie-settings {
    appearance: none;
    margin-left: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.9;
}

.cookie-settings::before {
    content: "\2022";
    display: inline-block;
    margin-right: 10px;
    text-decoration: none;
}

.cookie-settings:hover,
.cookie-settings:focus-visible { opacity: 1; }

@media (max-width: 520px) {
    #cc-main .cm {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        border-radius: 16px;
    }

    #cc-main .cm--bottom { bottom: 12px; }

    #cc-main .pm {
        width: calc(100vw - (var(--cc-modal-margin) * 2));
        max-width: calc(100vw - (var(--cc-modal-margin) * 2));
        margin-inline: auto;
        border-radius: 16px;
    }
}


#cc-main .pm__btn[data-role="all"],
#cc-main .pm__btn[data-role="save"] {
    border-color: var(--color-charcoal, #1C2021);
    background: var(--color-charcoal, #1C2021);
    color: #ffffff;
}

#cc-main .pm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="save"]:hover {
    border-color: var(--color-charcoal-hover, #343B3C);
    background: var(--color-charcoal-hover, #343B3C);
}


/* 1. The preferences panel is headed by the mark rather than the words. The
   text stays in the DOM as the dialog's accessible name. */
#cc-main .pm__title {
    display: block;
    font-size: 0;
    line-height: 0;
    color: transparent;
}

#cc-main .pm__title::before {
    content: "";
    display: block;
    width: 172px;
    height: 40px;
    background: url("sffofficialonwhite.png") left center / contain no-repeat;
}

/* 5. The panel's close is the notice's mark exactly: same box, same arms,
   drawn here rather than left to the library's icon so the two cannot drift
   apart in size or colour, and so the hover cannot repaint it white. */
#cc-main .pm__close-btn,
#cc-main .pm__close-btn:hover,
#cc-main .pm__close-btn:focus,
#cc-main .pm__close-btn:focus-visible,
#cc-main .pm__close-btn:active {
    position: relative;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-charcoal, #1C2021);
}

#cc-main .pm__close-btn svg {
    display: none;
}

#cc-main .pm__close-btn::before,
#cc-main .pm__close-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-charcoal, #1C2021);
}

#cc-main .pm__close-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
#cc-main .pm__close-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }


/* ---------- The notice stacks ----------
   The cloud layout sets the copy in a column beside the actions and caps its
   height, which is fine across a full window and wrong in a 760px card: the
   three actions took the width, the sentence was squeezed into a narrow
   column, and the cap gave it a scrollbar of its own. The card stacks
   instead -- the copy across the full width, the actions under it -- and
   nothing is capped, so there is nothing to scroll. */
#cc-main .cm__body,
#cc-main .cm--cloud .cm__body {
    display: block;
}

#cc-main .cm__texts,
#cc-main .cm--cloud .cm__texts {
    flex: none;
    max-height: none;
    overflow: visible;
    padding: 0;
}

#cc-main .cm--cloud .cm__btns,
#cc-main .cm__btns {
    justify-content: flex-start;
    margin-top: clamp(16px, 2vw, 22px);
    padding: 0;
}


/* ---------- The notice's actions, in the hero's voice ----------
   The site's controls are set in the condensed cut of Noto Sans, in caps at
   the display weight, and the primary action carries the lagoon gradient the
   hero's own button carries. The notice follows: the accept takes that face,
   the two choices beside it are outlined in the same blue, and all three are
   set in the same letters as every other control on the site. */
#cc-main .cm__btn,
#cc-main .pm__btn {
    font-family: "Noto Sans", sans-serif;
    font-stretch: 75%;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* The two choices: the blue outlined, nothing filled. */
#cc-main .cm__btn {
    min-width: 0;
    padding: 0.72em 1.5em;
    border: 2px solid rgba(28, 32, 33, 0.28);
    background: transparent;
    color: #1C2021;
}

#cc-main .cm__btn:hover,
#cc-main .cm__btn:focus-visible {
    border-color: #1C2021;
    background: transparent;
    color: #1C2021;
}

/* The accept, on the hero's own face. */
#cc-main .cm__btn[data-role="all"],
#cc-main .pm__btn[data-role="all"],
#cc-main .pm__btn[data-role="save"] {
    border-color: transparent;
    background: #0D3238;
    color: #ffffff;
}

#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="save"]:hover {
    border-color: transparent;
    background: #294F56;
    color: #ffffff;
}