/*--------------------------------------------------------------
FONTS
--------------------------------------------------------------*/
@font-face {
  font-family: 'Karla';
  src: url('../fonts/Karla/static/Karla-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Karla Bold';
  src: url('../fonts/Karla/static/Karla-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'BentonModDisp Bold';
  src: url('../fonts/BentonModernDisplay/BentonModDisp-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

/*--------------------------------------------------------------
ROOT VARIABLES
--------------------------------------------------------------*/
:root {
  font-size: 16px;
  line-height: 150%;

  /* Font Families */
  --bs-font-sans-serif: "Karla", system-ui, -apple-system, sans-serif;
  --bs-font-secondary: "BentonModDisp Bold", sans-serif;
  --bs-font-tertiary: "Karla Bold", sans-serif;

  /* Font Sizes */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base-l: 16px;
  --fs-base:  20px;
  --fs-md: 18px;
  --fs-lg: 24px;
  --bs-h1-font-size: 60px;
  --bs-h2-font-size: 50px;
  --bs-h3-font-size: 32px;
  --bs-h4-font-size: 24px;
  --bs-h5-font-size: 18px;
  --bs-h6-font-size: 16px;

  /* Font Weights */
  --bs-font-thin: 100;
  --bs-font-light: 300;
  --bs-font-normal: 400;
  --bs-font-bold: 700;
  --bs-font-black: 900;

  /* Spacing */
  --space-unit: 30px;
  --space-xxs: 5px;
  --space-xs: 10px;
  --space-sm: 24px;
  --space-m: 32px;
  --space-md: 32px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-xxl: 80px;
  --space-xxxl: 112px;

  /* Container Widths */
  --container-sm: 540px;
  --container-md: 720px; 
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;

  /* For shadow ONLY on the top edge */
--shadow-top: 0 -5px 10px -6px rgba(0, 0, 0, 0.4);

/* For shadow ONLY on the bottom edge (your current one is correct) */
--shadow-bottom: 0 8px 10px -6px rgba(0, 0, 0, 0.4);

/* For a standard shadow on all sides (if needed) */
--shadow-standard: 0 0 15px rgba(0, 0, 0, 0.2);

  /* Colors */
  --color-primary: #048D5B;
  --color-primary-dark: #054B0F;
  --color-primary-soft: #cde5dc;
  --color-secondary: #F07522;
  --color-secondary-dark: #d26b1f;
  --color-secondary-soft: #fae5d2;
  --color-tertiary: #FFFDF6;
  --color-highlight: #00CD82;
  --color-gray-light: #BEBEBE;

  --color-gray: #eeeae7;
  --color-black: #242424;
  --color-white: #FFFFFF;
  --color-light: #F6F3EA;
  --color-yellow: #F7F3E2;
  --color-muted: #868e96;
  --color-green: #048D5B;
  --color-orange: #F07522;
  --color-green-light: #00CD82;
  --color-green-highlight: #effaef;
  --color-blue-green: #00CD82;
  --color-text: #242424;
  --color-text-light: #F6F3EA;
  --border-radius: 5px;
}

/* Base Typography */
body {
  font-size: var(--fs-base);
  font-family: var(--bs-font-sans-serif);
  font-weight: var(--bs-font-normal);
  background-color: var(--color-white);
}

body, body * {
}
strong, b {
  font-family: var(--bs-font-tertiary);
}
.text-body {
  font-family: var(--bs-font-sans-serif);
}
.text-head {
  font-family: var(--bs-font-secondary);
}
.text-label {
  font-family: var(--bs-font-tertiary);
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.text-head a:hover{
  text-decoration: none;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .text-head {
  line-height: 100%;
}

/* Responsive Headings */
h1, .h1 {
  font-size: var(--bs-h3-font-size);
  margin-bottom: var(--space-m);
  font-family: var(--bs-font-secondary);
  font-weight: var(--bs-font-normal);

}

h2, .h2 {
  font-size: var(--bs-h3-font-size);
  margin-bottom: var(--space-xs);
  font-family: var(--bs-font-secondary);
  font-weight: var(--bs-font-normal);
}

h3, .h3 {
  font-size: var(--bs-h4-font-size);
  margin-bottom: var(--space-xs);
  font-family: var(--bs-font-secondary);
  font-weight: var(--bs-font-normal);
}

h4, .h4 {
  font-size: var(--bs-h4-font-size);
  margin-bottom: var(--space-xs);
  font-family: var(--bs-font-secondary);
  font-weight: var(--bs-font-normal);
}

h5, .h5 {
  font-size: var(--bs-h5-font-size);
  margin-bottom: var(--space-xs);
  font-family: var(--bs-font-secondary);
  font-weight: var(--bs-font-normal);
}

h6, .h6 {
  font-size: var(--bs-h6-font-size);
  margin-bottom: var(--space-xs);
  font-family: var(--bs-font-secondary);
  font-weight: var(--bs-font-normal);
}


@media (min-width: 992px) {
  
}

@media (min-width: 1200px) {
  h1, .h1 {
    font-size: var(--bs-h1-font-size);
    margin-bottom: var(--space-lg);
  }

  h2, .h2 {
    font-size: var(--bs-h2-font-size);
    margin-bottom: var(--space-xs);
  }

  h3, .h3 {
    font-size: var(--bs-h3-font-size);
    margin-bottom: var(--space-xs);
  }

  h4, .h4 {
    font-size: var(--bs-h4-font-size);
    margin-bottom: var(--space-xs);
  }

  h5, .h5 {
    font-size: var(--bs-h5-font-size);
    margin-bottom: var(--space-xs);
  }

  h6, .h6 {
    font-size: var(--bs-h6-font-size);
    margin-bottom: var(--space-xs);
  }
}



.display-1,
.display-2 {
  font-family: var(--bs-font-secondary);
  font-weight: var(--bs-font-normal);
}

.display-3,
.display-4 {
  font-family: var(--bs-font-sans-serif);
  font-weight: var(--bs-font-light);
}

.text-muted {
  color: var(--color-muted) !important;
}

/* Responsive Paragraphs */
p {
  margin-bottom: var(--space-sm);
  /*max-width: 70ch;  Optimal line length for readability */
}

a {
  text-decoration: none;
  color: var(--color-primary);
}
a:hover {
  color: var(--color-highlight);
  text-decoration: underline;
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--bs-line-height-loose);
}
.bg-yellow {
  background-color: var(--color-yellow);
}
.bg-white {
  background-color: var(--color-white);
}
/* Responsive Spacing Utilities */
.mt-responsive { margin-top: var(--space-md); }
.mb-responsive { margin-bottom: var(--space-md); }
.my-responsive { 
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}
.p-responsive { padding: var(--space-md); }

/* >= 768 px ➜ tablets (portrait) & small laptops */
@media (min-width: 768px) {
  /* Responsive Paragraphs */
  p {
    margin-bottom: var(--space-sm);
    /*max-width: 70ch;  Optimal line length for readability */
  }
}

/* Paddings */

.py-5 {
  padding-top: var(--space-lg) !important;
  padding-bottom: var(--space-lg) !important;
}
.pb-5 {
  padding-bottom: var(--space-lg) !important;
}
.pt-5 {
  padding-top: var(--space-lg) !important;
}
.py-4 {
  padding-top: var(--space-md) !important;
  padding-bottom: var(--space-md) !important;
}
.pb-4 {
  padding-bottom: var(--space-md) !important;
}
.pt-4 {
  padding-top: var(--space-md) !important;
}
.py-3 {
  padding-top: var(--space-sm) !important;
  padding-bottom: var(--space-sm) !important;
}
.pb-3 {
  padding-bottom: var(--space-sm) !important;
}
.pt-3 {
  padding-top: var(--space-sm) !important;
}

@media (min-width: 768px) { 
  .py-5 {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
  }
  .pb-5 {
    padding-bottom: var(--space-xl) !important;
  }
  .pt-5 {
    padding-top: var(--space-xl) !important;
  }
  .py-4 {
    padding-top: var(--space-lg) !important;
    padding-bottom: var(--space-lg) !important;
  }
  .pb-4 {
    padding-bottom: var(--space-lg) !important;
  }
  .pt-4 {
    padding-top: var(--space-lg) !important;
  }
  .py-3 {
    padding-top: var(--space-m) !important;
    padding-bottom: var(--space-m) !important;
  }
  .pb-3 {
    padding-bottom: var(--space-m) !important;
  }
  .pt-3 {
    padding-top: var(--space-m) !important;
  }
}

/* Container Responsiveness */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.container-sm {
  max-width: var(--container-lg);
}

/* Responsive Text Utilities */
.text-responsive {
  font-size: var(--fs-base);
}

.text-sm-responsive {
  font-size: var(--fs-sm);
}

.text-lg-responsive {
  font-size: var(--fs-lg);
}
.border-bottom {
  border-bottom-color: var(--color-black) !important;
  border-bottom-width: 1px !important;
}
/* Responsive Lists */
ul, ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

ul {
  list-style: disc;
}

li {
  margin-bottom: var(--space-sm);
}

/* Responsive Blockquotes */
blockquote {
  font-size: var(--fs-md);
  padding: var(--space-sm);
  margin: 0;
  line-height: 180%;
}

/* Media Query Breakpoints */
@media (min-width: 576px) {
  .container {
    max-width: var(--container-sm);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}

@media (min-width: 992px) {
  .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: var(--container-xl);
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: var(--container-xxl);
  }
}

/* Responsive Form Elements */
.form-control,
.form-select {
  font-size: var(--fs-base);
  border-radius: 5px;
  border: 1px solid var(--color-text);
  font-size: var(--fs-base);
}

.form-control::placeholder {
  color: var(--color-gray-light);      /* custom kulay */
  opacity: 1;          /* alisin ang default na “faded” look (Firefox) */
}

/* Responsive Buttons */
.btn {
  font-size: var(--fs-base);
  font-family: var(--bs-font-tertiary);
  border-radius: var(--border-radius);
  border-width: 1px;
  border-style: solid;
}
.btn::before {
  content: none;
}
.btn:hover,
.btn:active,
.btn:focus {
  opacity: 0.75;
  text-decoration: none !important;
  border-color: var(--color-green-highlight);
}

.btn span,
.btn {
  font-weight: bold;
}

.btn-sm {
  padding: calc(var(--space-xs) * 0.5) var(--space-xs);
  font-size: var(--fs-sm);
}

.btn-lg {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-lg);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border: solid 1px var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}
.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-light);
  border-color: var(--color-secondary);
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
  background-color: var(--color-secondary);
  color: var(--color-text-light);
}
.btn-tertiary {
  background-color: var(--color-tertiary);
  color: var(--color-text);
  border-color: var(--color-tertiary);
}
.btn-tertiary:hover,
.btn-tertiary:active,
.btn-tertiary:focus {
  background-color: var(--color-tertiary);
  color: var(--color-text);
 
}
/* Green outline button */
.btn-outline-primary {
  background-color: transparent;
  color: var(--color-primary);
  border: solid 1px var(--color-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border: solid 1px var(--color-primary);
}

/* Drupal */
.node__content {
  font-size: var(--fs-base);
} 

/* Page Layout */
#layout-builder-modal form {
  color: black;
}
.layout-builder__message .alert-wrapper,
.alert-wrapper[data-drupal-messages] {
  max-height: 10vh;
}
.layout-builder__message .alert-wrapper .alert-heading,
.alert-wrapper[data-drupal-messages] .alert-wrapper .alert-heading  {
  font-size: 1rem;
}

.layout-builder-form input[type="submit"] {
  width: auto;
  margin-bottom: 5px;
}

/* ALERT */
.alert-heading {
  font-size: 1rem;
  margin-bottom: 5px;
}
.alert svg {
  height: 1rem;
}

/*--------------------------------------------------------------
MISC EXTENSIONS FROM ORIGINAL
--------------------------------------------------------------*/
.border-bottom {
  border-bottom-color: var(--color-black) !important;
  border-bottom-width: 1px !important;
}

blockquote {
  font-size: var(--fs-md);
  padding: var(--space-sm);
  margin: 0;
  line-height: 180%;
}

ul, ol {
  padding-left: var(--space-sm);
  margin-bottom: var(--space-sm);
}

li {
  margin-bottom: var(--space-xs);
}

.display-1, .display-2 {
  font-family: var(--bs-font-secondary);
  font-weight: var(--bs-font-normal);
}
.display-3, .display-4 {
  font-family: var(--bs-font-sans-serif);
  font-weight: var(--bs-font-light);
}

.text-responsive {
  font-size: var(--fs-base);
}
.text-sm-responsive {
  font-size: var(--fs-sm);
}
.text-lg-responsive {
  font-size: var(--fs-lg);
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.container-sm {
  max-width: var(--container-lg);
}

@media (min-width: 576px) {
  .container { max-width: var(--container-sm); }
}
@media (min-width: 768px) {
  .container { max-width: var(--container-md); }
}
@media (min-width: 992px) {
  .container { max-width: var(--container-lg); }
}
@media (min-width: 1200px) {
  .container { max-width: var(--container-xl); }
}
@media (min-width: 1400px) {
  .container { max-width: var(--container-xxl); }
}

/* Drupal-specific styles */
.node__content { font-size: var(--fs-base); }

/* Layout builder */
#layout-builder-modal form { color: black; }
.layout-builder__message .alert-wrapper,
.alert-wrapper[data-drupal-messages] { max-height: 10vh; }
.layout-builder__message .alert-wrapper .alert-heading,
.alert-wrapper[data-drupal-messages] .alert-wrapper .alert-heading { font-size: 1rem; }
.layout-builder-form input[type="submit"] { width: auto; margin-bottom: 5px; }

/* Alert */
.alert-heading { font-size: 1rem; margin-bottom: 5px; }
.alert svg { height: 1rem; }

/* Additional spacing utilities */
.mt-responsive { margin-top: var(--space-md); }
.mb-responsive { margin-bottom: var(--space-md); }
.my-responsive {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}
.p-responsive { padding: var(--space-md); }

/* Card styles */
.card {
  background-color: var(--color-yellow);
  border-radius: 10px;
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.35s ease;
}
.card.card-horizontal {
  /*background-color: transparent !important;*/
}
.card.bg-white,
.bg-yellow .card {
  background-color: var(--color-white);
}
.bg-yellow .card.card-horizontal {
  background-color: var(--color-white) !important;
}
.card .card-title {
  margin-top: 0;
}
.card .card-title,
.card .card-title a {
  color: var(--color-black);
  font-size: var(--bs-h3-font-size);
  text-decoration: none !important;
  line-height: 150%;
}
.card .card-img, 
.card .card-img-top,
.card .field--name-field-card-image img {
  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
}
.card.card-horizontal .card-img,
.card.card-horizontal .card-img-top,
.card.card-horizontal .field--name-field-card-image img {
  border-bottom-right-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}
.card.card-horizontal .card-body {
    padding-bottom: var(--space-xl);
    background-color: transparent;
}
.card .card-text,
.card .card-text p {
  margin-bottom: 5px;
  color: var(--color-black);
  font-size: var(--fs-base);
  text-decoration: none !important;
}
.card .card-icon img {
  height: 75px;
  width: auto;
}
.card .card-link {
  color: var(--color-black);
  font-weight: bold;
  font-family: var(--bs-font-tertiary);
}
.card .card-link i {
  height: 20px;
}
.card .card-body {
  padding: var(--space-md);
}
.card .card-body p a {
  color: var(--color-green);
}
.card:hover {
  background-color: var(--color-primary);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}
.card.card-horizontal:hover {
  background-color: transparent;
}
.card.card-horizontal:hover {
  background-color: transparent;
}
.card:not(.card-horizontal):hover .card-title,
.card:not(.card-horizontal):hover .card-title a,
.card:not(.card-horizontal):hover .card-text,
.card:not(.card-horizontal):hover .card-text p,
.card:not(.card-horizontal):hover .card-link {
  color: var(--color-white);
}

.card.card-vertical .field--name-field-card-image img,
.card > img {
  height: 350px;
  width: 100%;
  object-fit: cover;
}

.col-lg-4 .card.card-vertical .field--name-field-card-image img, .card > img,
.col-md-4 .card.card-vertical .field--name-field-card-image img, .card > img {
  height: 300px;
}
.card.card-horizontal .field--name-field-card-image img {
  height: auto;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.card-wrapper .contextual {
    top: -30px;
}
.card-wrapper:hover {
  text-decoration: none;
}

.alt-card-container .card .card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.alt-card-container .card .card-body .card-icon {
  order: 2;
  width: 20%;
}
.alt-card-container .card .card-body .card-title {
  order: 1;
  width: 75%;
}
.alt-card-container .card .card-body .card-text {
  order: 3;
}

.no-hover-card-container .card:not(.card-horizontal):hover .card-title, 
.no-hover-card-container .card:not(.card-horizontal):hover .card-title a, 
.no-hover-card-container .card:not(.card-horizontal):hover .card-text, 
.no-hover-card-container .card:not(.card-horizontal):hover .card-text p, 
.no-hover-card-container .card:not(.card-horizontal):hover .card-link {
    color: var(--color-black);
}
.alt-card-container .card:hover {
    background-color: var(--color-white);
}
.shadow-top {
  box-shadow: var(--shadow-top);
}
.shadow-bottom {
  box-shadow: var(--shadow-bottom);
}
#main-wrapper {
  max-width: 100%;
  overflow-x: hidden;
}
.iframe-wrapper {
  width: 100%;
  overflow: hidden;
}

.auto-height-iframe {
  width: 100%;
  border: none;
}

.scroll-animate {
  opacity: 0;
}
.scroll-animate.animate__animated {
  opacity: 1;
}

.sr-initial {
 opacity: 0;
}