/* ========================================================================
   FRBC THEME — GLOBAL TOKENS
   ======================================================================== */
:root {
  --bg: #f6f8fb;
  --panel: #ffffff;
  --text: #0b1320;
  --muted: #506070;
  --brand: #0f77ff;
  --accent: #05a660;
  --border: #e6ecf2;
  --ring: rgba(15,119,255,.25);
}

/* ========================================================================
   BASE / RESET
   ======================================================================== */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.container { width: min(1100px, 92%); margin: 0 auto; }
.muted { color: var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ========================================================================
   HEADER / NAV
   ======================================================================== */
.site-header {
  background:#fff; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.header-row {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; padding:.6rem 0;
}
.brand { display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.3px; color:#101623; }
.logo { width:42px; height:42px; object-fit:contain; }
.nav { justify-self:center; }
.nav a {
  margin:0 .6rem; padding:.4rem .5rem; border-radius:.5rem; color:#213046;
}
.nav a.active, .nav a:hover { background:#f0f5ff; }
.header-search { display:flex; gap:.5rem; justify-self:end; }
.header-search input {
  padding:.5rem .7rem; border:1px solid var(--border); border-radius:.6rem; background:#fff;
}
.header-search button, .button {
  padding:.5rem .8rem; border-radius:.6rem; border:0; background:var(--brand); color:#fff; font-weight:700; cursor:pointer;
}
.button:focus-visible, .header-search input:focus-visible {
  outline:2px solid var(--ring); outline-offset:2px;
}

/* ========================================================================
   HERO (HOME/GENERAL)
   ======================================================================== */
.hero {
  min-height:56vh; background-size:cover; background-position:center;
  display:flex; align-items:center; position:relative;
}
.hero .overlay { width:100%; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.35)); }
.hero .container { padding:12vh 0; color:#fff; }
.hero h1 { font-size:clamp(1.8rem,4vw,3rem); margin:0 0 .5rem; }
.hero p { opacity:.95; margin:0 0 1rem; }
.hero-search { display:flex; flex-wrap:wrap; gap:.5rem; }
.hero-search input { flex:1; min-width:220px; padding:.7rem .9rem; border-radius:.7rem; border:0; }
.hero-search button { background:var(--accent); }
.button.outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.8); }

/* ========================================================================
   LAYOUT / SECTIONS / CARDS
   ======================================================================== */
.section { padding:2rem 0 3rem; }
.split { display:grid; grid-template-columns:2fr 1fr; gap:1rem; }
.card {
  background:var(--panel); border:1px solid var(--border); border-radius:1rem;
  box-shadow:0 8px 24px rgba(16,22,35,.06);
  padding:1.25rem;
}
.card.aside { position:sticky; top:5.2rem; height:fit-content; }
.prose p { margin:.7rem 0; }

/* ========================================================================
   PRODUCTS GRID
   ======================================================================== */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.filters { display:flex; gap:.6rem; flex-wrap:wrap; margin:.5rem 0 1rem; }
input[type="search"], select {
  padding:.6rem .75rem; border:1px solid var(--border); border-radius:.65rem; background:#fff;
}
input[type="search"]:focus, select:focus {
  outline:2px solid var(--ring); outline-offset:2px;
}
.product-card {
  background:#fff; border:1px solid var(--border); border-radius:.9rem; overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .15s ease;
}
.product-card:hover { box-shadow:0 10px 28px rgba(16,22,35,.10); transform:translateY(-1px); }
.product-card img {
  width:100%; height:220px; object-fit:contain; background:#eef3f8;
}
.product-body { padding:.9rem; }
.product-body h3 { margin:.1rem 0 .2rem; }
.badge {
  font-size:.72rem; color:#053017; background:#c8f1d7;
  display:inline-block; padding:.15rem .45rem; border-radius:.45rem; margin:.25rem .35rem 0 0;
}
.price { font-weight:800; }
.button.full { display:block; text-align:center; margin-top:.5rem; }

/* ========================================================================
   FOOTER
   ======================================================================== */
