/* ===== GLOBAL ===== */
:root{
  --nav-h: 80px;
}

/* Consistent bottom breathing room across pages */
.content-wrapper {
  padding-bottom: 130px;
}

body {
  background: #1e3a3e;
  background-attachment: fixed;    
  background-repeat: no-repeat;
  background-size: cover;

  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}


/* another logo lime */
.logo_another{ color:#B4F701; font-weight:600; font-size:20px; }
.logo_consulting{ color:#fff; font-weight:300; font-size:20px; }

/* Navbar */
.navbar{ min-height: var(--nav-h); }
.navbar-light .navbar-nav .nav-link{
  color:#CEE6E9;
  font-weight:300;
  font-size:16px;
}

/* Base — at the very top: perfectly blended with your fixed gradient */
.navbar {
  background: transparent;
  box-shadow: none;
  border-bottom: none;
  transition: background .3s ease, box-shadow .3s ease;
}

/* Only when scrolled: add translucent glass + shadow */
.navbar.scrolled {
  background: rgba(24,49,53,0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
/* Doodle underline */
.navbar a.nav-link{
  position:relative; display:inline-block;
  color:#CEE6E9 !important; text-decoration:none;
  padding:.5rem .5rem;
}
.navbar a.nav-link::after{
  content:""; position:absolute; bottom:3px; left:.5rem; right:.5rem; height:10px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10' preserveAspectRatio='none'>\
<path d='M0 6 C 20 2, 40 10, 60 6 S 100 2, 120 6' fill='none' stroke='%23CEE6E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'/>\
</svg>");
  background-repeat:repeat-x; background-size:120px 10px;
  transform:scaleX(0); transform-origin:left; transition:transform .28s ease; pointer-events:none;
}
.navbar a.nav-link:hover::after,
.navbar a.nav-link.active::after,
.navbar a.nav-link[aria-current="page"]::after{ transform:scaleX(1); }

.navbar, .navbar .navbar-collapse, .navbar .navbar-nav, .navbar .nav-item{ overflow:visible; }
.navbar img.nav-link{ padding:0; display:inline-block; }

/* Spacing between menu items */
.navbar .navbar-nav{ --menu-gap:1.1rem; gap:var(--menu-gap); }
@media (max-width: 767.98px){ .navbar .navbar-nav{ --menu-gap:.8rem; } }

/* Mobile navbar collapse - no gap */
@media (max-width: 767.98px) {
  .navbar-collapse {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Burger button */
.navbar-toggler{
  background-color: rgba(255,255,255,0.1);
  border:none; border-radius:6px;
}
.navbar-light .navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(180,247,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Make the theme toggle align perfectly with nav links */
.navbar .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem; /* same vertical rhythm as .nav-link */
  height: 100%;
  line-height: 1;
  vertical-align: middle;
}

.navbar .theme-toggle img {
  display: block;
  width: 20px;
  height: 20px;
}


/* Mobile dropdown overlay */
.navbar .container{ position:relative; }
@media (max-width: 767.98px){
  .navbar-collapse{
    position:absolute; top:100%; left:0; right:0;
    background: rgba(24,49,53,0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    padding: .75rem 1rem; z-index:2029;
  }
  .navbar-nav .nav-link{ padding:.5rem 0; }
}
/* Global collapse speed */
.collapse:not(.show),
.collapsing{
  transition: height .10s cubic-bezier(.2,.7,.2,1) !important; /* was .22s ease */
}

@media (max-width: 767.98px){
  /* Mobile panel: fade + height in sync, but faster */
  #collapsingNavbar3{
    will-change: height, opacity;
  }
  #collapsingNavbar3.collapsing{
    opacity: 0;
    transition: height .10s cubic-bezier(.2,.7,.2,1),
                opacity .10s cubic-bezier(.2,.7,.2,1) !important;
  }
  #collapsingNavbar3.collapse.show{
    opacity: 1;
    transition: height .10s cubic-bezier(.2,.7,.2,1),
                opacity .10s cubic-bezier(.2,.7,.2,1) !important;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .collapsing{ transition: none !important; }
}

.navbar-collapse.show{ z-index:3000 !important; }



.display-6 {
font-family: "Josefin Sans", sans-serif;
font-weight: 700;
color: #CEE6E9;
margin-top:60px;
}
.header_text {
  font-family: "Josefin Sans", sans-serif;
font-weight: 300;
color: #CEE6E9;
font-size:28px;
}


/* Center text blocks */
.center_text_title{ font-size:16px; font-weight:600; color:#B4F701; }
.center_text{ font-size:26px; font-weight:300; color:#fff; margin-top:-10%}

/* Curved text */
.center_text_choose{ font-size:54px; color:#CEE6E9; }
text{ fill:#CEE6E9; font-family:'Josefin Sans',sans-serif; font-size:54px; }

/* Theme toggle button */
.theme-toggle{
  background:transparent; border:none; cursor:pointer; padding:0; margin-left:.5rem;
  position:relative; z-index:5000; line-height:0;
}
.theme-toggle img{ display:block; width:22px; height:22px; pointer-events:none; }
.navbar-collapse.show .theme-toggle{ z-index:5001; }

/* ================= LIGHT MODE (global bits) ================= */
html[data-theme="light"] body {
 background: #1e3a3e;
  background-attachment: fixed;   /* keeps gradient fixed while scrolling */
  background-repeat: no-repeat;
  background-size: cover;

  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
}
/* Light mode: only glassy when scrolled */
html[data-theme="light"] .navbar.scrolled{
  background: rgba(206,230,233,0.92) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

@media (max-width:767.98px){
  html[data-theme="light"] .navbar-collapse,
  html[data-theme="light"] .navbar-collapse.collapsing,
  html[data-theme="light"] .navbar-collapse.show{
    background: rgba(206,230,233,0.98) !important;
  }
}
html[data-theme="light"] .navbar-light .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23457278' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
html[data-theme="light"] #col_12_header{ background-color:#E9F4F5 !important; }
html[data-theme="light"] .logo_another,
html[data-theme="light"] .logo_consulting{ color:#244A50 !important; }
html[data-theme="light"] .navbar a.nav-link{ color:#244A50 !important; }

/* Global lime var for light mode (timeline uses it) */
html[data-theme="light"]{ --lime:#457278; }

/* Light mode: doodle underline in #244A50 */
html[data-theme="light"] .navbar a.nav-link::after{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10' preserveAspectRatio='none'>\
  <path d='M0 6 C 20 2, 40 10, 60 6 S 100 2, 120 6' fill='none' stroke='%23244A50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'/>\
</svg>");
}

html[data-theme="light"] .center_text_title,
html[data-theme="light"] .center_text {
  color: #30636A !important;
}

html[data-theme="light"] .filter_text {
  color: #30636A !important;
}

html[data-theme="light"] .display-6,
html[data-theme="light"] .header_text {
  color: #30636A !important;
}


/* Hide light version by default */
.light-img { display: none !important; }
.dark-img { display: block !important; }

/* When light theme is active */
html[data-theme="light"] .light-img { display: block !important; }
html[data-theme="light"] .dark-img  { display: none !important; }

/* Hide both by default to control visibility via theme */
#themeIconOn,
#themeIconOff { display: none; }

/* Dark / brand mode → show “light_on” icon */
html[data-theme="brand"] #themeIconOn { display: block; }

/* Light mode → show “light_off” icon */
html[data-theme="light"] #themeIconOff { display: block; }

.btn-history,
.btn-employees {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  color: #D0E7EA;
  border: none;
  padding: 0.3rem 1rem;
  font-size: 16px;
  position: relative;
  left: 15px;   /* move right by 10 px — adjust as you like */
}

/* History button (left side) */
.btn-history {
  background-color: #61868B;
  border-radius: 25px 0 0 25px;
  position: relative; /* optional, safe to keep */
}

/* Employees button (right side) */
.btn-employees {
  background-color: #467278;
  border-radius: 0 25px 25px 0;
}

/* Hover states */
.btn-group .btn.btn-history:hover {
  background-color: #6A9297 !important;
}
.btn-group .btn.btn-employees:hover {
  background-color: #4F8188 !important;
}

/* Make the two buttons equal width, matching the longer one */
.btn-group.equal-width{
  display: inline-grid !important;    /* override Bootstrap's inline-flex */
  grid-template-columns: 1fr 1fr;     /* two equal columns */
  gap: 0;                             /* keep them touching */
}

.btn-group.equal-width .btn{
  width: auto;                        /* let grid handle width */
  justify-content: center;            /* center the text inside */
  white-space: nowrap;                /* keep labels on one line */
  /* Optional: give them a minimum size */
  /* min-width: 150px; */
}

.btn-group.equal-width { margin-right: 30px; }
.curved-wrap{
  width:100%;
  overflow:hidden;        /* crop sides when we enforce a min width */
}

/* Base text styling (THIS IS FOR MOBILE) */
.curved-title text {
  fill: #CEE6E9;
  font-family: "Yeseva One", serif;
  font-weight: 400;
  letter-spacing: .04em;

  /* === THIS IS THE FIX === */
  
  /* Base (Mobile) font-size: 
     Needs to be a BIG number. Try 69, 75, or even 80. */
  font-size: 69; /* <--- NO 'px' AND A BIG NUMBER */
}
/* Normal size on desktop, shrink nicely on small screens */
.cya-img{
  max-width: 900px;   /* normal desktop size */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  margin-bottom:5%;
}

/* If you use: <html data-theme="light"> ... */
html[data-theme="light"] .cya-img { content: url("/img/cya_dark.svg"); }
html[data-theme="dark"]  .cya-img { content: url("/img/cya.svg"); }

/* If you instead use body.light / body.dark, use this: */
/* body.light .cya-img { content: url("/img/cya_dark.svg"); } */
/* body.dark  .cya-img { content: url("/img/cya.svg"); } */

/* Tablet font-size */
@media (min-width: 577px) {
  .curved-title text {
    /* A medium number */
    font-size: 52;
  }
}

/* Desktop font-size */
@media (min-width: 993px) {
  .curved-title text {
    /* A smaller number */
    font-size: 30;
  }
}
/* === KEEP YOUR EXISTING RULES BELOW === */

/* Show desktop arc by default */
.t-desktop{ display:inline; }
.t-tablet,
.t-mobile{ display:none; }

/* Tablet */
@media (max-width: 992px){
  .t-desktop{ display:none; }
  .t-tablet{ display:inline; }
}

/* Mobile */
@media (max-width: 576px){
  .t-tablet{ display:none; }
  .t-mobile{ display:inline; }
}

@media (min-width: 992px){
  .navbar .navbar-nav{ flex-wrap: nowrap; }
}

html[data-theme="light"] .curved-title .choose_text {fill: #30636A;}

/* === Mobile navbar dropdown — LIGHT MODE, translucent === */
@media (max-width: 991.98px){

  /* Panel background with transparency + glassy blur */
  html[data-theme="light"] .navbar-collapse,
  html[data-theme="light"] .navbar-collapse.collapsing,
  html[data-theme="light"] .navbar-collapse.show,
  body.light .navbar-collapse,
  body.light .navbar-collapse.collapsing,
  body.light .navbar-collapse.show,
  .theme-light .navbar-collapse,
  .theme-light .navbar-collapse.collapsing,
  .theme-light .navbar-collapse.show{
    /* #CEE6E9 with alpha */
    background: rgba(206, 230, 233, 0.86) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
    box-shadow: 0 8px 18px rgba(24, 49, 53, 0.18);
  }

  /* Dropdown menu panel inside the navbar (also translucent) */
  html[data-theme="light"] .navbar .dropdown-menu,
  body.light .navbar .dropdown-menu,
  .theme-light .navbar .dropdown-menu{
    background: rgba(206, 230, 233, 0.90) !important;
    backdrop-filter: blur(8px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
    border-color: rgba(36, 74, 80, 0.20);
    box-shadow: 0 10px 20px rgba(24, 49, 53, 0.12);
  }

  /* Text colors */
  html[data-theme="light"] .navbar .nav-link,
  html[data-theme="light"] .navbar .navbar-brand,
  body.light .navbar .nav-link,
  body.light .navbar .navbar-brand,
  .theme-light .navbar .nav-link,
  .theme-light .navbar .navbar-brand{
    color: #244A50 !important;
  }

  /* Dropdown items colors + hover */
  html[data-theme="light"] .navbar .dropdown-item,
  body.light .navbar .dropdown-item,
  .theme-light .navbar .dropdown-item{
    color: #244A50 !important;
  }
  html[data-theme="light"] .navbar .dropdown-item:hover,
  body.light .navbar .dropdown-item:hover,
  .theme-light .navbar .dropdown-item:hover{
    background: rgba(36, 74, 80, 0.08) !important;
    color: #244A50 !important;
  }

  /* Optional: teal hamburger to match */
  html[data-theme="light"] .navbar .navbar-toggler-icon,
  body.light .navbar .navbar-toggler-icon,
  .theme-light .navbar .navbar-toggler-icon{
    background-image:
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23244A50' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

/* Light mode: navbar toggle BUTTON always has the translucent teal bg */
@media (max-width: 991.98px){
  html[data-theme="light"] .navbar .navbar-toggler,
  body.light .navbar .navbar-toggler,
  .theme-light .navbar .navbar-toggler{
    background-color: rgba(70,114,120,0.10) !important; /* always on */
    border-color: #467278 !important;
    color: #467278 !important;
    border-width: 2px;
    border-radius: .5rem;
  }

  /* Keep the SAME look on hover/focus/active/open */
  html[data-theme="light"] .navbar .navbar-toggler:hover,
  html[data-theme="light"] .navbar .navbar-toggler:focus,
  html[data-theme="light"] .navbar .navbar-toggler:active,
  html[data-theme="light"] .navbar .navbar-toggler[aria-expanded="true"],
  body.light .navbar .navbar-toggler:hover,
  body.light .navbar .navbar-toggler:focus,
  body.light .navbar .navbar-toggler:active,
  body.light .navbar .navbar-toggler[aria-expanded="true"],
  .theme-light .navbar .navbar-toggler:hover,
  .theme-light .navbar .navbar-toggler:focus,
  .theme-light .navbar .navbar-toggler:active,
  .theme-light .navbar .navbar-toggler[aria-expanded="true"]{
    background-color: rgba(70,114,120,0.10) !important; /* unchanged */
    border-color: #467278 !important;
    box-shadow: 0 0 0 .25rem rgba(70,114,120,0.30) !important; /* focus ring */
  }
}

/* === Collapse sheet under the navbar (phones + tablets) === */
@media (max-width: 991.98px){
  :root{ --navH: 56px; } /* fallback; JS will set real height */

  .navbar{ position: sticky; top: 0; z-index: 2030; }
  .navbar .container{ position: static; } /* no positioning context */

  .navbar-collapse{
    position: fixed;        /* detach from navbar */
    top: var(--navH);       /* start just under real navbar height */
    left: 0; right: 0;
    width: 100%;
    max-height: calc(100vh - var(--navH));
    overflow-y: auto;
    z-index: 2029;

    /* your visuals */
    background: rgba(24,49,53,0.95);          /* dark theme default */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    border-top: 1px solid rgba(255,255,255,0.10);
    padding: .75rem 1rem;
  }

  /* Light theme sheet + sharp top line */
  body.light .navbar-collapse{
    background: rgba(206,230,233,0.96);
    border-top: 0; /* avoid blended borders */
    /* crisp 2px top line drawn above content */
    background-image:
      linear-gradient(to bottom, #244A50 0, #244A50 2px, transparent 2px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top left;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  }

  .navbar-nav .nav-link{ padding:.55rem 0; }
}

/* 1) Define gradients as a variable */
:root{
  --site-bg: linear-gradient(to bottom, #183135 0%, #30636A 100%);
}
html[data-theme="light"]{
  --site-bg: linear-gradient(to bottom, #CEE6E9 0%, #FFFFFF 100%);
}

[data-theme="light"] .article-meta .meta-separator {
  color: #244A50 !important;
}

/* Authors checkbox list styling */
.authors-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid #44707A;
  border-radius: 4px;
  background: rgba(30, 58, 62, 0.4);
}

.author-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-checkbox-item .form-check-input {
  cursor: pointer;
  margin-top: 0;
}

.author-checkbox-item .author-label {
  cursor: pointer;
  margin-bottom: 0;
  color: #CEE6E9;
  font-size: 14px;
  user-select: none;
}

.author-checkbox-item .form-check-input:checked {
  background-color: #B4F701;
  border-color: #B4F701;
}

[data-theme="light"] .authors-checkboxes {
  border-color: #CCCCCC;
  background: rgba(206, 230, 233, 0.2);
}

[data-theme="light"] .author-checkbox-item .author-label {
  color: #244A50;
}