/* ==========================================================================
   EirGrid Portal Custom Theme
   Bootstrap 5.2.2 – Power Apps Portal override for portalbasictheme.css
   HOW TO USE:
   1) Upload this file as a Web File and include it AFTER 'portalbasictheme.css'.
   2) Clear server/browser cache. The cascade will override generated styles.
   ---------------------------------------------------------------------------
   Palette from brand sheet:
   - Land Green............. #00A88E
   - Sea Green.............. #006768
   - Sky Blue............... #4189C9
   - Sun Gold............... #A99966
   Support:
   - Red.................... #FB6287
   - Yellow................. #FFC341
   - Purple................. #C6A1DC
   - Orange................. #ECA154
   - Light Grey............. #BBBDC7
   - Dark Grey.............. #888B95
   Typography:
   - Headings/Body default to system sans. Plug in your brand font by enabling @font-face below.
   ========================================================================== */


/* FinalSix webfont declarations (same folder as theme + .ttf files) */
@font-face {
  font-family: "Effra";
  src: url("./iCielEffra-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "FinalSix";
  src: url("./FinalSix Hairline.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "FinalSix";
  src: url("./FinalSix Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "FinalSix";
  src: url("./FinalSix Book.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "FinalSix";
  src: url("./FinalSix Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "FinalSix";
  src: url("./FinalSix Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "FinalSix";
  src: url("./FinalSix ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "FinalSix";
  src: url("./FinalSix Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* 'Heavy' thường trùng 900 với 'Black'. Giữ cả hai nếu muốn,
   hoặc comment một cái để cố định 900 theo ý bạn. */
@font-face{
  font-family: "FinalSix";
  src: url("./FinalSix Heavy.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* Optional: self-hosted brand font (uncomment and replace src URLs)
@font-face {
  font-family: 'Brand Sans';
  src: url('/brand-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  /* Brand palette */
  --brand-white: #ffffff;
  --brand-land-green: #00A88E;
  --brand-land-green-600: #008E78;     /* hover/active */
  --brand-land-green-300: #00DBB9;     /* focus ring / tinted */

  --brand-sea-green:  #006768;
  --brand-sea-green-600: #005758;
  --brand-sea-green-300: #00A3A4;

  --brand-sky-blue:   #4189C9;
  --brand-sky-blue-600:#3274B0;
  --brand-sky-blue-300:#5D9AD1;

  --brand-sun-gold:   #A99966;
  --brand-sun-gold-600:#938452;
  --brand-sun-gold-300:#B5A87C;

  --brand-red:        #FB6287;
  --brand-red-600:    #F92E5F;
  --brand-yellow:     #FFC341;
  --brand-yellow-600: #FEB311;
  --brand-purple:     #C6A1DC;
  --brand-orange:     #ECA154;
  --brand-light-grey: #BBBDC7;
  --brand-light-grey-600:#9B9EAC;
  --brand-dark-grey:  #888B95;

  /* Typography */
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Bootstrap CSS variables (5.2.2) */
  --bs-primary:   var(--brand-land-green);
  --bs-primary-rgb: 0,168,142;
  --bs-secondary: var(--brand-sea-green);
  --bs-info:      var(--brand-sky-blue);
  --bs-warning:   var(--brand-yellow);
  --bs-danger:    var(--brand-red);
  --bs-success:   var(--brand-land-green);
  --bs-light:     var(--brand-light-grey);
  --bs-dark:      var(--brand-dark-grey);
  --bs-link-color:        var(--brand-land-green);
  --bs-link-hover-color:  var(--brand-sea-green);

  /* Power Apps Portal theme tokens mapping */
  --portalThemeColor1: var(--brand-land-green);
  --portalThemeOnColor1: #ffffff;
  --portalThemeColor2: var(--brand-sea-green);
  --portalThemeOnColor2: #ffffff;
  --portalThemeColor3: var(--brand-sky-blue);
  --portalThemeOnColor3: #ffffff;
  --portalThemeColor4: var(--brand-sun-gold);
  --portalThemeOnColor4: #111111;
  --portalThemeColor5: var(--brand-light-grey);
  --portalThemeOnColor5: #111111;
  --portalThemeColor6: var(--brand-dark-grey);
  --portalThemeOnColor6: #ffffff;
  --portalThemeColor7: var(--brand-white);
  --portalThemeOnColor7: #111111;
  --portalThemeColor8: #000000;
  --portalThemeOnColor8: #ffffff;
  --portalThemeColor9: var(--brand-sea-green-600);
  --portalThemeOnColor9: #ffffff;
}

/* ===== Base typography & links ===== */
html, body {
  font-family: var(--font-body);
  color: #111111;
  background-color: var(--brand-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: #111111;
  letter-spacing: .2px;
}
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 600; }

a:not(.btn) {
  color: var(--bs-link-color);
  text-decoration: none;
}
a:not(.btn):hover, a:not(.btn):focus {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

/* ===== Buttons ===== */
.btn,
.button1,
.button2,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
  font-family: var(--font-body);
  border-radius: .375rem;
  font-weight: 600;
}

/* Primary = Land Green */
.btn-primary,
.button1 {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.button1:hover {
  background-color: var(--brand-land-green-600) !important;
  border-color: var(--brand-land-green-600) !important;
}
.btn-primary:focus,
.button1:focus {
  box-shadow: 0 0 0 .2rem rgba(0,168,142,.25) !important;
}

/* Secondary = Sea Green (outline variant for .button2) */
.btn-secondary,
.button2,
.btn-default {
  background-color: transparent !important;
  border-color: var(--bs-secondary) !important;
  color: var(--bs-secondary) !important;
}
.btn-secondary:hover,
.button2:hover,
.btn-default:hover {
  background-color: var(--bs-secondary) !important;
  color: #fff !important;
}
.btn-secondary:focus,
.button2:focus,
.btn-default:focus {
  box-shadow: 0 0 0 .2rem rgba(0,103,104,.25) !important;
}

/* Semantic buttons */
.btn-success    { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
.btn-danger     { background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; }
.btn-warning    { background-color: var(--bs-warning) !important; border-color: var(--bs-warning) !important; color: #111 !important; }
.btn-info       { background-color: var(--bs-info) !important;    border-color: var(--bs-info) !important; }

/* ===== Navbar / Header ===== */
.static-top.navbar-dark {
  background-color: var(--brand-sea-green) !important;
}
.navbar-dark .navbar-nav > li > a,
.navbar-dark .navbar-nav > li.dropdown > a,
.static-top.navbar-dark .navbar-brand a,
.static-top.navbar-dark .navbar-brand a span,
.static-top.navbar-dark .navbar-brand a h1.siteTitle {
  color: #fff !important;
  font-family: var(--font-body);
}
.navbar-dark .navbar-nav > li > a:hover,
.navbar-dark .navbar-nav > li > a:focus,
.navbar-dark .navbar-nav > li.dropdown > a:hover,
.navbar-dark .navbar-nav > li.dropdown > a:focus {
  background-color: transparent;
  color: var(--brand-land-green) !important;
  text-decoration: underline;
}
.navbar-dark .navbar-toggler {
  border-color: rgba(255,255,255,.6) !important;
  background-color: var(--brand-sea-green-600) !important;
}

/* Dropdown */
.navbar-dark .navbar-nav .show.dropdown-menu,
.dropdown-menu {
  background-color: var(--brand-sea-green) !important;
  border-color: var(--brand-sea-green) !important;
}
.navbar-dark .navbar-nav .show.dropdown-menu > li > a,
.dropdown-menu > li > a {
  color: #fff !important;
}
.navbar-dark .navbar-nav .show.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:hover {
  background-color: var(--brand-land-green) !important;
  color: #fff !important;
}

/* ===== Sections / Cards / Forms ===== */
.sectionPrimaryColor {
  background-color: var(--brand-land-green) !important;
  color: #fff !important;
}
.sectionPrimaryColor a { color: #fff !important; text-decoration: underline; }

.card,
.modal-content,
.entitylist,
.crmEntityFormView,
.popover-content {
  background-color: #fff !important;
  color: #111 !important;
  border: 1px solid #EEF0F4 !important;
  border-radius: .5rem;
}

.card-header {
  background-color: #F7F9FC !important;
  color: #111 !important;
  font-weight: 600;
}

.form-control, .form-select, input, select, textarea {
  background-color: #fff !important;
  color: #111 !important;
  border-color: #E5E7EB !important;
  border-radius: .375rem !important;
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--brand-land-green) !important;
  box-shadow: 0 0 0 .2rem rgba(0,168,142,.15) !important;
}

/* Breadcrumb & nav tabs */
.breadcrumb > li a { color: var(--brand-sea-green) !important; }
.breadcrumb > .active { color: #111 !important; }
.nav-tabs .nav-link { color: var(--brand-sea-green) !important; }
.nav-tabs .nav-link.active { color: var(--brand-sea-green) !important; border-bottom: 2px solid var(--brand-sea-green) !important; }

/* ===== Footer ===== */
footer,
footer .footer-bottom {
  background: #e6eded;
  color: #212121 !important;
  font-family: "Effra", Arial, sans-serif !important;
}

footer .footer-bottom ul li a {
  color: #212121 !important;
  font-family: "Effra", Arial, sans-serif !important;
}

footer .footer-bottom li {
  margin-bottom: 20px;
}

.social-container {
  display: flex;
  justify-content: end;
  gap: 16px;
}

@media (max-width: 768px) {
  .social-container {
    display: flex;
    justify-content: center;
    gap: 16px;
  }
}

#copyright {
  font-family: "Effra", Arial, sans-serif !important;
}

#accessibilityLinkContainer {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
/* footer .footer-bottom { background-color: var(--brand-sea-green-600) !important; } */

/* ===== Utilities ===== */
.bg-land-green   { background-color: var(--brand-land-green) !important; }
.bg-sea-green    { background-color: var(--brand-sea-green) !important; }
.bg-sky-blue     { background-color: var(--brand-sky-blue) !important; }
.bg-sun-gold     { background-color: var(--brand-sun-gold) !important; }
.bg-support-red  { background-color: var(--brand-red) !important; }
.bg-support-yellow{ background-color: var(--brand-yellow) !important; }
.bg-support-purple{ background-color: var(--brand-purple) !important; }
.bg-support-orange{ background-color: var(--brand-orange) !important; }
.bg-light-grey   { background-color: var(--brand-light-grey) !important; }
.bg-dark-grey    { background-color: var(--brand-dark-grey) !important; }

.text-land-green { color: var(--brand-land-green) !important; }
.text-sea-green  { color: var(--brand-sea-green) !important; }
.text-sky-blue   { color: var(--brand-sky-blue) !important; }
.text-sun-gold   { color: var(--brand-sun-gold) !important; }
.text-support-red{ color: var(--brand-red) !important; }
.text-support-yellow{ color: var(--brand-yellow) !important; }
.text-support-purple{ color: var(--brand-purple) !important; }
.text-support-orange{ color: var(--brand-orange) !important; }

.border-land-green{ border-color: var(--brand-land-green) !important; }
.border-sea-green { border-color: var(--brand-sea-green) !important; }
.border-sky-blue  { border-color: var(--brand-sky-blue) !important; }
.border-sun-gold  { border-color: var(--brand-sun-gold) !important; }
.border-light-grey{ border-color: var(--brand-light-grey) !important; }
.border-dark-grey { border-color: var(--brand-dark-grey) !important; }

/* Badges & alerts for quick wins */
.badge.bg-primary  { background-color: var(--brand-land-green) !important; }
.badge.bg-secondary{ background-color: var(--brand-sea-green) !important; }
.alert-primary     { color:#083A33; background-color:#E6FBF6; border-color:#B6F1E6; }
.alert-secondary   { color:#063436; background-color:#E6F4F4; border-color:#B7E6E7; }
.alert-info        { color:#0D3353; background-color:#E9F3FC; border-color:#C7E0F7; }
.alert-warning     { color:#4D3D08; background-color:#FFF7E3; border-color:#FFE3A6; }
.alert-danger      { color:#5A0F24; background-color:#FFE9F0; border-color:#FFC3D1; }


/* === NAVBAR OVERRIDE: white background + 106px height ===================== */
.divider-vertical {
  display: none !important;
}
.navbar-expand-xl.navbar.navbar-dark.static-top {
  background-color: var(--brand-white) !important;
  color: #111 !important;
  border-bottom: 1px solid #EEF0F4 !important; /* subtle divider */
  font-family: "Effra", "Trebuchet MS", Arial, sans-serif !important;
  font-size: 18px !important;
  box-shadow: none !important;
}

/* Switch link colors to dark-on-white */
.navbar-expand-xl.navbar.navbar-dark.static-top .navbar-nav > li > a,
.navbar-expand-xl.navbar.navbar-dark.static-top .navbar-nav > li.dropdown > a,
.navbar-expand-xl.navbar.navbar-dark.static-top .navbar-brand a,
.navbar-expand-xl.navbar.navbar-dark.static-top .navbar-brand a span,
.navbar-expand-xl.navbar.navbar-dark.static-top .navbar-brand a h1.siteTitle {
  color: #111 !important;
  font-family: "Effra", Arial, sans-serif !important;
  font-size: 18px !important;
}

/* Hover state uses brand accent */
.navbar-expand-xl.navbar.navbar-dark.static-top .navbar-nav > li > a:hover,
.navbar-expand-xl.navbar.navbar-dark.static-top .navbar-nav > li > a:focus,
.navbar-expand-xl.navbar.navbar-dark.static-top .navbar-nav > li.dropdown > a:hover,
.navbar-expand-xl.navbar.navbar-dark.static-top .navbar-nav > li.dropdown > a:focus {
  background-color: transparent !important;
  color: var(--brand-sea-green) !important;
  text-decoration: underline;
}

/* Toggler on white background */
.navbar-expand-xl.navbar.navbar-dark.static-top .navbar-toggler {
  border-color: #CBD5E1 !important;
  background-color: var(--brand-land-green-600) !important;
}

/* Height = 106px on desktop, keep mobile natural */
@media (min-width: 1200px) {
  .navbar-expand-xl.navbar.navbar-dark.static-top {
    min-height: 106px !important;
  }
  .navbar-expand-xl.navbar.navbar-dark.static-top .navbar-brand,
  .navbar-expand-xl.navbar.navbar-dark.static-top .nav-link {
    line-height: 106px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
/* ======================================================================== */
/* Form controls & labels use Effra font */
h1,h2,h3,h4,h5,h6,
p,
label,
.form-label,
input,
select,
textarea,
.form-control,
.form-select {
  font-family: "Effra", "Trebuchet MS", Arial, sans-serif !important;
}

#homepageContent {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#bioSection p {
  font-size: 25px;
  color: var(--brand-sea-green);
}

#bioSection .bio-section {
  height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    margin: auto;
    text-align: center;
}

.hero-banner {
  min-height: 632px;
  background-image: url('./hero-banner-1.png');
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 60px;
  color: rgb(3 87 89);
}

.hero-banner h1,
.hero-banner p,
.hero-banner span {
  color: rgb(3 87 89) !important;
}

.hero-button {
  width: fit-content;
  display: flex;
  align-items: center;
  height: 56px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 16px;
  padding-bottom: 16px;
  border: solid 4px #444954 !important;
  border-radius: 0px;
}

.hero-button:hover {
  border: solid 4px var(--brand-orange) !important;
  background-color: var(--brand-orange);
}

.hero-button:focus,
.hero-button:active {
  background-color: #444954 !important;
  border: solid 4px #444954 !important;
  color: white !important;
}