.foot {
  display:flex; gap:1rem; justify-content:space-between; align-items:center;
  padding:1rem 0; color:var(--muted);
}
.site-footer a { color:inherit; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

/* ========================================================================
   ABOUT PAGE
   ======================================================================== */
.about-hero{
  min-height:38vh; background-size:cover; background-position:center; display:flex; align-items:end;
}
.about-hero .overlay{
  width:100%; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
}
.about-hero .container{ padding:6vh 0; }
.about-hero h1{ margin:0 0 .25rem; font-size:clamp(1.8rem,3.6vw,2.6rem); }
.about-hero p{ margin:0 0 .5rem; opacity:.95; }

.about-grid{
  display:grid; grid-template-columns:1.15fr 1.85fr; gap:1.25rem; align-items:start;
}
.about-photo{
  width:100%; height:320px; object-fit:cover; border-radius:.8rem; background:#eef3f8;
}
.about-copy h2{ margin-top:0; }
.about-points{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.75rem;
}

.about-location {
  margin-top:1rem; padding:1.25rem; border:1px solid var(--border); border-radius:.8rem; background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.about-location h3 { margin:.1rem 0 .5rem; }
.about-location p { margin:.4rem 0; color:var(--text); }
.about-location .hours strong, .about-location .address strong { color:var(--brand); }

/* ========================================================================
   CONTACT PAGE (FORM + MAP)
   ======================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* form wider, info narrower */
  gap: 2rem;
  align-items: start;
}

/* Form compact */
.contact-form {
  display: grid;
  gap: 0.8rem;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 0.9rem;
}
.contact-form input,
.contact-form textarea {
  margin-top: 0.3rem;
  padding: 0.55rem 0.75rem;  /* smaller than before */
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #fff;
  font: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--ring);
}
.contact-form textarea {
  resize: vertical;
  min-height: 90px; /* smaller default height */
}
.contact-form button {
  margin-top: 0.5rem;
  width: fit-content;
}

/* Right column */
.contact-right h2 {
  margin-top: 0;
}
.contact-right p {
  margin-bottom: 1rem;
}

/* Map styling */
.map-container {
  border-radius: .6rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.map-container iframe {
  width: 100%;
  height: 490px;  /* shorter map */
  border: 0;
}

/* Full-bleed background for Contact */
.contact-bg {
  /* force full viewport width even if a parent centers content */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: url("../assets/contact-bg.jpg") center/cover no-repeat;
  position: relative;
  padding: 8rem 0; /* top/bottom spacing */
}

.contact-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(44, 44, 44, 0.719); /* soft fade overlay */
}

/* keep inner content above overlay */
.contact-bg .container {
  position: relative;
  z-index: 1;
}



/* Responsive fallback */
@media (max-width: 840px) {
  .contact-grid {
    grid-template-columns: 1fr; /* stack on mobile */
  }
}



/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width:980px) {
  .split { grid-template-columns:1fr; }
  .card.aside { position:static; }
}
@media (max-width:840px) {
  .grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .grid { grid-template-columns:1fr; }
  .about-photo { height:240px; }
  .about-points { grid-template-columns:1fr; }
}

