/* Load Fonts */
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree.woff2') format('woff2'),
    url('fonts/Figtree.woff2') format('woff');
  font-display: swap;
}
/*
@font-face {
  font-family: 'Teachers';
  src: url('fonts/Teachers.woff2') format('woff2'),
    url('fonts/Teachers.woff2') format('woff');
  font-display: swap;
}
*/

/* --- MAIN STYLES --- */

:root {
/* Colors */
--color-brand-dark: #003952;
--color-brand-dark-hover: #004766;
--color-accent: #f26f21;
--color-accent-light: #ff8400;
--color-bg-off-white: #f3f5f6;
--color-bg-off-white: #eaf2f6;
--color-bg-white: #ffffff;
--color-text-dark: #000;
--color-text-medium: #003247;
--color-text-light: #395765;
--color-text-off-white: rgba(255, 255, 255, 0.75);
--color-text-off-white-header: rgba(255, 255, 255, 0.9);
--color-text-button: #fff;
--color-header: #004461;
--color-accent-text: #0e12f1;
--color-success: #00a800;
--color-error: #dd2251;

/* Borders & Radius */
--border-light: solid 1px #e4eaec;
--border-medium: solid 1px #aec0c6;
--border-dark: solid 1px #8594a3;
--radius-small: 0.25rem;
--radius-medium: 0.5rem;
--radius-large: 1rem;

/* Shadows */
--shadow-small: 3px 3px 2px -2px rgba(0, 0, 0, 0.1);
--shadow-medium: 2px 2px 4px -1px rgba(0, 0, 0, 0.1), 4px 4px 8px 1px rgba(0, 0, 0, 0.1);
--shadow-large: 4px 4px 8px -2px rgba(0, 0, 0, 0.1), 8px 8px 16px 2px rgba(0, 0, 0, 0.1);

/* Typography */
--font-body: 'Figtree', system-ui, sans-serif;
--font-head: 'Teachers', system-ui, sans-serif;
/* --h1: clamp(1.8rem, 4vw, 2.5rem);
--h2: clamp(1.6rem, 3vw, 2rem);
--h3: clamp(1.4rem, 2.5vw, 1.5rem);
--h4: clamp(1.2rem, 2vw, 1.25rem); */

--h1: clamp(1.4rem, 3vw, 2rem);
--h2: clamp(1.3rem, 2.5vw, 1.5rem);
--h3: clamp(1.2rem, 2vw, 1.25rem);
--h4: clamp(1rem, 1.5vw, 1.125rem);
  
/* Layout */
--main-padding: 4rem;  
}

/* Override Default Size Values */
:root :is(.editor-styles-wrapper, .is-frontend) {
	/* Spacing */
    --wp--preset--spacing--20: 0.25rem;
    --wp--preset--spacing--30: 0.5rem;
    --wp--preset--spacing--40: 0.75rem;
    --wp--preset--spacing--50: 1rem;
    --wp--preset--spacing--60: 1.5rem;
    --wp--preset--spacing--70: 2rem;
    --wp--preset--spacing--80: var(--main-padding);
  
	/* Font Sizes */
    --wp--preset--font-size--xx-l: 0.8rem;
    --wp--preset--font-size--small: var(--h4);
    --wp--preset--font-size--medium: var(--h3);
    --wp--preset--font-size--large: var(--h2);
    --wp--preset--font-size--x-large: var(--h1);
}

.is-frontend .entry-content {
    padding-top: var(--main-padding);
    padding-bottom: var(--main-padding);
}

/* Header, Content, and Footer */
.main-padding[class] {
  padding-left: var(--main-padding);
  padding-right: var(--main-padding);
}

@media (max-width: 900px) {
  :root {--main-padding: 2rem;}
}

@media (max-width: 450px) {
  :root {--main-padding: 2rem;}
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
    overflow-wrap: break-word;
}

html, .editor-styles-wrapper {
  font-size: 20px;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  html, .editor-styles-wrapper {
    font-size: 18px;
  }
}

