:root{
  --midnight:#1C2C66;
  --sky:#5BA5E1;
  --navy:#16305B;
  --star:#FFD200;
  --sand:#E1A446;
  --forest:#244C2F;
  --cream:#F5F5DC;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
  color:#0f1f2a;
  background:#fff;
  line-height:1.6;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
header{
  position:sticky;top:0;z-index:1000;
  background:linear-gradient(90deg,var(--midnight),var(--sky));
  color:white;border-bottom:3px solid var(--star);
}
nav{display:flex;align-items:center;gap:24px;padding:12px 0}
nav img{height:42px;width:auto}
nav a{color:white;text-decoration:none;font-weight:600;opacity:.95}
nav a:hover, nav a:focus{opacity:1;text-decoration:underline}
.hero{
  background: radial-gradient(1000px 450px at 70% -10%, rgba(255,210,0,.25), transparent 60%),
              linear-gradient(180deg, #0f1f4a 0%, #1C2C66 40%, #0f1f4a 100%);
  color:white; padding:72px 0 36px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:url('images/minehead-starry.png');
  opacity:.25; background-size:cover; background-position:center;
  mix-blend:screen;
}
.hero .content{position:relative}
.hero h1{font-size: clamp(2rem, 4vw, 3rem); margin:0 0 10px; letter-spacing:.5px}
.hero p{max-width:740px;font-size:1.1rem;opacity:.95}
.btn{
  display:inline-block; background:var(--star); color:#0f1f2a; padding:12px 18px;
  border-radius:999px; font-weight:700; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.15);
}
.btn:hover{transform:translateY(-1px)}
.section{padding:64px 0}
.section.alt{background:var(--cream)}
.grid{display:grid; gap:24px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:white;border-radius:16px;padding:20px;border:1px solid #e8e8e8;box-shadow:0 8px 26px rgba(0,0,0,.06)}
.card h3{margin-top:0}
.tag{display:inline-block;background:var(--sky);color:white;border-radius:6px;padding:4px 8px;margin-right:6px;margin-bottom:6px;font-size:.85rem}
footer{background:#0f1f4a;color:#e6ecff}
footer a{color:#ffe27a}
.small{font-size:.92rem}
blockquote{border-left:4px solid var(--sand); padding:8px 16px; background:#fff8ea; border-radius:8px}
form{display:grid;gap:12px}
input,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #cfd6e0;font:inherit}
input:focus,textarea:focus{outline:2px solid var(--sky);border-color:var(--sky)}
label{font-weight:600}
.maplink{display:inline-flex;align-items:center;gap:8px}
ul.inline{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
ul.inline li{background:#eef5ff;border-radius:999px;padding:6px 10px}

/* --- Subpage hero images --- */
.page-hero{
  position:relative;color:white;padding:72px 0 48px;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
             var(--hero-img, url('images/hero-home.jpg')) center/cover no-repeat;
}
.page-hero h1{margin:0 0 8px; font-size: clamp(1.8rem, 4vw, 2.6rem)}
.breadcrumbs{opacity:.9; font-size:.95rem}

/* simple reveal animation */
.reveal{opacity:0; transform: translateY(12px); transition: all .6s ease}
.reveal.show{opacity:1; transform:none}

/* Footer accreditations */
.accreditations{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.accreditations img{height:46px;background:white;border-radius:10px;border:1px solid #e5e7eb;padding:6px}

/* FAQ */
.faq details{border:1px solid #e5e7eb;border-radius:12px;padding:12px;background:#fff;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700}

/* Badges and contact layout */
.badge{display:inline-block;padding:4px 8px;border:1px dashed #94a3b8;border-radius:999px;font-size:.8rem;color:#334155}
.contact-card{display:grid;grid-template-columns: 1fr; gap:12px}
@media (min-width: 760px){
  .contact-card{grid-template-columns: 1fr 1fr}
}
form .row{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){
  form .row{grid-template-columns:1fr 1fr}
}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}

/* Nav layout */
.site-nav {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.site-nav .brand img { height:34px; display:block; }

/* Default: desktop */
.nav-toggle { display:none; }
.nav-links { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.nav-links a { text-decoration:none; }

/* Mobile */
@media (max-width: 760px) {
  .nav-toggle {
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; font-size:1.25rem; line-height:1; 
    border:1px solid #e5e7eb; border-radius:10px; background:#fff;
  }
  .nav-links {
    position:absolute; left:0; right:0; top:64px;  /* below header */
    display:none; flex-direction:column; gap:10px;
    background:#fff; border-top:1px solid #e5e7eb; padding:14px 16px;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
  }
  .nav-links.show { display:flex; }
  .nav-cta { width:100%; text-align:center; }
  .site-nav .brand img { height:30px; }
  header .container { position:relative; }
}

/* === NAV FIXES === */
.site-nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* was space-between → left-align everything */
  gap:16px;
}
.site-nav .brand img{ height:34px; display:block; }

/* Links row on desktop */
.site-nav .nav-links{
  display:flex;
  gap:16px;
  align-items:center;
}

/* Put the hamburger at the far right on desktop, hidden */
.nav-toggle{
  margin-left:auto;
  display:none;
}

/* Mobile layout */
@media (max-width: 760px){
  header .container{ position:relative; } /* needed for absolute menu positioning */
  .nav-toggle{
    display:inline-flex;
    align-items:center; justify-content:center;
    width:44px; height:44px; font-size:1.25rem; line-height:1;
    border:1px solid #e5e7eb; border-radius:10px; background:#fff;
    margin-left:auto; /* push button to the right */
  }
  .site-nav .nav-links{
    position:absolute; left:0; right:0; top:64px;
    display:none;                      /* hidden by default */
    flex-direction:column; gap:10px;
    background:#fff; border-top:1px solid #e5e7eb; padding:14px 16px;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    z-index:1000;
  }
  .site-nav .nav-links.show{ display:flex; } /* shown when toggled */
  .nav-cta{ width:100%; text-align:center; }
  .site-nav .brand img{ height:30px; }
}


/* Mobile dropdown: make links readable on white background */
@media (max-width:760px){
  .site-nav .nav-links a{
    color:#0f1f2a;              /* dark text for contrast */
    display:block;
    padding:10px 4px;           /* bigger tap targets */
    text-decoration:none;
  }
  .site-nav .nav-links a:hover,
  .site-nav .nav-links a:focus{
    text-decoration:underline;
  }
  /* Keep the CTA readable too */
  .site-nav .nav-links .btn{
    background:var(--star);
    color:#0f1f2a;
    width:100%;
    text-align:center;
  }
}