/**
*
*
*
* ###################    IMPORTS
* ###################    IMPORTS
* ###################    IMPORTS
*
*
*
*/

/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap'); */


/**
*
*
*
* ###################    VARIABLES
* ###################    VARIABLES
* ###################    VARIABLES
*
*
*
*/



/* === GLOBAL VARIABLES: Fonts and Color Definitions === */
:root {
    /* --main-font-family: "Roboto"; */
    --main-font-family: "Roboto";
    --quote-font-family: "Crimson Text", serif;
    --special-font-family: "Courier New", monospace;

    --background-light-color-ratio: 1.5%;
    --background-color-ratio: 2.5%;
    --background-intense-color-ratio: 5%;

    --dark-color: black;
    --white-color: white;

    --main-color: #cf2e2e;
    --background-color: white;
    --background-color-dark: color-mix(in srgb, var(--background-color) 95%, black);

    /* Default fallback */
}


/* === PAGE-SPECIFIC COLORS AND BACKGROUNDS === */


/* WELCOME TO HEERA */
body.page-id-480 {
    --img-overlay-enabled: 1;
    --main-color: blue;
    --background-color: color-mix(in srgb, var(--main-color) var(--background-color-ratio), white);
    --background-color-dark: color-mix(in srgb, var(--background-color) 95%, black);
}




/* MORE ABOUT HEERA */
body.page-id-656 {
    --img-overlay-enabled: 1;
    --main-color: #8338ec;
    --background-color: color-mix(in srgb, var(--main-color) var(--background-intense-color-ratio), white);
    --background-color-dark: color-mix(in srgb, var(--background-color) 95%, black);
}



/* JOIN HEERA */
body.page-id-689 {
    --img-overlay-enabled: 1;
    --main-color: #fe6225;
    --background-color: color-mix(in srgb, var(--main-color) var(--background-light-color-ratio), white);
    --background-color-dark: color-mix(in srgb, var(--background-color) 95%, black);
}




/* MANIFEST */
body.page-id-833 {
    --img-overlay-enabled: 0;
    --main-color: #000;
    --background-color: #E38B4D;
    --background-color-dark: color-mix(in srgb, var(--background-color) 95%, white);
}




/* TEMPLATE PAGE */
body.page-id-39 {
    --img-overlay-enabled: 1;
    --main-color: blue;
    --background-color: color-mix(in srgb, var(--main-color)--background-color-ratio, white);
    --background-color-dark: color-mix(in srgb, var(--background-color) 95%, black);
}

/* NEW STUFF */
body.page-id-37 {
    --img-overlay-enabled: 0;
    --main-color: #000;
    --background-color: #E38B4D;
    --background-color-dark: color-mix(in srgb, var(--background-color) 95%, white);
}


/**
  *
  *
  *
  * ###################    BODY 
  * ###################    BODY 
  * ###################    BODY 
  *
  *
  *
  */


html {
    scroll-behavior: smooth;
}


body {
    background-color: var(--background-color) !important;
}


/* Back to top button */
#qodef-back-to-top {
    background-color: white !important;
    border: 2px solid var(--main-color) !important;
    color: var(--main-color) !important;
    font-family: var(--main-font-family) !important;
}

#qodef-back-to-top .qodef-back-to-top-icon {
    background-color: white !important;
    border: none !important;
}

#qodef-back-to-top .qodef-back-to-top-icon svg {
    stroke: var(--main-color) !important;
}

/* Scrollbar (still applied globally, ok for site and not for adminbar) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: white;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: var(--main-color);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: var(--main-color);
}

/* Firefox scrollbar */
html,
body {
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) white;
}

.wp-block-separator.is-style-wide {
    background-color: var(--main-color);
    height: 1px;
    border: none;
    opacity: 1;
}



/**
  *
  *
  *
  * ###################    TEXT 
  * ###################    TEXT 
  * ###################    TEXT  
  *
  *
  *
  */


#qodef-page-wrapper,
#qodef-page-wrapper p,
#qodef-page-wrapper h1,
#qodef-page-wrapper h2,
#qodef-page-wrapper h3,
#qodef-page-wrapper h4,
#qodef-page-wrapper h5,
#qodef-page-wrapper h6,
#qodef-page-wrapper span,
#qodef-page-wrapper li,
#qodef-page-wrapper blockquote,
#qodef-page-wrapper a,
#qodef-page-wrapper .wp-element-caption {
    font-family: var(--main-font-family) !important;
    color: var(--main-color) !important;
}


