/*
Theme Name: KET 2026
Theme URI: 
Author: Knysna Education Trust
Author URI: 
Description: A modern classic theme for the Knysna Education Trust website, featuring Bootstrap 5 and Poppins font.
Requires at least: 6.2
Tested up to: 6.4
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ket2026
Tags: custom-colors, custom-menu, education
*/

:root {
    --ket-red: #E42320;
    --ket-red-dark: #AD1F24;
    --ket-blue: #1259A5;
    --ket-yellow: #F3E31B;
    --ket-black: #000000;
    --ket-pink: #EE9AC2;
    --ket-teal: #0C8F88;
    --ket-white: #FFFFFF;
    --ket-orange: #F96221;
    --ket-beige: #FAF5E8;
    --ket-beige-dark: #C9C2B3;
    --ket-grey: #777777;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/poppins-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/poppins-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/poppins-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins/poppins-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--ket-black);
    background-color: #444444;
    overflow-x: hidden;
}

/* Ensure images are responsive and broken image alt text doesn't overflow */
img {
    max-width: 100%;
    height: auto;
    overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 700;
    margin-bottom: 1.5rem;
}

a {
    color: var(--ket-black);
    transition: color 0.2s ease-in-out;
}

a:hover,
a:focus {
    color: var(--ket-blue);
}

.nav-links a {
    text-decoration: none;
    font-weight: 600;
}

.site-main {
    background-color: var(--ket-beige);
}

.site-header {
    position: relative;
    z-index: 10;
}

/* Editor Color Palette Classes */
.has-ket-red-color {
    color: var(--ket-red) !important;
}

.has-ket-red-dark-color {
    color: var(--ket-red-dark) !important;
}

.has-ket-blue-color {
    color: var(--ket-blue) !important;
}

.has-ket-yellow-color {
    color: var(--ket-yellow) !important;
}

.has-ket-black-color {
    color: var(--ket-black) !important;
}

.has-ket-pink-color {
    color: var(--ket-pink) !important;
}

.has-ket-teal-color {
    color: var(--ket-teal) !important;
}

.has-ket-white-color {
    color: var(--ket-white) !important;
}

.has-ket-orange-color {
    color: var(--ket-orange) !important;
}

.has-ket-beige-color {
    color: var(--ket-beige) !important;
}

.has-ket-beige-dark-color {
    color: var(--ket-beige-dark) !important;
}

.has-ket-grey-color {
    color: var(--ket-grey) !important;
}

.has-ket-red-background-color {
    background-color: var(--ket-red) !important;
}

.has-ket-red-dark-background-color {
    background-color: var(--ket-red-dark) !important;
}

.has-ket-blue-background-color {
    background-color: var(--ket-blue) !important;
}

.has-ket-yellow-background-color {
    background-color: var(--ket-yellow) !important;
}

.has-ket-black-background-color {
    background-color: var(--ket-black) !important;
}

.has-ket-pink-background-color {
    background-color: var(--ket-pink) !important;
}

.has-ket-teal-background-color {
    background-color: var(--ket-teal) !important;
}

.has-ket-white-background-color {
    background-color: var(--ket-white) !important;
}

.has-ket-orange-background-color {
    background-color: var(--ket-orange) !important;
}

.has-ket-beige-background-color {
    background-color: var(--ket-beige) !important;
}

.has-ket-beige-dark-background-color {
    background-color: var(--ket-beige-dark) !important;
}

.has-ket-grey-background-color {
    background-color: var(--ket-grey) !important;
}

/* Legacy utility classes */
.bg-ket-blue {
    background-color: var(--ket-blue);
}

.bg-ket-yellow {
    background-color: var(--ket-yellow);
}

.bg-ket-red {
    background-color: var(--ket-red);
}

.bg-ket-red-dark {
    background-color: var(--ket-red-dark);
}

.bg-ket-orange {
    background-color: var(--ket-orange);
}

