/*
* Font Imports
*/
@font-face {
    font-family: 'Caladea';
    src: url('../fonts/Caladea-Regular.woff2') format('woff2'),
        url('../fonts/Caladea-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Caladea';
    src: url('../fonts/Caladea-Italic.woff2') format('woff2'),
        url('../fonts/Caladea-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
        url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2'),
        url('../fonts/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
        url('../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
        url('../fonts/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/*
* Theme Global Variables
*/
:root {
    --color-black:              #1C1C1C;
    --color-gray:               #F9F9F9;
    --color-light-gray:         #F5F5F5;
    --color-lightest-gray:      #F9F9F9;
    --color-accent:             #FC3A35;
    --color-accent-2:           #490707;
    --brand-gradient:              linear-gradient(270deg, var(--color-accent-2) 0%, var(--color-accent) 100%);
    --color-navy:                 #490707;

    --font-family-base:         'Caladea', serif;  
    --font-family-headings:     'Poppins', sans-serif;  

    --font-color-base:          var(--color-black);  
    --font-color-headings:      var(--color-black);
    --font-color-links:         var(--color-accent);
    
    --font-size-base:           1rem;   
    --font-size-h1:             2rem;
    --font-size-h2:             1.5rem;
    --font-size-h3:             1.25rem;
    --font-size-h4:             1rem;
    --font-size-h5:             1rem;
    --font-size-h6:             1rem;
    --font-size-sm:             0.875rem;

    --font-size-base-mobile:    1rem; 
    --font-size-h1-mobile:      2rem;
    --font-size-h2-mobile:      1.5rem;
    --font-size-h3-mobile:      1.25rem;
    --font-size-h4-mobile:      1rem;
    --font-size-h5-mobile:      1rem;
    --font-size-h6-mobile:      1rem;

    --line-height-base:         1.35;
    --line-height-headings:     1.08;

    --font-weight-base:         400;
    --font-weight-headings:     600;

    --container-width-xs:       100%;
    --container-width-sm:       100%;
    --container-width-md:       100%;
    --container-width-lg:       960px;
    --container-width-xl:       1200px;
    --container-width-xxl:      1200px;

    --column-gap-global:        2.5rem;
    --column-gap-global-sm:     1.875rem;
    --row-gap-global:           1.875rem;

    --spacing-sm:               2.5rem;
    --spacing-md:               2.5rem;
    --spacing-lg:               2.5rem; 

    --theme-header-height:      76px;
    --topic-center-height:      70px;
}

@media (min-width: 992px) {
    :root {
        --theme-header-height: 90px;
    }
}

/* Site Header */
.site-header {
    --header-bg-color: var(--brand-gradient);
    --submenu-bg-color: var(--color-navy);
    --submenu-links-color: #fff;
}

.mobile-menu {
    --mobile-menu-bg-color: var(--brand-gradient);
}

.site-header__nav .menu-item a:hover,
.site-header__nav .menu-item a:focus,
.site-header__search-toggle:hover,
.site-header__search-toggle:focus {
    background: linear-gradient(263.91deg, var(--color-accent-2) -116.23%, var(--color-accent) 95.18%);
}

.site-header__left .brand:focus {
    outline: 2px solid var(--menu-links-border);
    outline-offset: 0.35rem;
    border-radius: 2px;
}

/* SVG header logo: nudge up ~15% to match the previous PNG's visual size
   (the full-lockup SVG has built-in padding). Scoped to .brand-logo-svg so
   reverting to the PNG keeps its original size. */
.site-header__left .brand img.brand-logo-svg {
    height: 50px;
}

@media (min-width: 1200px) {
    .site-header__left .brand img.brand-logo-svg {
        height: 64px;
    }
}

.mobile-menu .mobile-menu__header img.brand-logo-svg {
    height: 39px;
}

/* Topic Center */
.topic-center-bar {
    --section-bg-color: var(--color-navy);
    --button-text-color: var(--color-navy);
}

.topic-center-bar__toggle {
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* Sidebar */
.widget--advisory-board__listing-item > a {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
}

.widget--advisory-board__listing-item + .widget--advisory-board__listing-item {
    margin-top: 0.75rem;
}

.widget--advisory-board__listing-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

.widget--advisory-board__listing-item h4 {
    font-size: 0.875rem;
    margin: 0 0 2px;
}

.widget--advisory-board__listing-item > a:hover h4 {
    color: var(--font-color-links);
    text-decoration: underline;
}

.widget--advisory-board__listing-item p {
    font-size: 0.75rem;
}

.widget--advisory-board__more {
    display: block;
    width: auto;
    font-family: var(--font-family-headings);
    text-align: center;
    font-weight: var(--font-weight-headings);
    margin: 0.75rem auto 0;
    font-size: 0.875rem;
    letter-spacing: 0;
}

.widget--advisory-board__more:hover {
    color: var(--font-color-links);
    text-decoration: underline;
}

/* Team archives and single */
.team-listing {
    --columns: 1;

    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--column-gap-global);
    margin-top: 2.5rem;
}

@media (min-width: 600px) {
    .team-listing {
        --columns: 2;
    }   
}

@media (min-width: 992px) {
    .team-listing {
        --columns: 4;
    }   
}

.team-entry__thumbnail {
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--color-gray);
    overflow: hidden;
    margin-bottom: 1rem;
}

.team-entry__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .75s;
}

.team-entry__thumbnail img:hover {
    transform: scale(1.02);
}

.team-entry__title {
    margin: 1rem 0 0.25rem;
}

.team-entry .team-entry__title > a {
    color: inherit;
}

.team-entry .team-entry__title > a:hover {
    color: var(--font-color-links);
}

.team-entry-single__header img {
    border-radius: 10px;
    aspect-ratio: 1;
    max-width: 400px;
    object-fit: cover;
}

@media (max-width: 480px) {
    .team-entry-single__header img {
        width: 100%;
    }   
}

.team-entry-single__title {
    margin: 1.25rem 0 0.25rem;
}

.team-entry-single__content {
    margin-top: 1.25rem;
}

.team-entry-single .team-entry-single__content .team-entry-single__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.75rem;
}

.team-entry-single__socials li {
    margin: 0;
}

.team-entry-single__socials li a {
    --bg-color: #000;

    display: inline-grid;
    place-items: center;
    height: 32px;
    width: 32px;
    background-color: var(--bg-color);
    color: #fff;
    border-radius: 50%;
    padding: 7px;
}

.team-entry-single__socials li a:hover,
.team-entry-single__socials li a:focus {
    color: #fff;
    transform: scale(1.1);
}

/* Media Partners */
.partner-listing {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4rem 2rem;
    margin-top: 2.5rem;
}

.partner-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .partner-entry {
        grid-template-columns: 200px minmax(0, 1fr);
    }
}

@media (min-width: 768px) {
    .partner-entry__thumbnail img {
        width: 100%;
    }
}

/* Photo Contest grid and single */
.photo-grid {
    --columns: 1;

    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--column-gap-global);
    margin-top: 2.5rem;
}

@media (min-width: 600px) {
    .photo-grid {
        --columns: 2;
    }
}

@media (min-width: 992px) {
    .photo-grid {
        --columns: 3;
    }
}

.photo-entry__thumbnail {
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--color-gray);
    overflow: hidden;
    margin-bottom: 1rem;
}