#qodef-page-wrapper h1,
#qodef-page-wrapper h2,
#qodef-page-wrapper h3,
#qodef-page-wrapper h4,
#qodef-page-wrapper h5,
#qodef-page-wrapper h6 {
    font-family: var(--quote-font-family) !important;
}

#qodef-page-wrapper h1.huge,
#qodef-page-wrapper h2.huge,
#qodef-page-wrapper h3.huge,
#qodef-page-wrapper h4.huge,
#qodef-page-wrapper h5.huge,
#qodef-page-wrapper h6.huge {
    font-size: clamp(3rem, 8vw, 6rem);
    /* Responsive size */
    line-height: 1.1;
    font-weight: 400;
}

/* === DARK MODE: Override text color to dark === */
#qodef-page-wrapper .dark,
#qodef-page-wrapper .dark p,
#qodef-page-wrapper .dark h1,
#qodef-page-wrapper .dark h2,
#qodef-page-wrapper .dark h3,
#qodef-page-wrapper .dark h4,
#qodef-page-wrapper .dark h5,
#qodef-page-wrapper .dark h6,
#qodef-page-wrapper .dark span,
#qodef-page-wrapper .dark li,
#qodef-page-wrapper .dark blockquote,
#qodef-page-wrapper .dark a {
    color: var(--dark-color) !important;
}

/* === WHITE MODE: Override text color to white === */
#qodef-page-wrapper .white,
#qodef-page-wrapper .white p,
#qodef-page-wrapper .white h1,
#qodef-page-wrapper .white h2,
#qodef-page-wrapper .white h3,
#qodef-page-wrapper .white h4,
#qodef-page-wrapper .white h5,
#qodef-page-wrapper .white h6,
#qodef-page-wrapper .white span,
#qodef-page-wrapper .white li,
#qodef-page-wrapper .white blockquote,
#qodef-page-wrapper .white a {
    color: var(--white-color) !important;
}


/* PAGE TITLE */
.qodef-page-title .qodef-m-title.entry-title {
    font-size: 1.125rem;                /* Like an H4 (~18px) */
    text-transform: uppercase;          /* Makes it all caps */
    font-weight: 600;                   /* Slightly bolder, feel free to use 400 if too heavy */
    letter-spacing: 0.05em;             /* Adds spacing between letters */
    line-height: 1.4;                   /* Improves readability */
    margin: 0;                          /* Resets any large margins */
    font-family: var(--main-font-family); /* Uses your defined main font */
    color: var(--main-color);          /* Applies your main theme color */
  }
  


/* Header (inside your content, already safe) */
#qodef-page-header-inner {
    color: var(--main-color) !important;
    border-bottom: 1px solid var(--main-color) !important;
    font-family: var(--main-font-family) !important;
}



/* Blockquote */
blockquote p,
blockquote p.has-x-large-font-size {
    font-family: var(--quote-font-family) !important;
}

blockquote::before,
blockquote::after {
    border: none !important;
    background: none !important;
}

blockquote {
    border-left: 2px solid var(--main-color) !important;
}

blockquote::before {
    background: none !important;
    background-image: none !important;
    position: relative;
}

blockquote::before {
    content: "“";
    /* Or FontAwesome code if you want */
    color: var(--main-color);
    font-size: 140px;
    position: absolute;
    top: 10px;
    left: 10px;
    line-height: 1;
    z-index: 1;
}

.has-text-align-center {
    text-align: center !important;
    display: block;
    width: 100%;
}



/**
  *
  * ###################    BUTTONS 
  *
  */

/* Buttons */
#qodef-page-wrapper .wp-block-button__link {
    color: var(--main-color) !important;
    background-color: transparent !important;
    border: 2px solid var(--main-color) !important;
    font-family: var(--main-font-family) !important;
    padding: 6px 25px !important;
    font-style: normal !important;
    font-weight: 600 !important;
}


#qodef-page-wrapper .wp-block-button__link:hover {
    background-color: var(--main-color) !important;
    color: white !important;
}





/**
*
*
*
* ###################    ELEMENTS
* ###################    ELEMENTS
* ###################    ELEMENTS
*
*
*
*/


/* checkbox */

/* Override Jetpack form color variables using the CSS var fallback */
.wp-block-jetpack-contact-form-container {
    --jetpack--contact-form--border-color: var(--main-color);
    --jetpack--contact-form--text-color: var(--main-color);
    --jetpack--contact-form--button-primary--border-color: var(--main-color);
    --jetpack--contact-form--button-outline--border-color: var(--main-color);
    --jetpack--contact-form--button-outline--text-color: var(--main-color);
}