.bg-beige {
    background-color: var(--ket-beige);
}

.bg-pink {
    background-color: var(--ket-pink);
}

.bg-ket-beige-dark {
    background-color: var(--ket-beige-dark);
}

.bg-ket-grey {
    background-color: var(--ket-grey);
}

.text-ket-blue {
    color: var(--ket-blue);
}

.text-ket-yellow {
    color: var(--ket-yellow);
}

.text-ket-red {
    color: var(--ket-red);
}

.text-ket-red-dark {
    color: var(--ket-red-dark);
}

.text-ket-beige-dark {
    color: var(--ket-beige-dark);
}

.text-ket-grey {
    color: var(--ket-grey);
}

.text-ket-orange {
    color: var(--ket-orange);
}

/* Custom Button Base & Utilities matching design */
.btn-ket {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 50px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.btn-ket:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-ket:focus,
.btn-ket:focus-visible {
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}

.btn-ket:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Multiline Button Variant */
.btn-ket-multiline {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 2.5rem;
    line-height: 1.3;
    text-transform: none;
    /* Better readability for long text */
    min-height: 100px;
    width: 100%;
    max-width: 478px;
}

.btn-ket-multiline .btn-title {
    font-size: 1.15rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.2rem;
}

.btn-ket-multiline .btn-subtitle {
    font-size: 0.85rem;
    font-weight: 400;
    display: block;
    opacity: 0.9;
}

/* Square Fluid Buttons */
.btn-ket-square {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    text-align: center;
    text-decoration: none;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.btn-ket-square .btn-icon {
    width: 120px;
    height: 120px;
    margin-bottom: 1.5rem;
    object-fit: contain;
}

.btn-ket-square .btn-text {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.25;
}

@media (min-width: 992px) {
    .btn-ket-square .btn-text {
        font-size: 1.7rem;
    }
}

/* Color Variants */
.btn-ket-blue {
    background-color: var(--ket-blue);
    color: var(--ket-white);
}

.btn-ket-blue:hover,
.btn-ket-blue:focus {
    background-color: #0d4682;
    color: var(--ket-white);
}

.btn-ket-yellow {
    background-color: var(--ket-yellow);
    color: var(--ket-black);
}

.btn-ket-yellow:hover,
.btn-ket-yellow:focus {
    background-color: #d1c318;
    color: var(--ket-black);
}

.btn-ket-orange {
    background-color: var(--ket-orange);
    color: var(--ket-white);
}

.btn-ket-orange:hover,
.btn-ket-orange:focus {
    background-color: #d84b10;
    color: var(--ket-white);
}

.btn-ket-teal {
    background-color: var(--ket-teal);
    color: var(--ket-white);
}

.btn-ket-teal:hover,
.btn-ket-teal:focus {
    background-color: #0a736d;
    color: var(--ket-white);
}

.btn-ket-red {
    background-color: var(--ket-red);
    color: var(--ket-white);
}

.btn-ket-red:hover,
.btn-ket-red:focus {
    background-color: #c21a18;
    color: var(--ket-white);
}

.btn-ket-red-dark {
    background-color: var(--ket-red-dark);
    color: var(--ket-white);
}

.btn-ket-red-dark:hover,
.btn-ket-red-dark:focus {
    background-color: #8f191e;
    color: var(--ket-white);
}

.btn-ket-beige {
    background-color: var(--ket-beige);
    color: var(--ket-black);
}

.btn-ket-beige:hover,
.btn-ket-beige:focus {
    background-color: #e6dfcd;
    color: var(--ket-black);
}

.btn-ket-pink {
    background-color: var(--ket-pink);
    color: var(--ket-white);
}

.btn-ket-pink:hover,
.btn-ket-pink:focus {
    background-color: #d985ae;
    color: var(--ket-white);
}

/* Site Logo Sizing */
.custom-logo {
    width: 150px;
    height: auto;
}

.site-footer .custom-logo {
    width: 180px;
}

/* Footer Links */
.site-footer a {
    color: var(--ket-white);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--ket-yellow) !important;
}

/* Search Modal Styles */
.search-modal .form-control::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.search-modal .form-control:focus {
    box-shadow: none;
    border-color: var(--ket-red) !important;
}

/* Custom Navbar Toggler */
.custom-toggler {
    width: 30px;
    height: 20px;
    position: relative;
    padding: 0;
    background: transparent;
}

.custom-toggler span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--ket-black);
    border-radius: 2px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.custom-toggler span:nth-child(1) {
    top: 0px;
}