.is-frontend, .is-root-container {
    max-width: 1980px;
    margin: auto;
    font-size: 1rem;
    padding: 0;
    font-family: var(--font-body);
    text-wrap-style: pretty;
    color: var(--color-text-medium);
    background-color: var(--color-bg-off-white);
	line-height: 1.45;
}
@media (max-width: 768px) {
  .is-frontend, .is-root-container {
      line-height: 1.5;
  }
}

.header svg.logo-icon {
    width: 3rem;
    height: 3rem;
}
.footer svg.logo-icon {
    height: 4rem;
    width: 4rem;
}

.brand-name-header a {
    color: inherit;
}

/* --- TEXT FORMATING --- */

h1, h2, h3, h4, h5 {
    line-height: 1.2;
    text-wrap-style: balance;
    /* font-family: var(--font-head); */
    color: var(--color-header);
    font-weight: 700;
}
@media (max-width: 768px) {
  h1, h2, h3, h4, h5 {
      line-height: 1.3;
  }
}

h1 {
    margin-block-start: 0;
    margin-block-end: 1rem;
}

h1 {font-size: var(--h1)}
h2 {font-size: var(--h2)}
h3 {font-size: var(--h3)}
h4 {font-size: var(--h4)}
h5, h6 {font-size: 1rem;}

h4, h5, h6 {
    margin-block-start: 1.5rem;
    margin-block-end: 0;
}

h2, h3 {
    margin-block-start: 2rem;
    margin-block-end: 0;
}

.is-frontend a, a.wp-element-button[class] {
    text-decoration: unset;
}
.is-layout-flow a {
    text-decoration: underline;
    font-weight: 500;
}

p {
    margin-block-start: 1rem;
    margin-block-end: 0;
}

h1 + p {
    font-size: clamp(1.15rem, 2vw, 1.25rem);
}

ol, ul {
    margin-block-start: 1rem;
    margin-block-end: 0;
    padding-inline-start: 2rem;
}
@media (max-width: 768px) {
  ol, ul {
      padding-inline-start: 1rem;
  }
}

:is(.editor-styles-wrapper, .is-frontend) :is(b, strong) {
    font-weight: 700;
    color: var(--color-header);
}

svg {
    color: currentColor;
    fill: currentColor;
    height: 1rem;
    width: 1rem;
    display: block;
}

li:not(:first-child, .wp-block-navigation-item) {
    margin-top: 1rem;
}

hr.wp-block-separator:not(#specificity) {
    border: 0;
    height: 0;
    border-top: var(--border-medium);
    margin: 2rem 0;
    width: 100%;
}

:is(.is-frontend, .is-root-container) :is(button, textarea, input) {
    font-family:  var(--font-body);
}

.wp-block-buttons {
    margin-top: 1rem;
}

.wp-block-quote.is-layout-flow {
    margin-bottom: 0;
    margin-top: 1rem;
}
blockquote.wp-block-quote {
    padding: 1rem 2rem;
    background-color: var(--color-bg-off-white);
    font-weight: 600;
    border-radius: var(--radius-medium);
    border-left: solid 0.25rem var(--color-accent);
    color: var(--color-brand-dark);
}

/* --- LAYOUT FIXES --- */
/* First element in a Group block */
.is-layout-flow > *:first-child, .is-layout-constrained > *:first-child {
    margin-top: 0;
}

/* Remove margin after a spacer */
.wp-block-spacer + * {
    margin-top: 0;
}

/* Get the group block to contain / ecompas inner element margin */
.wp-block-group {
    display: flow-root;
}

.wp-block-columns {
    margin-bottom: 0;
}

/* --- Fix Block Editor Gutenberg --- */

/* Images */
figure.wp-block-image {
    margin: 2rem 0;
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    width: fit-content;
    height: fit-content;
}
figure.wp-block-image img {
    max-height: 90svh;
    height: auto;
    width: 100vw;
    max-width: 100%;
    object-fit: contain;
}