/* Force checkbox styling in Jetpack forms */

input[type="checkbox"].grunion-field {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    margin: 0;
    font: inherit;
    width: 18px;
    height: 18px;
    border: 1px solid var(--main-color) !important;
    border-radius: 2px;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  
  /* Checked state */
  input[type="checkbox"].grunion-field:checked {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
  }
  
  /* Custom checkmark */
  input[type="checkbox"].grunion-field:checked::before {
    content: "✓";
    color: white;
    font-size: 14px;
    line-height: 1;
    transform: scale(1);
    text-align: center;
  }
  
  


/* special box */

.my-special-box {
    background-color: var(--background-color);
    border: 1px solid var(--main-color);
    color: var(--main-color);
    padding: 2rem;
    width: 100%;
}


.fill {
    background-color: var(--background-color-dark);
    border: 1px solid var(--background-color-dark);
}


.qodef-logo--animated {
    animation: none !important;
  }
  
/* Hide the animated SVG line in the logo */
.qodef-logo-animated-line-holder .qodef-svg--text-line {
    display: none !important;
  }
  






/* foating box with header and footer */

.floating-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    /* Ensure this is set to stretch the box */
    padding: 1.5em;
    background-color: var(--background-color);
    border: 1px solid var(--main-color);
    box-sizing: border-box;
}

.floating-box .box-header {
    margin: 0;
    font-weight: 600;
}

.floating-box .box-footer {
    margin: 0;
    font-size: 0.9rem;
}



/* LOGO ON NAVBAR */


/* Set max height of the logo image */
.qodef-header-logo-image.qodef--main {
    height: 60px !important;
    width: auto !important;
    max-height: 60px !important;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: grayscale(1) brightness(1.01) contrast(1.2);
    z-index: 1;
    position: relative;
  }

/* Ensure container allows positioning */
.qodef-header-logo-link.qodef-source--image {
    position: relative;
    display: inline-block;
}


/* NAV BAR DROP DOWN */
/* Remove background/border from the outer wrappers */
.qodef-drop-down-second,
.qodef-drop-down-second.qodef-drop-down--start,
.qodef-drop-down-second-inner {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Apply background and border ONLY to ul.sub-menu */
.qodef-drop-down-second-inner ul.sub-menu {
  background-color: var(--background-color) !important;
  border: 1px solid var(--main-color) !important;
  padding: 1rem !important;
  margin: 0 !important;
  list-style: none;
  box-shadow: none !important;
}

/* Style submenu items */
.qodef-drop-down-second-inner ul.sub-menu li a {
  color: var(--main-color) !important;
  padding: 0.5em 0;
  display: block;
}

.qodef-mobile-header-navigation {
    border-bottom: 1px solid var(--main-color) !important;
  }
  
  


/**
  *
  *
  *
  * ###################    IMG OVERLAY
  * ###################    IMG OVERLAY
  * ###################    IMG OVERLAY
  *
  *
  *
  */


/* Base image duotone wrapper */
#qodef-page-wrapper div[class*="wp-duotone-"] figure,
#qodef-page-wrapper figure[class*="wp-duotone-"] {
    position: relative;
    display: inline-block;
    margin: 0;
    overflow: hidden;
}

/* Apply overlay ONLY if not .keep-color, not wp-duotone-unset, AND NOT on page-id-37 */
body:not(.page-id-37):not(.page-id-833) #qodef-page-wrapper figure[class*="wp-duotone-"]:not(.keep-color):not([class*="wp-duotone-unset"])::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--main-color);
    z-index: 0;
    pointer-events: none;
}

/* Apply image blend and filter ONLY if not on page-id-37 */
body:not(.page-id-37):not(.page-id-833) #qodef-page-wrapper figure[class*="wp-duotone-"]:not(.keep-color):not([class*="wp-duotone-unset"]) img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    filter: grayscale(1) brightness(1.01) contrast(1.2);
    mix-blend-mode: screen;
}

/* Figures that should keep color – always normal */
#qodef-page-wrapper figure.keep-color img,
#qodef-page-wrapper figure[class*="wp-duotone-unset"] img {
    filter: none !important;
    mix-blend-mode: normal !important;
}

  
/* Ensure the container is positioned for the overlay */
/* .qodef-header-logo-link.qodef-source--image {
    position: relative;
    display: inline-block;
    z-index: 1; 
  }
   */
  /* Add overlay behind the logo image */
  /* .qodef-header-logo-link.qodef-source--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--main-color);
    z-index: 0;
    pointer-events: none;
  }
   */