.custom-toggler span:nth-child(2) {
    top: 9px;
}

.custom-toggler span:nth-child(3) {
    top: 18px;
}

.custom-toggler[aria-expanded="true"] span:nth-child(1) {
    top: 9px;
    transform: rotate(135deg);
}

.custom-toggler[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    left: -15px;
}

.custom-toggler[aria-expanded="true"] span:nth-child(3) {
    top: 9px;
    transform: rotate(-135deg);
}

/* Hero Section */
.hero-section {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.hero-picture {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    display: block;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-overlay {
    grid-area: 1 / 1;
    background: linear-gradient(to right, rgb(1, 98, 131) 0%, rgb(1, 98, 131) 7%, rgba(1, 98, 131, 0) 60%);
    z-index: 1;
}

.hero-overlay.hero-overlay-supporters {
    background: linear-gradient(to right, #1B5586 0%, #1B5586 7%, rgba(27, 85, 134, 0) 60%);
}

.hero-content {
    grid-area: 1 / 1;
    z-index: 2;
    align-self: center;
    color: #ffffff;
    text-align: left;
    padding: 2rem;
    width: 100%;
    margin: 0 auto;
}

.hero-heading {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    max-width: 820px;
}

.hero-heading p {
    margin: 0;
    display: inline;
}

.hero-text {
    font-size: 1.25rem;
    max-width: 620px;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-text h3 {
    color: var(--ket-yellow);
    font-size: 1.4rem;
}

.hero-text a {
    color: var(--ket-yellow);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease-in-out;
}

.hero-text a:hover,
.hero-text a:focus {
    color: #ffffff;
}

@media (max-width: 767px) {

    .hero-heading {
        font-size: 2.25rem;
    }

    .hero-text {
        font-size: 1.1rem;
        margin: 0 auto;
    }

    .bg-shape-impact p,
    .bg-shape-prac p,
    .bg-shape-eco p {
        font-size: 0.9rem;
        line-height: 1.3;
    }
}

@media (min-width: 1200px) {
    .hero-heading {
        font-size: 6rem;
    }

    .hero-text h3 {
        font-size: 4rem;
    }
}

/* Background Shape Styles */
.bg-shape-impact {
    background-image: url('img/bg-shape-impact.png');
    background-color: var(--ket-pink);
}

.bg-shape-prac {
    background-image: url('img/bg-shape-prac.png');
    background-color: var(--ket-teal);
}

.bg-shape-eco {
    background-image: url('img/bg-shape-eco.png');
    background-color: var(--ket-orange);
}

.bg-shape-impact,
.bg-shape-prac,
.bg-shape-eco {
    background-size: contain !important;
    /* Keep image aspect ratio, no bleeding */
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    /* Max size of the image */
    margin: 0 auto;
    /* Center the block if inside a large column */
    aspect-ratio: 740 / 490;
    /* Match exact image dimensions */
    padding: 17% 15% 4% 15% !important;
    /* Constrain text to the white shape */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically */
    align-items: center;
    /* Center content horizontally */
}

/* Ensure child elements stay inside the container boundaries */
.bg-shape-impact>*,
.bg-shape-prac>*,
.bg-shape-eco>* {
    max-width: 68%;
}

.bg-shape-impact p,
.bg-shape-prac p,
.bg-shape-eco p {
    margin-bottom: 0.8rem !important;
}

/* WordPress often adds margin-top to adjacent elements for block-gap.
   We zero it out here so the p tag's margin-bottom takes full effect. */
.bg-shape-impact p+*,
.bg-shape-prac p+*,
.bg-shape-eco p+* {
    margin-top: 0 !important;
}

@media (max-width: 400px) {

    .bg-shape-impact,
    .bg-shape-prac,
    .bg-shape-eco {
        background-size: 110% !important;
    }
}

@media (min-width: 1400px) {

    .bg-shape-impact,
    .bg-shape-prac,
    .bg-shape-eco {
        background-size: 110% !important;
    }

    .bg-shape-impact p,
    .bg-shape-prac p,
    .bg-shape-eco p {
        font-size: 1.25rem;
    }

    .btn-ket-multiline {
        min-height: 115px;
        max-width: 550px;
        padding: 1.15rem 2.875rem;
    }

    .btn-ket-multiline .btn-title {
        font-size: 1.32rem;
    }

    .btn-ket-multiline .btn-subtitle {
        font-size: 0.98rem;
    }
}


.bg-shape-impact a {
    color: var(--ket-orange);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
}

.bg-shape-prac a {
    color: var(--ket-blue);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
}

.bg-shape-eco a {
    color: var(--ket-teal);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
}



/* Utilities */
.gap-0 {
    gap: 0 !important;
}

/* Editor Alignment Classes */
.alignfull {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    width: 100vw !important;
}

.alignwide {
    margin-left: -10% !important;
    margin-right: -10% !important;
    max-width: 120% !important;
    width: 120% !important;
}

@media (max-width: 768px) {
    .alignwide {
        margin-left: -5% !important;
        margin-right: -5% !important;
        max-width: 110% !important;
        width: 110% !important;
    }
}

/* Constrain columns and groups inside full-width blocks */
.alignfull>.wp-block-columns:not(.alignfull),
.alignfull>.wp-block-group:not(.alignfull),
.alignfull>.wp-block-group__inner-container>.wp-block-columns:not(.alignfull),
.alignfull>.wp-block-group__inner-container>.wp-block-group:not(.alignfull),
.alignfull .wp-block-column>.wp-block-columns:not(.alignfull),
.alignfull .wp-block-column>.wp-block-group:not(.alignfull) {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    max-width: var(--wp--style--global--content-size, 1140px);
}

@media (min-width: 1200px) {

    .alignfull>.wp-block-columns:not(.alignfull),
    .alignfull>.wp-block-group:not(.alignfull),
    .alignfull>.wp-block-group__inner-container>.wp-block-columns:not(.alignfull),
    .alignfull>.wp-block-group__inner-container>.wp-block-group:not(.alignfull),
    .alignfull .wp-block-column>.wp-block-columns:not(.alignfull),
    .alignfull .wp-block-column>.wp-block-group:not(.alignfull) {
        max-width: var(--wp--style--global--content-size, 1140px);
    }
}

/* Multi-Image Decorative Background */
.bg-shapes-decor {
    background-image: url('img/shapes-combo-2.png'),
        url('img/star-yel.png'),
        url('img/dot-blue.png'),
        url('img/shapes-combo-1.png');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

    /* 
       Positions: 
       1. Bottom Left 
       2. Left of center (approx 30% from left, 20% from top)
       3. Right of center (approx 75% from left, 60% from top)
       4. Bottom Right
    */
    background-position: 3% bottom,
        30% 2%,
        75% 0%,
        96% bottom;

    /* Responsive sizing using clamp() to smoothly scale on smaller screens */
    background-size: clamp(90px, 45vw, 220px) auto,
        /* shapes-combo-2 */
        clamp(50px, 25vw, 70px) auto,
        /* star-yel */
        clamp(30px, 20vw, 60px) auto,
        /* dot-blue (assumed standard small size) */
        clamp(120px, 25vw, 280px) auto;
    /* shapes-combo-1 */
}

/* Tiled Bubble Divider */
.bg-bubble-teal {
    background-image: url('img/bg-bubble-teal.png');
    background-repeat: repeat-x;
    background-position: left bottom;
    width: 100%;

    /* Default (Small screens < 768px) */
    background-size: 48px auto;
    padding-bottom: 70px;
    padding-top: 40px;
}

/* Medium and Large screens (md, lg >= 768px) */
@media (min-width: 768px) {
    .bg-bubble-teal {
        background-size: 98px auto;
        padding-bottom: 145px;
    }
}

@media (min-width: 992px) {
    .bg-bubble-teal {
        padding-top: 60px;
    }
}

/* Extra Large screens (xl >= 1200px) */
@media (min-width: 1200px) {
    .bg-bubble-teal {
        background-size: 162px auto;
        padding-bottom: 180px;
    }
}

.bg-pen-red {
    background-image: url('img/bg-pen-red.png');
    background-repeat: repeat-x;
    background-position: left calc(100% + 2px);
    width: 100%;

    /* Default (Small screens < 768px) */
    background-size: 48px auto;
    padding-bottom: 35px;
    padding-top: 40px;
}

.bg-bubble-orange {
    background-image: url('img/bg-bubble-orange.png');
    background-repeat: repeat-x;
    background-position: left bottom;
    width: 100%;

    /* 20% smaller than 48px */
    background-size: 38px auto;
    /* Increased padding */
    padding-bottom: 70px;
    padding-top: 40px;
}

/* Medium and Large screens (md, lg >= 768px) */
@media (min-width: 768px) {
    .bg-pen-red {
        background-size: 98px auto;
        padding-bottom: 72.5px;
    }

    .bg-bubble-orange {
        background-size: 78px auto;
        /* 20% smaller than 98px */
        padding-bottom: 145px;
    }
}

@media (min-width: 992px) {

    .bg-pen-red,
    .bg-bubble-orange {
        padding-top: 60px;
    }
}

/* Extra Large screens (xl >= 1200px) */
@media (min-width: 1200px) {
    .bg-pen-red {
        background-size: 162px auto;
        padding-bottom: 90px;
    }

    .bg-bubble-orange {
        background-size: 130px auto;
        /* 20% smaller than 162px */
        padding-bottom: 180px;
    }
}

.bg-bubble-red {
    background-image: url('img/bg-bubble-red.png');
    background-repeat: repeat-x;
    background-position: left top;
    width: 100%;

    /* Default (Small screens < 768px) */
    background-size: 48px auto;
    padding-top: 70px;
}

/* Medium and Large screens (md, lg >= 768px) */
@media (min-width: 768px) {
    .bg-bubble-red {
        background-size: 98px auto;
        padding-top: 145px;
    }
}

/* Extra Large screens (xl >= 1200px) */
@media (min-width: 1200px) {
    .bg-bubble-red {
        background-size: 162px auto;
        padding-top: 180px;
    }
}



/* Hide empty entry headers when title is hidden */
.entry-header:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Menu items max-width and wrapping for expanded view */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        width: fit-content;
        white-space: normal;
        text-align: left;
        line-height: 1.25;
        border: 1px solid transparent;
        /* Prevents jumping when active border is applied */
        border-radius: 8px;
        transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    }

    /* Active and hover/focus menu item styling */
    .navbar-nav .current-menu-item>.nav-link,
    .navbar-nav .current-page-ancestor>.nav-link,
    .navbar-nav .current-menu-ancestor>.nav-link,
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        border-color: rgba(0, 0, 0, 0.15);
    }
}

/* Hero Labels */
.hero-section {
    position: relative;
}

.hero-label {
    position: absolute;
    top: 0;
    right: 40px;
    background-color: var(--ket-black);
    color: var(--ket-white);
    padding: 10px 24px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    font-size: 1.1rem;
    font-weight: 500;
    z-index: 10;
    transition: all 0.3s ease;
}

.hero-label-practitioners {
    background-color: var(--ket-teal);
}

.hero-label-practitioners:hover,
.hero-label-practitioners:focus {
    background-color: #0a736d;
}

.hero-label-supporters {
    background-color: var(--ket-blue);
}

.hero-label-supporters:hover,
.hero-label-supporters:focus {
    background-color: #0d4682;
}

@media (max-width: 768px) {
    .hero-label {
        right: 20px;
        /* Slight adjustment for mobile screens */
        padding: 6px 14px;
        font-size: 0.85rem;
    }
}

/* Custom Global Container Max Width */
@media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl,
    .alignfull .wp-block-column>.wp-block-columns:not(.alignfull) {
        max-width: 1120px !important;
    }
}

