/*
Theme Name: Denture Clinic
Theme URI: https://anewimagedentureclinic.com/
Author: Anatech Consultancy
Description: Custom theme for A New Image Denture Clinic. Built with ACF Pro field groups per section (no page builder).
Version: 1.0.0
Text Domain: denture-clinic
*/

:root{
  --bg:#FAF8F5;
  --surface:#FFFFFF;
  --ink:#1C1917;
  --ink-muted:#6B6560;
  --accent:#D82620;
  --accent-ink:#FFFFFF;
  --dark:#172B3C;
  --support:#FFCF19;
  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-pill:9999px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:32px;
  --space-xl:64px;
  --container:1250px;
  --hero-inset:32px;
  --header-h:76px;
  --font:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
/* UA margins on these push flex/grid children out of alignment */
blockquote,figure,dl,dd{margin:0;}
h1,h2,h3,h4{font-family:var(--font);font-weight:600;line-height:1.1;margin:0 0 var(--space-md);color:var(--ink);}
p{margin:0 0 var(--space-md);}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
@media (min-width:1300px){.container{padding:0;}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  border-radius:var(--radius-pill);
  padding:14px 28px;
  font-weight:600;font-size:15px;
  border:none;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);opacity:.92;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-secondary{background:#fff;color:var(--dark);}
.btn-on-dark{background:var(--support);color:var(--dark);}
.btn-book{background:#fff;color:var(--accent);padding:12px 26px;}

/* Section eyebrows are title case at 16px in the reference; only the hero
   eyebrow is the spaced uppercase treatment with a leading dot. */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:16px;font-weight:600;letter-spacing:normal;text-transform:none;
  color:var(--accent);margin-bottom:12px;
}
.hero__eyebrow{font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;}
.hero__eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}

.icon-chip{
  width:40px;height:40px;border-radius:var(--radius-sm);
  background:var(--accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* ---------- Site header (overlays the hero on the front page) ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .25s ease, box-shadow .25s ease;
}
.site-header__inner{
  max-width:1280px;margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
@media (min-width:1330px){.site-header__inner{padding:16px 0;}}

.site-logo{display:flex;align-items:center;gap:12px;font-weight:600;font-size:16px;letter-spacing:.01em;text-transform:uppercase;}
.site-logo__mark{
  width:44px;height:44px;border-radius:50%;background:#fff;color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}

.primary-nav ul{display:flex;align-items:center;gap:4px;}
.primary-nav a{
  display:block;padding:8px 16px;border-radius:var(--radius-pill);
  font-weight:500;font-size:14px;
  transition:background .15s ease,color .15s ease;
}
.header-cta{display:flex;align-items:center;gap:16px;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;}

/* Overlay state: transparent over the hero photo */
.site-header--overlay .site-logo{color:#fff;}
/* The hero photo has near-white highlights behind the nav, where white text
   would fall to 2.3:1. The pill carries its own dark backing so legibility
   never depends on what the photograph is doing underneath. */
.site-header--overlay .primary-nav ul{
  background:rgba(12,14,16,.6);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-pill);
  padding:5px;
}
.site-header--overlay .primary-nav a{color:#fff;}
.site-header--overlay .primary-nav a:hover{background:rgba(255,255,255,.18);}
.site-header--overlay .nav-toggle{color:#fff;}

/* Solid state: inner pages, and the front page once scrolled */
.site-header.is-solid{
  background:rgba(250,248,245,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(28,25,23,.08);
}
.site-header.is-solid .site-logo{color:var(--ink);}
.site-header.is-solid .site-logo__mark{background:rgba(216,38,32,.1);}
.site-header.is-solid .primary-nav ul{background:rgba(28,25,23,.05);border-radius:var(--radius-pill);padding:5px;}
.site-header.is-solid .primary-nav a{color:var(--ink);}
.site-header.is-solid .primary-nav a:hover{background:rgba(28,25,23,.08);}
.site-header.is-solid .btn-book{background:var(--accent);color:#fff;}
.site-header.is-solid .nav-toggle{color:var(--ink);}

/* Pages without a hero need room for the fixed header */
body:not(.home) #main{padding-top:var(--header-h);}

@media (max-width:980px){
  .primary-nav{display:none;}
  .nav-toggle{display:inline-flex;}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:rgba(255,255,255,.72);padding:var(--space-xl) 0 var(--space-lg);}
.site-footer a{color:rgba(255,255,255,.72);}
.site-footer a:hover{color:#fff;}
.site-footer h4{color:#fff;font-size:16px;margin-bottom:var(--space-md);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-lg);}
.footer-grid ul li{margin-bottom:10px;}
.site-footer .site-logo{color:#fff;margin-bottom:16px;}
.site-footer .site-logo__mark{background:rgba(255,255,255,.1);}
.footer-social{display:flex;gap:10px;margin-top:var(--space-md);}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--space-lg);padding-top:var(--space-md);text-align:center;font-size:13px;color:rgba(255,255,255,.62);}

@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}