/*
  IC EPAC Foundation brand lockup.
  Loaded after style.css so it sits alongside the vendor theme without editing
  vendor CSS. The wordmark is real text (not baked into an image), so it stays sharp
  at any size and is readable to screen readers.

  Lockup is the seal + "EPAC" over a small "Foundation". The full legal name is not
  rendered inline: at nav width it wrapped and collided with the menu. It appears on
  hover/focus as a tooltip, and is on the link's aria-label for screen readers.

  Two contexts, matching the template:
    .epac_brand              light background  -> dark text  (side/offcanvas header)
    .epac_brand.epac_on_dark dark background   -> white text (main header, footer)

  The main header is transparent over a dark hero and turns near-black
  (--heading-color: #191919) once sticky, so it always needs the on-dark variant.
*/

.epac_brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    line-height: 1.1;
    /* Anchors the hover tooltip. */
    position: relative;
}

.epac_brand:hover {
    text-decoration: none;
}

/* The seal's ring text is illegible below ~56px, so the wordmark beside it
   carries the name. object-fit keeps a non-square source from stretching. */
.epac_brand_mark {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
}

/* The seal is dark navy on transparent and disappears against the dark header
   and footer. A white disc restores the contrast it was drawn for. */
.epac_brand.epac_on_dark .epac_brand_mark {
    background: #fff;
    border-radius: 50%;
    padding: 2px;
}

.epac_brand_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.epac_brand_name {
    font-family: var(--heading-font, "Encode Sans Condensed", serif);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-color, #4baf47);
    white-space: nowrap;
}

/*
  On dark the wordmark must be white, not accent green: several heroes use
  .cs_accent_bg, which is the very same #4baf47 the wordmark was painted in, so
  accent-on-accent rendered the logo invisible (Wildlife/Animal page especially).
  White reads on every hero we ship, dark or accent.
*/
.epac_brand.epac_on_dark .epac_brand_name {
    color: #fff;
}