/* Restore Navbar Container Width */
@media (min-width: 1200px) {
    .navbar-container {
        max-width: 1140px !important;
    }
}

@media (min-width: 1400px) {
    .navbar-container {
        max-width: 1320px !important;
    }
}

/* Custom Link Bullet */
.ket-link {
    position: relative;
    padding-left: 1.5rem;
    list-style: none;
}

.ket-link::before {
    font-family: "bootstrap-icons" !important;
    content: "\f470";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.25em;
    color: var(--ket-black);
    line-height: 1;
}

.ket-link-white {
    position: relative;
    padding-left: 1.5rem;
    list-style: none;
    color: var(--ket-white) !important;
}

.ket-link-white a {
    color: var(--ket-white) !important;
}

.ket-link-white::before {
    font-family: "bootstrap-icons" !important;
    content: "\f470";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.25em;
    color: var(--ket-white);
    line-height: 1;
}

/* WordPress Block Alignments */
.alignleft {
    float: left;
    margin: 0.5em 1.5em 0.5em 0;
    max-width: 100%;
}

.alignright {
    float: right;
    margin: 0.5em 0 0.5em 1.5em;
    max-width: 100%;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.entry-content::after {
    content: "";
    display: table;
    clear: both;
}

.entry-content ul li,
.entry-content ol li {
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

/* Custom Numbered List */
.ket-numbered-list {
    list-style: none;
    padding-left: 0;
    counter-reset: ket-counter;
}

.ket-numbered-list>li {
    position: relative;
    padding-left: 4rem;
    margin-bottom: 1.5rem;
    counter-increment: ket-counter;
    min-height: 3rem;
}

.ket-numbered-list>li::before {
    content: counter(ket-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -0.2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: var(--ket-white);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
}

/* Color Cycling */
.ket-numbered-list>li:nth-child(5n + 1)::before {
    background-color: var(--ket-blue);
}

.ket-numbered-list>li:nth-child(5n + 2)::before {
    background-color: var(--ket-red);
}

.ket-numbered-list>li:nth-child(5n + 3)::before {
    background-color: var(--ket-yellow);
    color: var(--ket-blue);
}

.ket-numbered-list>li:nth-child(5n + 4)::before {
    background-color: var(--ket-teal);
}

.ket-numbered-list>li:nth-child(5n + 5)::before {
    background-color: var(--ket-pink);
}

/* Scroll to Top Button */
#scrollToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1050;
    display: none;
    /* Hidden by default */
    background: transparent;
    border: none;
    padding: 0;
    color: var(--ket-teal);
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
}

#scrollToTopBtn:hover {
    transform: translateY(-5px);
    color: var(--ket-red);
}

#scrollToTopBtn i {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

@media (max-width: 768px) {
    #scrollToTopBtn {
        bottom: 20px;
        right: 20px;
    }

    #scrollToTopBtn i {
        font-size: 2.5rem;
    }
}