@media (min-width: 768px) {
  figure.wp-block-image img {
      max-height: unset;
  }
}

pre.wp-block-code {
    margin-bottom: 0;
}

/* --- HEADER --- */

header.wp-block-template-part {
    background-color: var(--color-bg-white);
    border: var(--border-light);
}
header .wp-block-navigation .wp-block-navigation-item__content[class] {
    padding: 2rem 1rem;
    font-weight: 600;
    color: var(--color-text-light);
    font-size: 0.8rem;
}
header .wp-block-navigation-link:last-of-type .wp-block-navigation-item__content[class] {
    padding-right: 0;
}
.wp-block-navigation-item__label {
    position: relative;
}
.wp-block-navigation-item__label:after, .footer-link-group a:after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    border-radius: 100px;
    background-color: currentColor;
    opacity: 0.85;
}

.wp-block-navigation-item__content:hover .wp-block-navigation-item__label:after, .current-menu-item .wp-block-navigation-item__label:after, .wp-block-navigation__container:hover .current-menu-item:hover .wp-block-navigation-item__label:after, .footer-link-group a:hover:after {
    width: 100%;
}
.wp-block-navigation__container:hover .current-menu-item .wp-block-navigation-item__label:after {
    width: 0%;
}

ul.wp-block-navigation__submenu-container:not(:has(#id)) {
    width: max-content;
    min-width: unset;
    box-shadow: var(--shadow-large);
    margin-top: -1.5rem;
    border-radius: var(--radius-medium);
    overflow: clip;
    padding: 0.75rem 0;
}
/* Hide and show in mobile menu */
@media (max-width: 768px) {
ul.wp-block-navigation__submenu-container:not(:has(#id)) {
    max-height: 0;
    padding: 0;
    margin-top: 0rem;
}
  li.wp-block-navigation-item.has-child:has(.wp-block-navigation-item__label:hover) ul.wp-block-navigation__submenu-container[class]:not(:has(#id)) {
      max-height: 1000vh;
      padding: 0.75rem 0;
	  margin-bottom: 0.5rem;
  }
}

header .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content[class]:not(:has(#id)) {
    padding: 0.5rem 1.5rem;
}
.wp-block-navigation button.wp-block-navigation__submenu-icon {
    margin-left: -0.6rem;
    color: var(--color-text-light);
}

/* Mobile */
button[class*="wp-block-navigation__responsive-container"][class] {
    background-color: unset;
    color: currentColor;
    box-shadow: unset;
}
button.wp-block-navigation__responsive-container-open[class] {
    padding: 2rem 2rem 2rem 1rem;
    translate: 2rem;
}
button.wp-block-navigation__responsive-container-close[class] {
    translate: 1rem -1rem;
    padding: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content a.wp-block-navigation-item__content {
    padding: 1rem;
    font-size: var(--h1);
}
.wp-block-navigation__responsive-container-close[class] svg {
    width: 3rem;
    height: 3rem;
}
.wp-block-navigation__responsive-container-close svg path {
    stroke: var(--color-text-light);
    stroke-width: 1px !important;
    stroke-linejoin: round;
}

@media (max-width: 768px) {
  header .title a {
      font-size: 1.25rem;
  }
}

/* --- FOOTER --- */

.footer-link-group h4 {
    margin-top: 0;
    margin-bottom: 0.25rem;
}
.footer-link-group p {
    font-size: 0.8rem;
    margin-top: 0;
    font-weight: 600;
}
.footer-link-group a {
    color: var(--color-text-dark);
    padding: 0.25em 0;
    display: block;
    width: fit-content;
}
footer .section {
    padding-bottom: 2rem;
}
.footer-copyright {
    font-size: 0.8rem;
}


/* --- Newsletter --- */

/* Forms Contact Form 7 & Brevo */

.form-group textarea {
    resize: vertical;
    height: 8rem;
}

.form-group input:not([type="checkbox"]), .form-group textarea, .form-group select {
    width: 100%;
    padding: 0.75rem;
    padding-top: 0.5rem;
    border-radius: var(--radius-medium);
    color: var(--color-text-medium);
    background-color: var(--color-bg-white);
    font-size: 0.8rem;
    border: var(--border-medium);
}

/* Form Container (mobile first) */
.newsletter-wrapp {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 700px;
    margin: auto;
}

/* Form Group & Floating Label */
.form-group {
    position: relative;
}

/* Submit Button */
:is(.is-frontend, .is-root-container) :is(input[type="submit"], .wp-block-button__link), .is-frontend button {
    width: 100%;
    background-color: var(--color-accent);
    color: var(--color-text-button);
    border: none;
    border-radius: var(--radius-medium);
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    max-width: fit-content;
    padding: 1em 1.5em;
    letter-spacing: 1px;
    box-shadow: var(--shadow-large);
    translate: 0 -0.125rem;
}

:is(.is-frontend, .is-root-container) :is(input[type="submit"], .wp-block-button__link):hover {
    translate: 0;
    background-color: var(--color-accent-light);
    box-shadow: none;
}

input.sib-default-btn[type="submit"] {
    max-width: 100%;
    padding: 0.65rem 1rem;
    background-color: var(--color-brand-dark);
}
input.sib-default-btn[type="submit"]:hover {
    background-color: var(--color-brand-dark-hover);
}

button.wp-block-navigation__submenu-icon {
    box-shadow: unset;
}

.external-download a.wp-block-button__link:after {
    content: "";
    width: 0.9em;
    height: 0.9em;
    display: inline-block;
    background-repeat: no-repeat;
    margin-left: 0.5rem;
    vertical-align: -2px;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='3.5 2.5 18 18'%3E%3Cg id='Interface / External_Link'%3E%3Cpath id='Vector' d='M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

/* Inputs */

/* 3. Floating Label Logic (for Text & Textarea only) */
.form-group:not(.form-group--select) > label, .form-group label {
    top: 1.15rem;
    pointer-events: none;
    font-size: 0.8rem;
    position: absolute;
    left: 1em;
    transform: translateY(-50%);
    color: var(--color-text-light);
}
.wpcf7-form-control-wrap:has([aria-invalid="false"][aria-required="true"]:not(:placeholder-shown)) + label {
    color: var(--color-success);
}
.wpcf7-form-control-wrap:has([aria-invalid="true"]:not(:placeholder-shown)) + label {
    color: var(--color-error);
}
.wpcf7-form-control-wrap:has(.wpcf7-validates-as-required[class][aria-invalid="true"]) + label {
    color: var(--color-error);
}

.form-group:has(input:focus) > label, .form-group:has(input:not(:placeholder-shown)) > label, .form-group:has(textarea:focus) > label, .form-group:has(textarea:not(:placeholder-shown)) > label {
    top: 0;
    font-size: 0.75rem;
    color: var(--color-accent-text);
    background-color: var(--color-bg-white);
    padding: 0 0.5em;
}

/* Enhanced Focus State Using Theme Accent Color */
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none;
    border-color: var(--color-accent-text);
    box-shadow: var(--shadow-medium);
}

/* Dropdown Select */
/* Hide default and set cutom dropdown arrow */
.form-group--select label {
    position: unset;
    margin-bottom: -0.25rem;
    display: block;
    margin-top: 1.25rem;
}
.form-group--select select {
    padding: 0.75rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}
.form-group--select::after {
    content: '';
    position: absolute;
    top: 1.5em;
    right: 1.2rem;
    width: 0.5em;
    height: 0.5em;
    border-style: solid;
    border: var(--border-dark);
    border-width: 0 2px 2px 0;
    pointer-events: none;
    rotate: 45deg;
}
.form-group--select:has(select:focus)::after {
    rotate: 225deg;
    top: 1.75rem;
}
option {
  color: var(--color-text-off-white);
  background-color: var(--color-brand-dark);
}

/* Checkbox */
.cf7-modern-form-wrapper .wpcf7-list-item {
    margin: 0 0 0.5rem 0;
    line-height: 1;
    display: block;
}

.cf7-modern-form-wrapper .wpcf7-list-item label {
    position: unset;
    transform: unset;
    pointer-events: all;
    color: var(--color-text-medium);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

input[type="checkbox"] {
    margin: 0.1em 0 0 0;
}


/* Cloudfare Captcha - Turnstile */
form.wpcf7-form {
    display: grid;
}
.cf-turnstile {
    height: 65px;
    width: 300px;
    border-radius: var(--radius-medium);
    overflow: clip;
    max-width: 100%;
    order: 1;
    margin-top: 1rem;
}

/* Contact Form 7 specific */

.wpcf7-form-control-wrap {
    display: block;
}

.wpcf7 .form-group {
    margin-bottom: 1rem;
}
.cf7-submit-btn {
    margin-top: 1rem;
}  

.cf-turnstile-wrap {
    padding: 0 !important;
}
  
/* Contact Form 7 Note */
.wpcf7 form .wpcf7-response-output[class] {
    margin: 0;
    padding: 1rem;
    margin-top: 1rem;
}

/* Validation Indicators & NEW Error Message */
.error-message, .wpcf7-not-valid-tip[class] {
    display: block;
    color: var(--color-error);
    font-size: 0.8rem;
    padding-left: 0.25rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

/* Logic to show error message */
.form-group input:required:invalid:not(:placeholder-shown) ~ .error-message, .wpcf7-not-valid-tip[class] {
    max-height: 100px;
    opacity: 1;
    margin-top: 0.25rem;
}

/* Border color logic */
.form-group input:required:valid:not(:placeholder-shown), .wpcf7-validates-as-required[aria-required="true"][aria-invalid="false"]:not(:placeholder-shown) {
    border-color: var(--color-success);
}
input[class*="email"]:required:invalid:not(:placeholder-shown), .wpcf7-validates-as-required[class][aria-invalid="true"] {
    border-color: var(--color-error);
}

.form-group input:focus:invalid {
    color: var(--color-brand-dark); /* Change label color on focus even if invalid */
}

/* Desktop Layout (Inline) */
@media (min-width: 768px) {
    .newsletter-wrapp {
        flex-direction: row; /* Switch to horizontal layout */
        align-items: flex-start; /* Align items to the top for consistent height */
    }

    .newsletter-wrapp .form-group {
        flex: 1 1 auto;
        width: 7rem;
    }
  
    .form-group.submit-button {
        flex: unset;
        width: unset;
    }

    .form-group:last-child {
        flex-grow: 0; /* Prevent the button's container from growing */
        flex-shrink: 0;
    }
}

/* --- Animated Accordion CSS --- */

.wp-block-details {
  border-bottom: var(--border-dark);
  margin: 0;
}
.wp-block-details:first-of-type {
  border-top: var(--border-dark);
}
.wp-block-details summary {
    list-style: none;
    display: block;
    cursor: pointer;
    position: relative;
    padding: 1rem 2rem 1rem 1rem;
    font-weight: 600;
    user-select: none;
}
.wp-block-details summary::-webkit-details-marker {
  display: none;
}
.wp-block-details:not([open]):hover {
    outline: solid 1px currentColor;
	border-color: transparent;
}
.wp-block-details[open] summary {
    padding-left: 0;
}
.wp-block-details summary::before,
.wp-block-details summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 1rem;
  height: 2px;
  background-color: currentColor;
}
.wp-block-details summary::before { transform: translateY(-50%); }
.wp-block-details summary::after { transform: translateY(-50%) rotate(90deg); }
.wp-block-details[open] > summary::before { transform: translateY(-50%) rotate(45deg); }
.wp-block-details[open] > summary::after { transform: translateY(-50%) rotate(-45deg); }
/* --- Content Wrapper for Animation --- */
/* This class is added via JS */
.wp-block-details__content {
    overflow: hidden;
    padding: 0 2rem 1rem 1rem;
}
.wp-block-details__content-inner > * {
    margin-top: 0;
}