/* ---------------- GENERAL ---------------- */
:root{
  /* Neutral law/business palette */
  --brand:#1a3a5a;       /* deep navy */
  --brand-dark:#122734;  /* darker navy */
  --brand-accent:#6b7b89;/* muted slate */
  /* Banner height variable: JS will compute exact height and set it when available.
     Fallback is 160px for desktop and 120px for mobile. */
  --banner-height:160px;
  --bg:#f6f7f9; /* subtle off-white */
  --muted:#777;
  --content-max:1200px;
}

* { box-sizing: border-box; margin:0; padding:0; font-family: 'Arial', sans-serif; }
/* Don't reserve top padding by default; show the banner at the very top of the page.
   JS will enable the fixed header and set body padding when necessary to avoid overlap.
*/
body { display:flex; flex-direction:column; min-height:100vh; padding-top:var(--body-padding,0); background:var(--bg); color:#333; }
main { flex:1; max-width:1200px; margin:0 auto; width:90%; }

/* ---------------- HEADER ---------------- */
/* Banner is fixed at the very top of the viewport and stays visible.
  We create space for it by using body padding (set by JS/CSS vars). */
/* Banner */
#site-banner, .site-banner { position: static; top: 0; left:0; width:100%; z-index: 500; }
.banner-image{display:block; width:100%; height:auto; object-fit:cover; max-height:420px;}

/* Header is initially in the document flow (not fixed) so it appears after the banner.
  When the banner is scrolled past, JS will add .pinned which fixes the header below the banner.
*/
header { position: relative; width:100%; background:rgba(255,255,255,0.95); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom:1px solid rgba(0,0,0,0.03); }
.header-inner { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; max-width:var(--content-max); margin:0 auto; gap:12px; transition:padding 200ms ease; }
.logo { font-weight:bold; font-size:1.5rem; color:var(--brand); }
.menu-toggle { font-size:24px; cursor:pointer; color:var(--brand); display:none; background:transparent; border:0; padding:8px; }
nav.nav-menu { display:flex; gap:15px; align-items:center; }
nav.nav-menu a { text-decoration:none; color:#333; padding:8px 12px; border-radius:6px; transition:background 180ms ease, color 180ms ease, transform 180ms ease; }
nav.nav-menu a:hover, nav.nav-menu a:focus { background: rgba(26,58,90,0.06); color:var(--brand); transform:translateY(-2px); outline: none; }
nav.nav-menu a:focus{ box-shadow:0 0 0 3px rgba(26,58,90,0.08); }
.call-button { background:var(--brand); color:#fff; font-weight:bold; padding:8px 15px; border-radius:5px; }
.call-button:hover { background:var(--brand-dark); }

/* Header phone link: styled as a pill on desktop, hidden on narrow screens */
.phone-link {
  display:inline-block;
  background:var(--brand);
  color:#fff;
  padding:8px 12px;
  border-radius:20px;
  font-weight:600;
  text-decoration:none;
  margin-left:12px;
  transition:background 150ms ease, transform 120ms ease;
}
.phone-link:hover { background: var(--brand-dark); transform:translateY(-1px); }
.phone-link:focus { outline: none; box-shadow: 0 0 0 3px rgba(26,58,90,0.12); }

@media (max-width: 768px) {
  /* Hide the separate phone pill on mobile to avoid crowding header; the phone remains available inside the Contact page or mobile nav */
  .phone-link { display: none; }
}

/* Shrink header when user scrolls */
header.scrolled .header-inner { padding:8px 20px; }
header.scrolled .logo { font-size:1.25rem; }

/* Sticky / fixed header behavior */
header { position: sticky; top: 0; z-index:2100; }
header.stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 2200; box-shadow: 0 6px 20px rgba(0,0,0,0.08); }

/* Active nav item */
nav.nav-menu a.active { position: relative; color: var(--brand); font-weight:600; }
nav.nav-menu a.active::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -8px; width: 36px; height: 3px; border-radius:3px; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); }

/* ---------------- MOBILE ---------------- */
@media(max-width:768px){
  /* Smaller banner on mobile */
  :root{ --banner-height:120px; }
  /* keep banner flush to the very top on mobile (no extra padding) */
  body{padding-top:0;}
  .menu-toggle{display:block;}
  /* nav visibility controlled via animated rules later in file */
  nav.nav-menu{flex-direction:column; width:100%; margin-top:10px;}
  nav.nav-menu a{padding:10px; text-align:center;}
}

/* Ensure header inner spacing doesn't crowd content on small screens */
@media(max-width:480px){
  .header-inner { padding:10px 12px; }
}

@media (max-width: 768px) {
  .header-inner { position: relative; }
}

