/* 10-header.css — extracted from main.css */

/* ========== HEADER ========== */
.site-header{
  background:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--blue-900); text-decoration:none; font-weight:800; letter-spacing:.4px; }
.site-branding{ display:flex; align-items:center; gap:8px; }
.brand-logo{ height:32px; width:auto; object-fit:contain; }
.brand-text{ font-weight:700; color:#ffffff; letter-spacing:.2px; }
.primary-nav{ display:flex; align-items:center; gap:18px; }
.primary-nav .menu{ display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.primary-nav .menu a{ color:#1e73be; text-decoration:none; font-weight:600; }
.primary-nav .get-started{ margin-left:8px; }

/* ===== DESKTOP HEADER UPGRADE ===== */
@media (min-width: 981px) {
  .site-header {
    --hdr-h: 100px;
    height: var(--hdr-h);
    padding: 0 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0b1e3a;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transition: all .25s ease;
  }

  /* Logo & title */
  .site-header .ws-title-logo {
    height: 46px;           /* bigger logo */
    width: auto;
  }
  .site-header .ws-title-text {
    font-size: 1.3rem;      /* more presence */
    font-weight: 700;
    color: #fff;
    margin-left: 10px;
  }

  /* Navigation links */
  .site-header nav ul {
    display: flex;
    align-items: center;
    gap: 44px;              /* wider spacing */
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-header nav a {
    color: #fff;
    font-size: 17px;        /* larger text */
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: color .2s ease, opacity .2s ease;
  }
  .site-header nav a:hover {
    color: #90CAF9;         /* soft blue hover */
  }

  /* CTA button */
  .site-header .btn-cta,
  .site-header a[href*="get-started"] {
    background: linear-gradient(135deg, #2f8bf7, #1e73be);
    color: #fff;
    padding: 14px 30px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(47,139,247,.35);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .site-header .btn-cta:hover,
  .site-header a[href*="get-started"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(47,139,247,.45);
  }

  /* Sticky header (slightly smaller, elegant) */
  .site-header.is-sticky {
    --hdr-h: 82px;
    height: var(--hdr-h);
    padding: 0 48px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
  }
  .site-header.is-sticky .ws-title-logo {
    height: 38px;
  }
}

/* The mobile styles stay exactly as they were */
/* ===== Desktop header full upscale (WebStroy structure) ===== */
@media (min-width: 981px) {
  .site-header {
    height: 110px;                     /* was smaller before */
    padding: 0 72px;
    background: #0b1e3a;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    transition: all .25s ease;
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Logo & brand */
  .brand-logo {
    height: 64px;                      /* larger logo */
    width: auto;
    transition: height .25s ease;
  }

  .brand-text {
    font-size: 1.7rem;                 /* about 27px */
    font-weight: 800;
    color: #fff;
    margin-left: 12px;
    letter-spacing: 0.3px;
  }

  .brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
  }

  /* Navigation links */
  .primary-nav .menu {
    display: flex;
    align-items: center;
    gap: 48px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .primary-nav .menu a {
    color: #fff;
    font-size: 1.1rem;                 /* enlarged */
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
  }

  .primary-nav .menu a:hover {
    color: #90caf9;
  }

  /* CTA button */
  .get-started {
    margin-left: 48px;
    background: linear-gradient(135deg, #2f8bf7, #1e73be);
    color: #fff !important;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.05rem;
    box-shadow: 0 6px 20px rgba(47,139,247,.35);
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }

  .get-started:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(47,139,247,.45);
  }

  /* Sticky version */
  .site-header.is-sticky {
    height: 88px;
    padding: 0 60px;
  }

  .site-header.is-sticky .brand-logo {
    height: 50px;
  }

  .site-header.is-sticky .brand-text {
    font-size: 1.4rem;
  }

  .site-header.is-sticky .primary-nav .menu a {
    font-size: 1rem;
  }

  .site-header.is-sticky .get-started {
    padding: 12px 26px;
    font-size: 1rem;
  }
}

/* ===== Mobile untouched (below 981px) ===== */
@media (min-width: 981px) {
  .site-header {
    height: 110px;
    background: #0b1e3a;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }

  /* Keep the inner content aligned with rest of site */
  .header-inner {
    max-width: 1280px;   /* match your .container width */
    margin: 0 auto;
    padding: 0 32px;     /* same side spacing as other sections */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Optional: make sure nav doesn’t stretch too far */
  .primary-nav {
    display: flex;
    align-items: center;
    gap: 40px;
  }

  .primary-nav .menu {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 0;
    padding: 0;
  }

  .get-started {
    margin-left: 32px;
  }
}