/* =========================
   base.css (global)
   ========================= */

/* --- CSS Variables --- *//* =========================
   base.css (global)
   ========================= */

/* --- CSS Variables --- */
:root {
    --text:#525f7A;
    --muted:##747983;
    --brand1:#89AF4B;
    --brand2:#3E666B;
    --accent:#2F4C72;

    --shadow:0 10px 30px rgba(0,0,0,.08);
    --gutter:clamp(16px, 2.2vw, 28px);

    --font-headers:"Jost", system-ui, -apple-system, sans-serif;
    --font-body:"Work Sans",system-ui, -apple-system, sans-serif;
    --radius:18px;
    --radius-sm: 0.75rem;
    --radius-md: 1.25rem;
    --radius-lg: 1.75rem;
    --radius-pill: 999px;

    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.12);

    --container: (min(1200px,90vw));

    --section-y: clamp(2.75rem, 5vw, 5rem);
}

/* --- Reset-ish --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight:200;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  font-family: var(--font-body);
  font-weight:400;
  font-size:1.1rem;
}

p, ul{
  font-family: var(--font-body);
  margin: 0 0 1rem;
  font-size:1.1rem;
}

ul {
  margin: 0 0 1rem;
}

h1, h2, h3, h4, h5{
  font-family: var(--font-headers);
  line-height: 1.12;
  margin: 0 0 0.75rem;
}

h1 {font-size: clamp(2rem, 4vw, 3rem);font-weight: 900;text-transform: uppercase;}
h2 {font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 700;text-transform: uppercase;}
h3 {font-size: clamp(1.50rem, 2.2vw, 2.25rem); font-weight:600;text-transform: uppercase;}
h4 {font-size: clamp(1.25rem, 1.9vw, 2rem);font-weight:600;}
h5 {font-size: clamp(1rem, 1.2vw, 1.75rem);font-weight:400;}


.container {
  width: min(var(--container), 100% - 2rem);
  margin-inline: auto;
}

.section {
  padding: var(--section-y) 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  
  font-family: var(--font-headers);
  font-size:1.25rem;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;

}

.btn-primary {
  background: var(--text);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}

.btn-alt {
  background:white;
}

.btn-alt2 {
  background:#747983;
  color:white;
}

.btn:hover{ transform: translateY(-2px); filter: brightness(.98);}
.btn:active{ transform: translateY(0px); 
}

.btn:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.25);
  outline-offset: 3px;
}

/* --- Common patterns --- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  font-weight: 600;
}

.text-link:hover {
  text-decoration: underline;
}

/* --- Header & Nav ---- */

.header-box{
    position: relative;
    min-height: clamp(64px, 6vw, 96px);
    margin-inline:auto;
    padding: 16px 20px;
    position:sticky;  
    top:0;
    z-index: 1000;
    background:white;

}

.header-inside{
    z-index:2;
    display:flex;
    flex-wrap: nowrap;
    justify-content:space-between;  /* logo left, nav right */
    align-items:center;         /* top align */


}

.header-logo{
    flex:0 0 240px;
    display:flex;
    justify-content: flex-start;
    max-width:240px;
}

.header-logo img{
    height:auto;
    max-width:100%;
    display:block;
}

.nav-bar{
    flex:1 1 0%;
    display:flex;
    justify-content: flex-end;
}

.nav-list{              /* turns UL into flex box */
    display:flex;
    justify-content: flex-end;
    gap:18px;
    list-style: none;
    margin:0;
    padding:0;

}

/* Pills */
.nav-link{
    padding: 8px 14px;
    font-family: var(--font-headers);
    color: var(--text);
    text-decoration: none;
    border-radius: 999px;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.nav-link:hover{
  background:rgba(0,0,0,.1);
}

/* Active pill (HOME in mockup) */
.nav-link.is-active{
  background:var(--brand2);
  color:#fff;
}

/* CTA button */
.site-nav__cta{
  margin-left:6px;
  background:var(--accent);
  color:#fff;
}
.site-nav__cta:hover{
  background:color-mix(in srgb, var(--accent) 85%, black);
}

/*=================
 /  HERO section   /
 ===================*/

.hero {
  padding: var(--section-y) 0;
  margin:auto;
  background-image: url("https://nltx-assets-cdn.b-cdn.net/web/assets/big-gradient-rectangle.png");
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center;
}

.hero-title{color:white;}

/*=================
 /  FOOTER section   /
 ===================*/

.footer{
    margin-top: 40px;
    padding: 36px 0;
    background: rgba(32,48,64,.04);
}    

.footer h3{ margin: 0 0 8px; }
.footer p, .footer a, .footer li{ 
  color: var(--muted); 
  font-style:normal; }
.footer a{ text-decoration: none; }
.footer a:hover{ text-decoration: underline; }

 .footer-container{
    display:flex;
    gap:16px;
    flex-wrap: wrap;
    justify-content: space-between;
    flex:1 0 auto;
    padding:20px;

    margin-inline:auto;
 
 }

.footer-container div{
    padding:10px;
    /*border:1px dashed red;*/
 }

 .footer-col1 {
    flex:1;
 
 }

 .footer-col1 p{
  padding:5px;
 }

 .footer-col2, .footer-col3{
    flex:0 0 300px;
    display:flex;
    flex-direction:column;
 
 }

 .footer-col1, .footer-col3 p {
    line-height: 1.5;
 }

.footer-links{
    flex:0;
    display:flex;
    flex-direction: column;
    justify-content: space-between;

    list-style-type: none;
    margin:0;
    padding:0;
    height:100%;
 
}

.footer-links >li{margin-bottom:0.5rem;}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}


.social-link {
  display: inline-flex;        /*makes the clickable area behave nicely */
  align-items: center;
  justify-content: center;
  line-height: 0;              /*removes weird inline spacing */
  border-radius: 8px;          /* optional: nicer hover/focus shape */
}

.social-icon {
  width: 50px;                 /* pick your size */
  height: auto;
  display: block;              /* kills the “mystery gap” under images */
}

.li-icon {
  height:25px;
  width:auto;
}
/* optional: a subtle hover/focus treatment */
.social-link:hover {
  opacity: 0.85;
}

.social-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}



/* --- Accessibility helpers --- */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}



/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
}