.photo-entry__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .75s;
}

.photo-entry__thumbnail img:hover {
    transform: scale(1.02);
}

.photo-entry__title {
    margin: 1rem 0 0.25rem;
}

.photo-entry .photo-entry__title > a {
    color: inherit;
}

.photo-entry .photo-entry__title > a:hover {
    color: var(--font-color-links);
}

.photo-entry__submitted-by {
    margin: 0;
    font-style: italic;
    color: #666;
}

/* Photo Contest single entry */
.photo-entry-single__header img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}

.photo-entry-single__title {
    margin-bottom: 0.25rem;
}

.photo-entry-single__submitted-by {
    margin-bottom: 1.5rem;
    font-style: italic;
    color: #666;
}

/* ==========================================================================
   Category / Topic Center — featured section tweaks (added 2026-06-22)
   Pairs with the child override of page-template-parts/category/featured.php.
   1. Lead (left) card: longer excerpt + size the card to its content so it no
      longer stretches to match the right column (which left a gray void).
   2. Side (right) cards: text-only with a light card background (matches the
      mockup), no thumbnail, full title, plus a short excerpt snippet.

   NOTE: every side-card selector is prefixed with `.category-featured` (an
   extra class) on purpose. The parent's theme-blog.css loads AFTER this file
   and resets `.side-by-side { background: none }` at equal specificity, so we
   need the extra class to win the cascade. Don't remove the prefix.

   Scoped to the .category-featured section so nothing else on the site is
   affected. To roll back: delete this block AND the child featured.php override.
   ========================================================================== */