.epac_brand_sub {
    font-family: var(--heading-font, "Encode Sans Condensed", serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--heading-color, #191919);
    white-space: nowrap;
}

.epac_brand.epac_on_dark .epac_brand_sub {
    color: #fff;
}

/*
  Hover/focus tooltip carrying the full legal name. Pointer-events off so it can
  never swallow a click meant for the nav beneath it, and it is taken out of flow
  entirely so it cannot push the header layout around.
*/
.epac_brand_tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    max-width: 280px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #191919;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.epac_brand:hover .epac_brand_tip,
.epac_brand:focus-visible .epac_brand_tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* On the footer the brand sits low on the page; flip the tooltip above it. */
.cs_footer .epac_brand_tip {
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateY(4px);
}

.cs_footer .epac_brand:hover .epac_brand_tip {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .epac_brand_tip {
        transition: none;
    }
}

/*
  Home mega menu.

  The template's .cs_with_thumb grid is repeat(4, 1fr), so seven entries wrap onto
  a second row. The wrapper is position:fixed at top:100px and never scrolls, so on
  a laptop-height viewport that second row (Ocean Life, Charity, Climate Change)
  falls below the fold and cannot be reached -- the panel closes as soon as the
  pointer leaves it. Laying all seven in a single row keeps every entry on screen.
*/
@media (min-width: 1200px) {
    .cs_nav .cs_nav_list .cs_mega_wrapper.cs_with_thumb.epac_mega_7 {
        grid-template-columns: repeat(7, 1fr);
        grid-gap: 0 16px;
    }
}

/* Below the 1296px panel width the seven columns would be too narrow to read;
   fall back to two rows, and allow scrolling so nothing is unreachable. */
@media (min-width: 1200px) and (max-width: 1399px) {
    .cs_nav .cs_nav_list .cs_mega_wrapper.cs_with_thumb.epac_mega_7 {
        grid-template-columns: repeat(4, 1fr);
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}

/* Keep the thumbnails a consistent shape: the sources are a mix of 4:3 photos
   and wide banners, which otherwise made the row ragged. */
.cs_nav .cs_nav_list .cs_mega_wrapper.cs_with_thumb.epac_mega_7 img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/*
  Scan-to-pay block on the Donate page. The QR sits on a forced white card with
  a quiet zone around it: QR scanners need light-on-dark contrast and a margin,
  and the surrounding section is tinted.
*/
.epac_qr_frame {
    width: 232px;
    max-width: 100%;
    margin: 0 auto 18px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border-color, #e4e4e4);
    border-radius: 10px;
}

.epac_qr_frame img {
    display: block;
    width: 100%;
    height: auto;
    /* QR codes are hard-edged; never let the browser smooth them. */
    image-rendering: pixelated;
}

.epac_qr_note {
    max-width: 420px;
    margin-inline: auto;
    font-size: 14px;
    line-height: 1.6;
}

/*
  Post listings. The recovered photographs have mixed aspect ratios (1210x595
  banners next to 1600x1068 photos), which left the cards ragged. Crop the
  thumbnails to a constant height so the grid lines up.
*/
.epac_post_grid .cs_post_thumb img {
    height: 230px;
    object-fit: cover;
}

/*
  ---------------------------------------------------------------------------
  Header fit across resolutions.

  The template shows the desktop nav from 1200px up and switches to the
  hamburger below that. Its .cs_nav_list is flex-wrap: wrap with a 26px gutter,
  so once the branding plus the links exceed the row the last items wrap onto a
  second line -- which lands on top of the logo. At 1366x768 (a very common
  laptop) that is exactly what happened.

  Two-part fix: never let the nav row wrap, and tighten the branding + gutters
  as the viewport narrows so the row genuinely fits instead of colliding.
  ---------------------------------------------------------------------------
*/
@media (min-width: 1200px) {
    .cs_nav .cs_nav_list {
        flex-wrap: nowrap !important;
    }

    /* Long labels ("News & Blog") must not break mid-row. */
    .cs_nav .cs_nav_list > li > a {
        white-space: nowrap;
    }

    /* Give the centred menu breathing room so it is not flush against the
       logo on the left or the hamburger on the right. */
    .cs_main_header_center {
        margin-left: 40px;
        margin-right: 40px;
    }
}

/* 1400-1600: first squeeze -- gutters only, branding untouched. */
@media (min-width: 1200px) and (max-width: 1599px) {
    .cs_nav .cs_nav_list > li {
        margin-right: 20px;
    }
}

/* 1200-1399: covers 1366x768. Tighten gutters and scale the branding down so
   the row fits without the nav riding up onto the logo. */
@media (min-width: 1200px) and (max-width: 1399px) {
    .cs_nav .cs_nav_list > li {
        margin-right: 14px;
    }

    .cs_site_branding + .cs_nav {
        margin-left: 20px;
    }

    .epac_brand {
        gap: 9px;
    }

    .epac_brand_mark {
        width: 44px;
        height: 44px;
    }

    .epac_brand_name {
        font-size: 21px;
        letter-spacing: 0.04em;
    }

    .epac_brand_sub {
        font-size: 9.5px;
        letter-spacing: 0.16em;
    }

    .cs_main_header .container-fluid {
        padding-right: 40px;
        padding-left: 40px;
    }
}

/* Below 1200 the hamburger takes over, so the branding is the only thing in the
   bar and can breathe again. */
@media (max-width: 1199px) {
    .epac_brand_mark {
        width: 46px;
        height: 46px;
    }

    .epac_brand_name {
        font-size: 22px;
    }

    .epac_brand_sub {
        font-size: 10px;
        letter-spacing: 0.2em;
    }
}

@media (max-width: 575px) {
    .epac_brand {
        gap: 8px;
    }

    .epac_brand_mark {
        width: 38px;
        height: 38px;
    }

    .epac_brand_name {
        font-size: 19px;
    }

    .epac_brand_sub {
        font-size: 8.5px;
        letter-spacing: 0.14em;
    }

    /* A hover tooltip is meaningless on touch and would sit under the thumb. */
    .epac_brand_tip {
        display: none;
    }
}