/* =========================
   Base + Variables
========================= */
:root{
  --red:#e60000;
  --red-dark:#b80000;
  --ink:#222;
  --paper:#fff;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:'Montserrat',sans-serif;
  background:#fff;
  color:#333;
}

/* =========================
   Header layout
========================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}

/* Use an inner wrapper that's relative so we can absolutely center the middle */
.header-inner{
  position:relative;
  min-height:130px;                /* ensures room for big logo/hamburger */
  display:block;
  padding:10px 16px;
}

/* LEFT: Hamburger */
.nav-toggle{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  display:inline-flex; flex-direction:column; gap:6px;
  padding:16px 18px;
  border:3px solid var(--red); border-radius:10px;
  background:var(--paper); cursor:pointer;
}
.nav-toggle .bar{ width:40px; height:4px; background:var(--red); display:block; }
.nav-toggle:hover{ background:rgba(230,0,0,.08); }
.nav-toggle[aria-expanded="true"]{ background:rgba(230,0,0,.12); }

/* CENTER: logo + title — mathematically centered */
.header-content{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:10px;
  text-align:center;
}

.hdc-logo{ height:120px; }

.header-text h1{
  color:var(--red);
  font-weight:800;
  margin:0;
  letter-spacing:1px;
}
.header-text p{
  font-size:20px; color:gray; margin:0; font-weight:500; font-style:italic;
}

/* RIGHT: HDC Home icon + label */
.hdc-home-link{
  position:absolute; right:54px; top:50%; transform:translateY(-50%);
  display:inline-block; text-align:center; text-decoration:none;
  color:var(--ink); font-weight:600; padding:4px; border-radius:6px;
  transition:box-shadow .2s ease, color .15s ease, text-decoration-color .15s ease;
  max-width:150px;
}

.hdc-home-icon{ width:70px; height:auto; display:block; margin:0 auto 4px; }
.hdc-home-link span{
  font-size:12px; display:block; max-width:100px; white-space:normal; line-height:1.2; margin-top:2px;
}

/* Tiny screens: pad center a bit so it doesn't collide with edges */
@media (max-width:560px){
  .header-inner{ padding:10px 12px; }
}

/* =========================
   Off-canvas menu (right side)
   (To open from LEFT instead: see comment below)
========================= */
.offcanvas{
  position:fixed;
  inset:0 0 0 auto;               /* RIGHT panel. For LEFT: use inset:0 auto 0 0; */
  width:min(86vw,360px);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(120%) blur(2px);
  transform:translateX(100%);     /* For LEFT: transform:translateX(-100%); */
  transition:transform .28s ease;
  z-index:60;
  box-shadow:-14px 0 30px rgba(0,0,0,.18); /* For LEFT: 14px 0 30px ... */
  display:grid; grid-template-rows:auto 1fr;
}
.offcanvas.open{ transform:translateX(0); }

.offcanvas-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px; font-size:1.25rem; font-weight:800;
  border-bottom:1px solid #eee;
}
.nav-close{
  background:transparent; border:0; font-size:26px; line-height:1; cursor:pointer; color:var(--ink);
}

.offcanvas-nav{ display:block; padding:0; margin:0; }
.offcanvas-nav .nav-link{
  display:flex; align-items:center;
  padding:12px 16px;
  color:var(--red); font-weight:600;
  text-decoration:none;            /* no underline by default */
  border-top:1px solid #f4f4f4;    /* thin separators */
  transition:background .15s, color .15s, font-weight .1s, text-decoration .1s;
}
.offcanvas-nav .nav-link:hover{
  color:var(--red-dark);
  text-decoration:underline; text-underline-offset:2px;
  background:linear-gradient(180deg, rgba(184,0,0,.06), rgba(184,0,0,.03));
}
.offcanvas-nav .nav-link.current{
  font-weight:800; color:var(--red-dark);
  text-decoration:underline;
}

/* Backdrop */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:55;
}
.backdrop.show{ opacity:1; pointer-events:auto; }

/* =========================
   Footer + footer menu
========================= */
.site-footer{
  background:#f0f0f0;
  padding:20px 20px 10px;
  position:relative; text-align:center; font-size:14px;
}
.footer-triangle{
  width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-bottom:12px solid #fff;
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
}
.footer-content{ max-width:900px; margin:0 auto; }
.socials{ margin-top:20px; }
.socials a img{ width:40px; margin:0 10px; }

/* Footer menu */
.footer-menu{
  display:flex; justify-content:center; align-items:center; gap:36px;
  margin:8px 0 10px; flex-wrap:wrap;
}
.footer-menu a{
  color:#e60000; font-weight:700; text-decoration:none; letter-spacing:.3px;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.footer-menu a:hover{
  color:#b80000; text-decoration:underline; text-underline-offset:3px;
}
@media (max-width:520px){ .footer-menu{ gap:20px; } }

/* Compact header on small screens */
@media (max-width: 768px){
  .site-header .header-inner{
    padding: 8px 12px;
    gap: 10px;
  }
  .hdc-logo{ height: 64px; }                /* was too tall */
  .header-text h1{
    font-size: 22px;                         /* shrink title */
    line-height: 1.1;
    letter-spacing: .5px;
  }
  .header-text p{ font-size: 12px; }

  /* Right-side link: icon-only on mobile */
  .hdc-home-link span{ display:none; }
  .hdc-home-link .hdc-home-icon{ width: 32px; height: 32px; }
}

/* Very small phones */
@media (max-width: 420px){
  .hdc-logo{ height: 56px; }
  .header-text h1{ font-size: 20px; }
}