@media (min-width: 768px) {
    /* 1a. Right column: size each row to its own content (parent uses
       1fr 1fr 1fr, which forces all three to the height of the TALLEST card
       and leaves a gap under the shorter ones). `auto` makes each side card
       hug its text. */
    .category-featured .category-featured__grid {
        grid-template-rows: auto auto auto;
    }

    /* 1b. Lead card spans all three rows (grid-row: 1 / -1) and stretches, so
       its height equals the three side cards combined. */
    .category-featured .category-featured__grid .blog-entry:first-child {
        align-self: stretch;
    }

    /* 1c. Let the lead image grow to absorb the extra height so the card fills
       to the bottom instead of leaving a gray void under the text. The img is
       already object-fit: cover, so it crops cleanly as it grows. */
    .category-featured .category-featured__grid .blog-entry:first-child .blog-entry__thumbnail {
        flex: 1 1 auto;
        aspect-ratio: auto;
        min-height: 220px;
    }

    /* Allow the longer lead excerpt to show in full */
    .category-featured .category-featured__grid .blog-entry:first-child .blog-entry__excerpt {
        --lines-count: 14;
    }
}

/* 2. Side cards — light card background like the mockup */
.category-featured .category-featured__grid .blog-entry.side-by-side {
    background-color: var(--color-lightest-gray);
    border-radius: 9px;
    padding: 0.875rem 1rem;
}

/* Content already padded by the card; remove the part's own padding */
.category-featured .category-featured__grid .blog-entry.side-by-side .blog-entry__content {
    padding: 0;
}

/* Text-only: hide the thumbnail */
.category-featured .category-featured__grid .blog-entry.side-by-side .blog-entry__thumbnail {
    display: none;
}

/* Show the full title (was clamped to 3 lines to fit beside the image) */
.category-featured .category-featured__grid .blog-entry.side-by-side .blog-entry__title {
    line-clamp: unset;
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

/* Short excerpt snippet under the title */
.category-featured .category-featured__grid .blog-entry.side-by-side .blog-entry__excerpt {
    --lines-count: 2;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

/* Thumbnail gone — collapse the 2-column "half" layout to a single column */
@media (min-width: 768px) {
    .category-featured .category-featured__grid .blog-entry.side-by-side.half {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Homepage newsletter CTA band (stylized subscribe section)
   Rendered by opt360_newsletter_cta() in inc/newsletter-child.php; shares the
   subscribe endpoint + JS with the footer form.
   ========================================================================== */
.opt-nl-cta {
    position: relative;
    overflow: hidden;
    margin: 2.5rem 0 3rem;
    padding: clamp(1.75rem, 4vw, 3.25rem);
    border-radius: 16px;
    background: linear-gradient(120deg, var(--color-navy, #490707) 0%, var(--color-accent, #FC3A35) 100%);
    color: #fff;
}

/* Soft accent glow in the corner for depth. */
.opt-nl-cta::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(252, 58, 53, 0.45) 0%, rgba(252, 58, 53, 0) 70%);
    pointer-events: none;
}

.opt-nl-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
}

.opt-nl-cta__text {
    flex: 1 1 320px;
}

.opt-nl-cta__title {
    margin: 0 0 0.5rem;
    color: #fff;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
}

.opt-nl-cta__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.5;
}

.opt-nl-cta__form {
    flex: 1 1 340px;
    max-width: 480px;
    margin: 0;
}

.opt-nl-cta__fields {
    display: flex;
    gap: 0.5rem;
    padding: 6px;
    background: #fff;
    border-radius: 10px;
}

.opt-nl-cta__fields input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.5rem 0.85rem;
    font-size: 1rem;
    color: var(--color-navy, #490707);
}

.opt-nl-cta__fields input[type="email"]:focus {
    outline: none;
}

.opt-nl-cta__btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.opt-nl-cta__response {
    margin-top: 0.85rem;
    min-height: 1.2em;
    color: #fff;
    font-weight: 600;
}

@media (max-width: 600px) {
    .opt-nl-cta__fields {
        flex-wrap: wrap;
    }

    .opt-nl-cta__btn {
        width: 100%;
    }
}
/* Riddle quiz embed — remove default iframe border (migrated from custom-css-js "m2CSS", 2026-07-08). */
.riddle-frame {
	border: none !important;
}