/* Mobile hamburger styles & behavior */
.nav-toggle {
  display: none;
  padding: .45rem .65rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 840px) {
  .header-row {
    display: grid;
    grid-template-columns: 1fr auto; /* brand | toggle */
    grid-template-areas:
      "brand navtoggle"
      "search search"
      "nav nav";
    row-gap: .5rem;
  }
  .brand { grid-area: brand; }
  .nav-toggle { grid-area: navtoggle; display: inline-flex; align-items: center; }

  /* Search: input full width, button hidden */
  .header-search { grid-area: search; justify-self: stretch; display: flex; gap: .5rem; }
  .header-search input { width: 100%; }
  .header-search button { display: none; } /* ← hide on phones */

  /* Collapsible nav */
  .nav {
    grid-area: nav;
    display: block !important;     /* override any prior flex rules */
    overflow: hidden;
    max-height: 0;                 /* collapsed by default */
    transition: max-height .25s ease;
    border-top: 1px solid var(--border);
  }
  .nav[hidden] { display: block !important; } /* keep layout stable while hidden */
  .nav.open { max-height: 60vh; }             /* expanded */

  .nav a {
    display: block;
    margin: 0;
    padding: .55rem .6rem;
    border-radius: .5rem;
  }
  .nav a.active, .nav a:hover { background: #f7faff; }

  .logo { width: 36px; height: 36px; }
}

/* Hide header search on small screens + tighten header grid */
@media (max-width: 840px) {
  .header-search { display: none !important; }

  .header-row {
    display: grid;
    grid-template-columns: 1fr auto;        /* brand | menu */
    grid-template-areas:
      "brand navtoggle"
      "nav nav";                            /* no search row */
    row-gap: .5rem;
  }
}




/* ========================================================================
   This could be deleted because it contains stuff that already exists above.
   But it does some upgrates which could be fixed.
   ======================================================================== */

/* --- ABOUT layout polish --- */
.about-grid{
  grid-template-areas: "photo copy";
  grid-template-columns: 1.05fr 1.95fr;
  gap: 1.5rem;
}
.about-photo{ grid-area: photo; }
.about-copy{ grid-area: copy; max-width: 70ch; }

/* Make the two blocks (“Why…” and “Hours & Location”) read as tidy cards */
.about-points{
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.about-points > div{
  background:#fff;
  border:1px solid var(--border);
  border-radius:.75rem;
  padding:1rem 1.1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.about-points h3{ margin:.1rem 0 .4rem; }

/* Hours card spacing + button spacing */
.about-location{ 
  margin: 0;                /* reset */
  box-shadow: none;         /* already wrapped as a card above */
  border: 0; 
  padding: 0;
}
.about-points > div:last-child .button{
  margin-top: 1rem;         /* add breathing room under the hours box */
  display: inline-block;
}

/* Tighter paragraphs for readability */
.about-copy p{ margin:.6rem 0 .8rem; }

/* Medium screens: widen image a touch, keep tidy columns */
@media (max-width: 980px){
  .about-grid{
    grid-template-areas:
      "photo"
      "copy";
    grid-template-columns: 1fr;
  }
  .about-photo{ height:280px; }
  .about-copy{ max-width: 100%; }
  .about-points{ grid-template-columns: 1fr; } /* stack the two cards */
}

/* Small phones: extra spacing so nothing feels cramped */
@media (max-width: 560px){
  .about-grid{ gap: 1.1rem; }
  .about-photo{ height:240px; }
  .about-points > div{ padding: .9rem 1rem; }
  .about-points > div:last-child .button{ margin-top: .9rem; }
}


/* ========================================================================
   Corousel scrolling logos
   ======================================================================== */

  /* --- Seamless logo scroller --- */
.logo-carousel{
  --gap: 3rem;           /* space between logos */
  --duration: 20s;       /* will be set by JS for perfect loop */
  overflow: hidden;
  background:#fff;
  padding: 1rem 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.logo-carousel .track{
  display:flex;          /* holds two .group rows */
  will-change: transform;
}
.logo-carousel .group{
  display:flex;
  align-items:center;
  gap: var(--gap);
  flex: 0 0 auto;        /* don't shrink */
}
.logo-carousel img{
  height:60px;
  flex:0 0 auto;         /* exact-width items for smoothness */
  object-fit:contain;
  opacity:.95;
  transition:opacity .2s;
}
.logo-carousel img:hover{ opacity:1; }

/* animation class is added by JS after measuring */
.logo-carousel .track.animating{
  animation: logo-loop var(--duration) linear infinite;
}
@keyframes logo-loop{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--loop) * -1px)); }
}

/* ========================================================================
   Lastest posts (blog)
   ======================================================================== */

/* Latest Post section layout */
.latest {
  display: grid;
  grid-template-columns: 1fr 2.5fr; /* info left | post right */
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 2rem;
}

/* Make both cards stretch evenly */
.latest-info.card,
.latest-post.card {
  display: flex;
  flex-direction: column;
}

/* Crop the image so card height is smaller */
.latest-post .thumb {
  width: 100%;
  height: 220px;          /* adjust this number to make it shorter/taller */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Keep it side-by-side until mobile */
@media (max-width: 840px) {
  .latest {
    grid-template-columns: 1fr; /* stack vertically only on small screens */
  }
}

/* ========================================================================
   post page layout polish
   ======================================================================== */
   /* Blog post hero */
.post-hero{
  min-height:40vh;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:flex-end;
}
.post-hero .overlay{
  width:100%;
  color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.60));
}
.post-hero .container{ padding:6vh 0; }
.post-hero h1{ margin:0 0 .35rem; font-size:clamp(1.8rem,4vw,2.8rem); }
.post-hero .meta{ font-size:.95rem; opacity:.95; }

/* Optional: slightly narrower content card for readability */
.post-body{ max-width: 80ch; margin: 0 auto; }