/* Custom WP Columns Utility */
/* Add "stack-2-mobile" to the Additional CSS Classes of a Columns block to keep 2 columns next to each other on mobile */
@media (max-width: 781px) {
    .wp-block-columns.stack-2-mobile {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* The gap is automatically handled by WP's native block gap applied to .wp-block-columns */
    }

    .wp-block-columns.stack-2-mobile>.wp-block-column {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
        flex-basis: auto !important;
    }
}

.bg-btm-about-red {
    background-image: url('img/btm-about-red.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    aspect-ratio: 3508 / 320;
    width: 100%;
}

.bg-btm-bubbles-orange2 {
    background-image: url('img/btm-bubbles-orange2.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    aspect-ratio: 3508 / 320;
    width: 100%;
}

.bg-btm-bubbles-orange {
    background-image: url('img/btm-bubbles-orange.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    aspect-ratio: 3508 / 494;
    width: 100%;
}

.bg-btm-bubbles-orange3 {
    background-image: url('img/btm-bubbles-orange3.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    aspect-ratio: 3508 / 320;
    width: 100%;
}

.text-vertical-bottom-up {
    text-align: center;
}

@media (min-width: 992px) {
    .text-vertical-bottom-up {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        align-self: stretch !important;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        max-width: 100%;
        min-width: 0;
        overflow-wrap: break-word;
    }

    .text-vertical-bottom-up>* {
        max-width: 100%;
    }
}

/* Mobile Constrain Utility */
@media (max-width: 781px) {
    .mobile-narrow {
        max-width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* Quote Box Variations */
.ket-quote-yellow,
.ket-quote-blue,
.ket-quote-red,
.ket-quote-red-dark,
.ket-quote-teal,
.ket-quote-orange,
.ket-quote-gold {
    background-color: var(--ket-white);
    padding: 1.5rem 2rem;
    text-align: left;
    border-left: 4px solid;
    margin-bottom: 1.5rem;
}

.ket-quote-yellow {
    border-left-color: var(--ket-yellow);
}

.ket-quote-blue {
    border-left-color: var(--ket-blue);
}

.ket-quote-red {
    border-left-color: var(--ket-red);
}

.ket-quote-red-dark {
    border-left-color: var(--ket-red-dark);
}

.ket-quote-teal {
    border-left-color: var(--ket-teal);
}

.ket-quote-orange {
    border-left-color: var(--ket-orange);
}

.ket-quote-gold {
    border-left-color: #D6A840;
    background-color: rgba(0, 0, 0, 0.05);
}

/* Top-Border Quote Box Variations */
.ket-quote-top-yellow,
.ket-quote-top-blue,
.ket-quote-top-red,
.ket-quote-top-red-dark,
.ket-quote-top-teal,
.ket-quote-top-orange,
.ket-quote-top-gold {
    background-color: var(--ket-white);
    padding: 1.5rem 2rem;
    text-align: left;
    border-top: 4px solid;
    margin-bottom: 1.5rem;
}

.ket-quote-top-yellow {
    border-top-color: var(--ket-yellow);
}

.ket-quote-top-blue {
    border-top-color: var(--ket-blue);
}

.ket-quote-top-red {
    border-top-color: var(--ket-red);
}

.ket-quote-top-red-dark {
    border-top-color: var(--ket-red-dark);
}

.ket-quote-top-teal {
    border-top-color: var(--ket-teal);
}

.ket-quote-top-orange {
    border-top-color: var(--ket-orange);
}

.ket-quote-top-gold {
    border-top-color: #D6A840;
    background-color: rgba(0, 0, 0, 0.05);
}

/* Utility: Vertically center content in a stretched column */
.col-center-content {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

/* Custom Progress Bar */
.ket-progress-container {
    width: 100%;
    background-color: #E9ECEF;
    border-radius: 999px;
    height: 1.5rem;
    overflow: hidden;
    position: relative;
    margin-bottom: 1rem;
}

.ket-progress-fill {
    height: 100%;
    background-color: var(--ket-blue);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ket-white);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    transition: width 0.6s ease;
    white-space: nowrap;
}

/* Progress Fill Color Modifiers */
.ket-progress-fill.bg-ket-red,
.ket-progress-fill.ket-red {
    background-color: var(--ket-red);
}

.ket-progress-fill.bg-ket-red-dark,
.ket-progress-fill.ket-red-dark {
    background-color: var(--ket-red-dark);
}

.ket-progress-fill.bg-ket-yellow,
.ket-progress-fill.ket-yellow {
    background-color: var(--ket-yellow);
    color: var(--ket-black);
}

.ket-progress-fill.bg-ket-teal,
.ket-progress-fill.ket-teal {
    background-color: var(--ket-teal);
}

.ket-progress-fill.bg-ket-orange,
.ket-progress-fill.ket-orange {
    background-color: var(--ket-orange);
}

.ket-progress-fill.bg-ket-beige-dark,
.ket-progress-fill.ket-beige-dark {
    background-color: var(--ket-beige-dark);
    color: var(--ket-black);
}

/* WP Separator */
hr.wp-block-separator {
    border: none !important;
    border-top: 1px solid #ccc !important;
    height: 0 !important;
    opacity: 1;
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
}

/* Custom Image Lists */
ul.list-hex-gold,
ul.list-hex-white,
ul.list-hex-red,
ul.list-hex-blue {
    list-style: none;
    padding-left: 0;
    font-size: var(--wp--preset--font-size--small, 13px);
}

ul.list-hex-gold li,
ul.list-hex-white li,
ul.list-hex-red li,
ul.list-hex-blue li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

ul.list-hex-gold li::before,
ul.list-hex-white li::before,
ul.list-hex-red li::before,
ul.list-hex-blue li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 12px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

ul.list-hex-gold li::before {
    background-image: url('img/bullet-hex-gold.png');
}

ul.list-hex-white li::before {
    background-image: url('img/bullet-hex-wht.png');
}

ul.list-hex-red li::before {
    background-image: url('img/bullet-hex-red.png');
}

ul.list-hex-blue li::before {
    background-image: url('img/bullet-hex-blue.png');
}

ul.list-glasses {
    list-style: none;
    padding-left: 0;
}

ul.list-glasses li {
    position: relative;
    padding-left: 75px;
    /* enough space for 60px bullet + gap */
    margin-bottom: 0.5rem;
}

ul.list-glasses li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 60px;
    height: 30px;
    background-image: url('img/i-glasses.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

/* Custom Typography Overrides */
.has-x-large-font-size {
    font-size: clamp(3rem, 6vw + 1rem, 5.5rem) !important;
    line-height: 1.1 !important;
}

/* WP Block Buttons */
.wp-block-button__link:not(.has-background) {
    background-color: var(--ket-blue);
    color: var(--ket-white);
}

.wp-block-button__link {
    transition: opacity 0.3s ease;
}

.wp-block-button__link:hover {
    opacity: 0.85;
}

/* Custom Button Color Classes (Apply 'btn-teal', etc. to WP Button Block) */
.wp-block-button.btn-teal .wp-block-button__link {
    background-color: var(--ket-teal) !important;
    color: var(--ket-white) !important;
}

.wp-block-button.btn-red .wp-block-button__link {
    background-color: var(--ket-red) !important;
    color: var(--ket-white) !important;
}

.wp-block-button.btn-red-dark .wp-block-button__link {
    background-color: var(--ket-red-dark) !important;
    color: var(--ket-white) !important;
}

.wp-block-button.btn-yellow .wp-block-button__link {
    background-color: var(--ket-yellow) !important;
    color: var(--ket-black) !important;
}

/* Decorative Backgrounds */
.bg-shapes-notes {
    background-image: none;
}

@media (min-width: 992px) {
    .bg-shapes-notes {
        background-image: url('img/bg-shapes-notes.png');
        background-repeat: no-repeat;
        background-position: right 2% bottom 5%;
        background-size: 300px auto;
    }
}

/* Post Listing Thumbnails */
.post-item .img-fluid {
    border-radius: 1.2rem !important;
}