/* ==========================================================================
   Saj Dental — page-level base + WordPress compatibility
   header.css / footer.css / section CSS are unchanged copies of the original
   files; everything WordPress needs on top of them lives here.
   ========================================================================== */

/* ---- Page base (from the inline <style> of the original pages) ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;          /* anchor jumps land below the sticky header */
}

body {
  margin: 0;
  background: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.saj-skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 2000;
  padding: 12px 20px; border-radius: 999px;
  background: #0B2340; color: #FFFFFF;
  font: 600 15px/1 "DM Sans", system-ui, sans-serif; text-decoration: none;
}
.saj-skip-link:focus { top: 16px; }

.saj-main:focus { outline: none; }

/* Sections that pin below the sticky header (76px once scrolled; + the 32px
   admin bar for logged-in users — pinning only happens from 992px up, where
   the admin bar is 32px tall). The Our Process widget sets the same values
   for any anchor in our-process-widget.css. */
#our-process { --op-pin-offset: 76px; }
.admin-bar #our-process { --op-pin-offset: 108px; }
.smile-story { --ss-pin-offset: 76px; }

/* ---- Logos ----------------------------------------------------------------
   Separate desktop / mobile header logos switch at the header's own mobile
   breakpoint, so only one is ever displayed. Uploaded logos of any aspect
   ratio keep their proportions (height from the design, width auto). */
.saj-header .saj-header__logo-img,
.saj-drawer .saj-drawer__logo img,
.saj-footer .saj-footer-logo img {
  max-width: 100%;
  object-fit: contain;
}

.saj-header .saj-header__logo-img--mobile {
  display: none;
}

@media (max-width: 767.98px) {
  .saj-header .saj-header__logo-img--desktop { display: none; }
  .saj-header .saj-header__logo-img--mobile { display: block; }

  /* very wide uploaded logos must never push the CTA / toggle off-screen */
  .saj-header__logo { min-width: 0; flex-shrink: 1; }
  .saj-header .saj-header__logo-img { max-width: 52vw; }
}

/* ---- WordPress admin bar --------------------------------------------------
   Logged-in users see the fixed admin bar; keep the sticky header and the
   menu drawer below it. Below 601px the admin bar scrolls away (absolute). */
.admin-bar .saj-header { top: 32px; }
.admin-bar .saj-drawer {
  top: calc(var(--saj-drawer-inset) + 32px);
  height: calc(100dvh - 2 * var(--saj-drawer-inset) - 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .saj-header { top: 46px; }
  .admin-bar .saj-drawer {
    top: calc(var(--saj-drawer-inset) + 46px);
    height: calc(100dvh - 2 * var(--saj-drawer-inset) - 46px);
  }
}

@media screen and (max-width: 600px) {
  .admin-bar .saj-header { top: 0; }
  .admin-bar .saj-drawer {
    top: var(--saj-drawer-inset);
    height: calc(100dvh - 2 * var(--saj-drawer-inset));
  }
}

/* ==========================================================================
   Non-Elementor content (blog posts, plain pages, archives, 404)
   Uses the design tokens of the original sections.
   ========================================================================== */
.saj-content {
  --saj-content-navy: #0B2340;
  --saj-content-text: #44516A;
  --saj-content-orange: #F4511E;
  --saj-content-orange-strong: #D6400F;
  --saj-content-line: rgba(11, 35, 64, 0.12);

  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 48px);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--saj-content-text);
  overflow-wrap: break-word;
}

.saj-content--narrow { max-width: 860px; }

.saj-content h1,
.saj-content h2,
.saj-content h3,
.saj-content h4 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.15;
  color: var(--saj-content-navy);
}

.saj-content__title {
  margin: 0 0 0.5em;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  letter-spacing: -0.015em;
}

.saj-content__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--saj-content-navy);
}

.saj-content__eyebrow::before {
  content: "";
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--saj-content-orange);
}

.saj-content__meta {
  margin: 0 0 32px;
  font-size: 15px;
}

.saj-content a { color: var(--saj-content-orange-strong); }
.saj-content a:hover { color: var(--saj-content-navy); }

.saj-content img,
.saj-content video,
.saj-content iframe {
  max-width: 100%;
  height: auto;
}

.saj-content__thumb img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 32px;
  border-radius: 24px;
}

.saj-content .alignwide { max-width: 100%; }
.saj-content .alignleft { float: left; margin: 0.4em 1.5em 1em 0; }
.saj-content .alignright { float: right; margin: 0.4em 0 1em 1.5em; }
.saj-content .aligncenter { display: block; margin-inline: auto; }
.saj-content .wp-caption-text,
.saj-content figcaption { font-size: 14px; text-align: center; }

.saj-content .screen-reader-text,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Archive list */
.saj-entry {
  padding: 32px 0;
  border-bottom: 1px solid var(--saj-content-line);
}

.saj-entry__title {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}

.saj-entry__title a {
  color: var(--saj-content-navy);
  text-decoration: none;
}

.saj-entry__title a:hover { color: var(--saj-content-orange-strong); }

.saj-content .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

/* Rounded pill button, same look as the header CTA */
.saj-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--saj-content-orange);
  color: #FFFFFF !important;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(244, 81, 30, 0.75);
  transition: background-color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.saj-button:hover {
  background: var(--saj-content-orange-strong);
  transform: translateY(-1px);
}

.saj-404 {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}