/*
  Bay Footcare - Main Stylesheet (Clinical, Clean)
  Sections: Variables, Base, Layout, Hero/Tabs, Components, Footer, Utilities, Responsive
*/

/* ===== Variables (palette & spacing) ===== */
:root{
  --ink:#0a3d62;        /* headings, primary buttons */
  --slate:#334155;      /* body text */
  --accent:#0b8457;     /* subtle highlights */
  --bg:#f6f8fa;         /* section background */
  --card:#ffffff;       /* cards */
  --border:#e5e7eb;     /* card borders */
  --header-h:40px;      /* fixed top header */
  --tabs-h:70px;        /* sticky tabs bar */
  --radius:12px;
  --shadow:0 0 20px rgba(0,0,0,.06);
}

/* ===== Base ===== */
html, body {
  margin: 0; padding: 0;
}
body {
  font-family: "Lato", sans-serif;
  color: var(--slate);
  background: var(--bg);
  padding-top: var(--header-h); /* offset fixed header */
}
a { text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
h1, h2, h3 { color: var(--ink); letter-spacing: .2px; margin-top: 0; }

/* ===== Layout ===== */
.section {
  padding: 3em 2em;
  background: var(--bg);
  text-align: center;
}
@media (max-width: 768px) {
  .section { padding: 4em 1.5em; }
}

/* ===== Hero / Tabs ===== */
.et-hero-tabs, .et-slide {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 100vh;
  text-align: center;
  padding: 3em 2em;
  background: var(--bg);
}
.et-hero-tabs h1, .et-slide h1 {
  font-size: 2.2rem; letter-spacing: .2rem; margin-bottom: .5rem;
}
.et-hero-tabs h3, .et-slide h3 {
  font-size: 1rem; opacity: .8; margin: .25rem 0 0 0;
}

.notice{
  background: var(--ink); color:#fff;
  padding:.6rem .9rem; border-radius:.5rem;
  margin:.75rem auto; max-width:900px; font-weight:600;
}

/* Tabs bar */
.et-hero-tabs-container {
  display:flex; flex-direction:row;
  position:absolute; bottom:0; width:100%; height: var(--tabs-h);
  background:#fff; box-shadow: var(--shadow); z-index:10;
}
.et-hero-tabs-container--top {
  position: fixed;
  top: var(--header-h); /* sit below fixed header */
}
.et-hero-tab {
  display:flex; justify-content:center; align-items:center; flex:1;
  color:#0f172a; font-weight:700; letter-spacing:.1rem; font-size:.9rem;
  transition: background .2s ease, color .2s ease;
}
.et-hero-tab:hover, .et-hero-tab:focus-visible {
  background: rgba(10,61,98,.9); color:#fff;
}
.et-hero-tab-slider {
  position:absolute; bottom:0; width:0; height:6px;
  background: var(--ink); transition:left .3s ease, width .3s ease;
}

/* ===== Components ===== */

/* Service cards */
.service-block {
  max-width: 800px;
  margin: 1rem auto;
  padding: 1.1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
}
.service-block h3 { margin-top: .25rem; }

/* Gallery */
.gallery-grid {
  display:flex; flex-wrap:wrap; justify-content:center; gap:15px; margin-top:1rem;
}
.gallery-grid img {
  width:100%; max-width:300px; border-radius:10px; object-fit:cover;
}
@media (max-width: 768px) {
  .gallery-grid { flex-direction:column; align-items:center; }
}

/* CTAs */
.cta { margin: 2rem 0; }
.cta a {
  display:inline-block; margin:.5rem; padding:.85rem 1.2rem;
  background: var(--ink); color:#fff; border-radius:10px; font-weight:700;
}
.cta a + a { background:#475569; }
.cta a:hover { filter: brightness(.95); }

/* Forms (kept, if you re-enable later) */
.form-wrapper {
  max-width: 400px; width: 90%; margin: 1rem auto; text-align: left;
}
.form-wrapper input, .form-wrapper textarea {
  width:100%; padding:10px; margin-bottom:1rem;
  border:1px solid var(--border); border-radius:8px; background:#fff;
}
.form-wrapper button {
  width:100%; background:var(--ink); color:#fff; padding:10px;
  border:none; border-radius:8px; cursor:pointer;
}
.form-wrapper button:hover { filter: brightness(.95); }

/* Testimonials */
.testimonial-block, /* legacy */
#testimonials .card {
  max-width: 800px; margin: 1rem auto; padding: 1rem;
  background:#fff; border:1px solid var(--border); border-radius:10px; text-align:left;
}
.testimonial-block blockquote {
  font-style: italic; color:#333; border-left:4px solid var(--ink);
  padding-left:1rem; margin:1rem 0;
}
.testimonial-block footer { font-size:.9rem; color:#666; margin-top:.5rem; }

/* ===== Fixed Top Header Bar ===== */
.top-header-bar {
  position:fixed; top:0; left:0; width:100%;
  background: var(--ink); color:#fff; font-size:.9rem;
  padding:.45rem 1rem; z-index:1050;
}
.top-header-container {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  max-width:1200px; margin:0 auto;
}
.top-header-left span { margin-right:1.2rem; display:inline-block; }
.top-header-left a, .top-header-right a { color:#fff; text-decoration:none; }
.top-header-right a { margin-left:1rem; font-size:1rem; }
.top-header-left i, .top-header-right i { margin-right:.3rem; }
@media (max-width: 768px) {
  .top-header-container { flex-direction:column; align-items:flex-start; }
  .top-header-right { margin-top:.5rem; }
}

/* ===== Footer ===== */
footer {
  text-align:center; background: var(--ink); color:#fff; padding:1rem;
}
footer small { display:block; margin-top:.5rem; color:#d1d5db; }

/* ===== Mobile Call Button & visibility ===== */
.mobile-call-btn {
  display:none; background: var(--ink); color:#fff;
  padding:.75rem 1.5rem; border-radius:10px;
}
.desktop-number { display:inline; }
@media (max-width: 768px) {
  .mobile-call-btn { display:inline-block; }
  .desktop-number { display:none; }
}

/* ===== Utilities ===== */

/* Anchor offset: header + tabs (40 + 70 = 110) */
:target::before {
  content:""; display:block; height:110px; margin-top:-110px; visibility:hidden;
}

/* ===== Removed: FullCalendar styles (no longer used) ===== */
/* (Calendar block deleted to reduce CSS weight) */