/* Shared site CSS: helpers and small layout utilities used across pages */
:root{
  --container-max: 1200px;
  /* Header sizing and section offset: header-height is the actual header bar height;
     header-offset = header-height - 40px (moves sections up by 40px globally).
     Override `--header-height` in responsive media queries below to change offsets.
  */
  --header-height: 68px;
  --header-offset: calc(var(--header-height) - 40px);
  /* Global section padding and gap (can be tuned per-project) */
  --section-pt: 80px; /* section padding-top */
  --section-ph: 24px; /* section padding-horizontal */
  --section-gap: 24px; /* default vertical gap between direct children inside .section-inner */
}

/* Reusable container to align modules */
.container{max-width:var(--container-max);margin:0 auto;padding:0 24px}

.section-inner{max-width:1200px;width:100%;margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column;}

/* Default gap between direct children of a section; keeps spacing consistent across modules */


/* Small helper for centered text blocks */
.centered-block{text-align:center;margin:0 auto}

/* Reusable card style used by multiple modules */
.card{background:var(--white);border-radius:18px;padding:20px;border:1px solid rgba(2,6,23,0.04);box-shadow:0 10px 30px rgba(2,6,23,0.06)}

/* Ensure anchor focus is visible for accessibility */
a:focus{outline:3px solid rgba(0,188,212,0.14);outline-offset:2px}

/* Button base styles shared across modules */
.btn-primary{display:inline-block;border-radius:8px;font-weight:600;text-decoration:none}


/* Small responsive helpers */
@media (max-width:1024px){
  :root{--section-pt:70px;--section-ph:20px}
}

@media (max-width:768px){
  /* Reduce header height on smaller screens so offset recalculates automatically */
  :root{--section-pt:60px;--section-ph:16px;--header-height:52px}
}

@media (max-width:480px){
  :root{--section-pt:50px;--section-ph:12px;--header-height:52px}
}

/* Ensure section content never exceeds available viewport height; enable internal scrolling when necessary */
.section-inner{
  /* available height inside a section: viewport minus header and top padding */
  /*max-height: calc(100vh - var(--header-height) - var(--section-pt));*/
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbars visually while keeping scrolling usable (cross-browser) */
.section-inner{
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.section-inner::-webkit-scrollbar{ /* WebKit */
  width: 0px;
  height: 0px;
}

/* Ensure the main scroll container also hides native scrollbar visually */
.scroll-container{
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar{
  width: 0px;
  height: 0px;
}

/* Layout helpers for modules: use .section-content to make a block stretch and allow children to flow */
.section-content{display:flex;flex-direction:column;flex:1;min-height:0}

/* Text wrapping helpers */
.wrap{white-space:normal;word-wrap:break-word;overflow-wrap:break-word}

/* Utility to disable internal scrolling for sections that must fit exactly */
.no-scroll{overflow-y:visible;max-height:none}

/* Mobile navigation toggle and responsive nav styles */
.nav-toggle{display:none;align-items:center;justify-content:center;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle .hamburger{display:block;width:22px;height:2px;background:var(--dark-gray);position:relative;border-radius:2px}
.nav-toggle .hamburger::before,.nav-toggle .hamburger::after{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--dark-gray);border-radius:2px}
.nav-toggle .hamburger::before{top:-7px}
.nav-toggle .hamburger::after{top:7px}

/* Mobile nav: hidden by default and slides in when .open */
/* Expand mobile nav behavior to larger breakpoints where needed (<=1366px) */
@media (max-width:1366px){
  .nav-toggle{display:flex}
  .nav{position:fixed;top:var(--header-height);right:0;height:calc(100vh - var(--header-height));width:320px;max-width:80vw;background:var(--white);transform:translateX(100%);transition:transform .28s ease,box-shadow .28s ease;box-shadow:0 12px 40px rgba(2,6,23,0.12);z-index:1200;padding:12px}
  .nav.open{transform:translateX(0)}
  .nav-list{display:flex;flex-direction:column;gap:12px;padding:12px}
  .nav-list a{display:block;padding:10px 8px;border-radius:8px}
  .nav-list a:hover{background:rgba(0,0,0,0.03)}
}