/* ---------------- FOOTER ---------------- */
footer{background:var(--brand);color:#fff;text-align:center;padding:15px 20px;margin-top:auto;}

/* ---------------- CONTACT PAGE ---------------- */
.contact-section{margin:60px auto; padding:20px; text-align:center;}
.contact-section h1{color:var(--brand); margin-bottom:20px;}
.contact-section p{margin-bottom:40px; color:#555; font-size:1.1rem;}
.contact-cards{display:flex; justify-content:space-around; flex-wrap:wrap; gap:20px;}
.contact-card{background:#fff; border-radius:10px; padding:25px 20px; flex:1 1 250px; box-shadow:0 5px 15px rgba(0,0,0,0.1); transition:transform 0.2s, box-shadow 0.2s;}
.contact-card:hover{transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.15);}
.contact-card .icon{font-size:40px; margin-bottom:15px; color:var(--brand);}
.contact-card h3{margin-bottom:10px; color:#333;}
.contact-card p{margin-bottom:15px; color:#555;}
.contact-card a.call-button{display:inline-block; padding:10px 20px; background:var(--brand); color:#fff; border-radius:6px; text-decoration:none; font-weight:bold; transition:background 0.2s;}
.contact-card a.call-button:hover{background:var(--brand-dark);}
@media(max-width:768px){.contact-cards{flex-direction:column; align-items:center;}.contact-card{width:100%; max-width:350px;}}

/* ---------------- OTHER PAGE STYLING ---------------- */
section{margin:40px 0;}
section h1{color:var(--brand); margin-bottom:20px;}
section p{margin-bottom:20px; color:#555; line-height:1.6;}
main {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;      /* centers main content */
    width: 100%;         /* full width up to max-width */
    padding: 0 20px;     /* adds horizontal padding */
}

/* ---------------- CARDS ---------------- */
.cards-section { margin: 40px auto; max-width: var(--content-max); }
.cards { display: grid; gap: 16px; }
.cards.stack { grid-template-columns: 1fr; }
.cards.grid-2 { grid-template-columns: repeat(2, 1fr); }
.cards.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: #fff; padding: 18px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.card h3 { margin-top: 0; color: var(--brand); }
.card p { color: #444; margin-bottom: 0; }

@media (max-width: 768px) {
  .cards.grid-2, .cards.grid-3 { grid-template-columns: 1fr; }
}

section {
    margin: 40px 0;
    padding: 0 20px; /* Add horizontal padding */
}

section h1 {
  color: var(--brand);
  margin-bottom: 20px;
}

section p {
    margin-bottom: 20px;
}

/* Removed duplicate sticky header rules above to preserve fixed header behavior. */
/* Generic nav fallbacks (kept for pages that use plain <nav> markup) */
nav { display: flex; gap: 20px; }
nav a { color: #333; text-decoration: none; font-weight: 500; transition: color 0.2s; }
nav a:hover { color: var(--brand); }

.hamburger { display: none; flex-direction: column; cursor: pointer; gap: 6px; background: transparent; border: 0; padding: 10px; border-radius: 8px; }
.hamburger span { width: 25px; height: 3px; background: #333; border-radius: 2px; }

@media (max-width: 768px) {
  /* Mobile nav: animate open/close with slide+fade (avoid display:none for transitions) */
  nav {
    display: flex;
    flex-direction: column;
    position: absolute; /* position relative to header: place immediately below header */
    top: 100%;
    right: 0;
    left: 0;
    background: white;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 2200;
    overflow: hidden;
    max-height: 0; /* collapsed */
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease, transform 240ms ease;
    pointer-events: none;
  }

  /* When active, expand and fade/slide into view */
  nav.active {
    max-height: 420px; /* enough to show menu items; clipped if longer */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .hamburger { display: flex; }
}
.blog-main {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}

.blog-card {
  background: #fff;
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card h2 {
  margin-bottom: 10px;
}

.blog-card h2 a {
  text-decoration: none;
  color: var(--brand);
}

.blog-card small {
  color: #777;
}

.blog-card p {
  color: #555;
  margin: 10px 0;
}

.blog-card .read-more {
  color: var(--brand);
  text-decoration: none;
  font-weight: bold;
}

.blog-card .read-more:hover {
  text-decoration: underline;
}

/* Blog post styling */
.blog-post {
  max-width: 800px;
  margin: 60px auto;
  padding: 0 20px;
}

.blog-post h1 {
  color: var(--brand);
  margin-bottom: 10px;
}

.blog-post p {
  line-height: 1.6;
  color: #444;
  margin-bottom: 15px;
}

/* Small utility: ensure focusable controls are visible on keyboard navigation */
button:focus, a:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }