/* Newpark Dentistry — foundation.css
   Loaded by functions.php. See style.css for the full section index. */

/* =============================================================
   1. ROOT VARIABLES
   ============================================================= */

:root {
  /* Brand */
  --np-forest-deep: #0f2620;
  --np-forest: #2B4336;
  --np-forest-mid: #6a8b7c;
  --np-forest-light: #8faea0;

  /* Surfaces */
  --np-page: #fafafa;
  --np-white: #ffffff;
  --np-eucalyptus: #e8efeb;
  --np-eucalyptus-strong: #dce6df;
  --np-stone: #f2eee7;
  --np-soft: #f6f8f6;

  /* Text */
  --np-heading: #173d34;
  --np-body: #364740;
  --np-muted: #68756f;
  --np-on-dark: #f7faf8;
  --np-on-dark-muted: #e6efea;

  /* Lines */
  --np-line: #dbe3df;
  --np-line-strong: #c8d3cd;

  /* Layout */
  --np-container: 1240px;
  --np-header-container: 1660px;
  --np-service-grid-width: 1080px;
  --np-gutter: clamp(22px, 4vw, 56px);
  --np-section-space: clamp(96px, 9vw, 140px);
  --np-content-width: min(calc(100% - (var(--np-gutter) * 2)), var(--np-container));

  /* Header + hero */
  --np-header-height: 78px;
  --np-sticky-height: 78px;
  /* Hero heights now use dvh (dynamic viewport height) directly in
     hero.css / responsive.css instead of a fixed px variable -- see
     those files. dvh is a true percentage of the visible screen, so
     the hero scales consistently across desktop, laptop (incl.
     Retina/scaled MacBook displays), tablet, and phone, instead of
     being pinned to one pixel value per width breakpoint. */

  /* Typography */
  --np-font: "Nunito Sans", Arial, sans-serif;
   --np-body-size: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);     /* 17–18px */
  --np-lead-size: clamp(1.0625rem, 1.02rem + 0.16vw, 1.1875rem); /* 17–19px */
  --np-small-size: clamp(0.875rem, 0.85rem + 0.06vw, 0.9375rem); /* 14–15px */
  --np-h1: clamp(2.25rem, 1.95rem + 1.15vw, 3rem);             /* 36–48px */
  --np-h2: clamp(1.75rem, 1.58rem + 0.65vw, 2.125rem);         /* 28–34px */
  --np-h3: clamp(1.25rem, 1.16rem + 0.32vw, 1.5rem);           /* 20–24px */
  --np-h4: clamp(1.0625rem, 1rem + 0.18vw, 1.1875rem);         /* 17–19px */
  --np-hero-title: clamp(2.5rem, 2.08rem + 1.45vw, 3.375rem);  /* 40–54px */

  /* Effects */
  --np-shadow-soft: 0 10px 28px rgba(23, 61, 52, 0.07);
  --np-shadow-form: 0 18px 40px rgba(23, 61, 52, 0.09);
  --np-focus: 0 0 0 3px rgba(53, 100, 81, 0.22);
}


/* =============================================================
   2. FOUNDATION / RESET
   ============================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--np-page);
  color: var(--np-body);
  font-family: var(--np-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.site,
.site-content,
.content-area,
.site-main,
.entry-content,
.content-wrap {
  min-height: 0 !important;
  height: auto !important;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

::selection {
  background: var(--np-eucalyptus-strong);
  color: var(--np-forest-deep);
}


/* =============================================================
   3. GLOBAL TYPOGRAPHY
   Body copy stays at or above an effective 16px. Every spacing
   value below is a plain margin (not padding), which is what
   makes any single heading or paragraph easy to override with
   one line -- no additive stacking to fight, no !important war.
   Two utility classes at the end of this section (.np-tight-below
   and .np-loose-below) cover the common case of "this one heading
   or paragraph needs different space below it" without writing
   new CSS each time -- add the class in Kadence instead.
   ============================================================= */

body,
p,
li,
address,
a,
button,
input,
select,
textarea,
label,
legend {
  font-family: var(--np-font) !important;
}

body,
p,
li,
address {
  color: var(--np-body);
  font-size: var(--np-body-size);
  font-weight: 400;
  line-height: 1.62;
}

p {
  margin-top: 0;
  margin-bottom: 0.75em;
}

small,
.has-small-font-size {
  color: var(--np-muted);
  font-size: var(--np-small-size) !important;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  color: var(--np-heading);
  font-family: var(--np-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  text-transform: none;
}

h1 {
  font-size: var(--np-h1) !important;
  line-height: 1.08 !important;
  margin-bottom: 32px !important;
}

h2 {
  font-size: var(--np-h2) !important;
  line-height: 1.14 !important;
  margin-bottom: 24px !important;
}

h3 {
  font-size: var(--np-h3) !important;
  line-height: 1.22 !important;
  margin-bottom: 18px !important;
}

h4 {
  font-size: var(--np-h4) !important;
  line-height: 1.28 !important;
  margin-bottom: 14px !important;
}

h5,
h6 {
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}

strong,
b {
  color: inherit;
  font-weight: 700;
}

a {
  color: var(--np-forest);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

a:hover,
a:focus-visible {
  color: var(--np-forest-deep);
}

:focus-visible {
  outline: 2px solid var(--np-forest) !important;
  outline-offset: 3px !important;
}

/* Add one of these as an extra class (in Kadence's "Additional CSS
   Class(es)" field) on any single heading or paragraph that needs
   a different gap below it than its default -- no new CSS needed
   for a one-off case. */
.np-tight-below {
  margin-bottom: 8px !important;
}

.np-loose-below {
  margin-bottom: 40px !important;
}


/* =============================================================
   4. GLOBAL CONTENT RAIL
   Normal new top-level Kadence rows inherit this automatically.
   The width/centering rule is wrapped in :where() so it carries
   zero specificity -- any section-specific override (even a
   single plain class) wins against it automatically. Section
   spacing uses margin rather than padding, since margins between
   adjacent sections collapse (the browser uses whichever side's
   value is larger, not both added together) -- that's what makes
   pulling two specific sections closer a one-line change instead
   of a fight against two separate stacked paddings.
   ============================================================= */

.np-container,
.np-contained > .kt-row-column-wrap,
:where(.entry-content > .wp-block-kadence-rowlayout:not(.np-full-bleed) > .kt-row-column-wrap),
:where(.entry-content > .wp-block-kadence-column > .kt-inside-inner-col
> .wp-block-kadence-rowlayout:not(.np-full-bleed) > .kt-row-column-wrap) {
  width: var(--np-content-width) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

:where(.entry-content > .wp-block-kadence-rowlayout:not(.np-hero):not(.np-full-bleed)),
:where(.entry-content > .wp-block-kadence-column > .kt-inside-inner-col
> .wp-block-kadence-rowlayout:not(.np-hero):not(.np-full-bleed)) {
  margin-top: var(--np-section-space);
  margin-bottom: var(--np-section-space);
}

.np-full-bleed > .kt-row-column-wrap {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.np-surface-dark {
  background: var(--np-forest-deep) !important;
  color: var(--np-on-dark) !important;
}

.np-surface-dark :is(h1, h2, h3, h4, h5, h6),
.np-surface-dark :is(p, li, a) {
  color: inherit !important;
}

.np-surface-soft {
  background: var(--np-eucalyptus) !important;
}

.np-surface-warm {
  background: var(--np-stone) !important;
}

/* Add one of these as an extra class on any row that needs a
   different gap above/below it than the site's normal default --
   no new CSS needed for a one-off case. */
.np-gap-tight {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.np-gap-loose {
  margin-top: 96px !important;
  margin-bottom: 96px !important;
}


/* =============================================================
   5. BUTTONS
   ============================================================= */

.wp-block-button__link,
.kt-button,
.kb-button,
input[type="submit"],
button[type="submit"],
.ff-btn-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: 14px clamp(18px, 1.5vw, 24px) !important;
  background: var(--np-forest) !important;
  color: var(--np-white) !important;
  border: 1px solid var(--np-forest) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.kt-button:hover,
.kt-button:focus-visible,
.kb-button:hover,
.kb-button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible,
.ff-btn-submit:hover,
.ff-btn-submit:focus-visible {
  background: var(--np-forest-deep) !important;
  color: var(--np-white) !important;
  border-color: var(--np-forest-deep) !important;
  transform: translateY(-1px);
}

.np-button-secondary .wp-block-button__link,
.np-button-secondary .kt-button,
.np-button-secondary .kb-button {
  background: transparent !important;
  color: var(--np-forest-deep) !important;
  border-color: var(--np-forest) !important;
}

.np-button-secondary .wp-block-button__link:hover,
.np-button-secondary .wp-block-button__link:focus-visible,
.np-button-secondary .kt-button:hover,
.np-button-secondary .kt-button:focus-visible,
.np-button-secondary .kb-button:hover,
.np-button-secondary .kb-button:focus-visible {
  background: var(--np-eucalyptus) !important;
  color: var(--np-forest-deep) !important;
  border-color: var(--np-forest) !important;
}

.wp-block-kadence-advancedbtn,
.wp-block-buttons {
  margin-top: clamp(28px, 3.5vw, 40px) !important;
}


/* =============================================================
   6. SHARED EQUAL-HEIGHT MEDIA SPLITS
   Kadence controls column order, ratio, and background position.
   ============================================================= */

.np-split-panel {
  margin: 0 !important;
}

.np-split-panel > .kt-row-column-wrap {
  align-items: stretch !important;
  gap: 0 !important;
}

.np-split-panel > .kt-row-column-wrap > .wp-block-kadence-column,
.np-split-panel > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
  min-height: 100% !important;
}

.np-split-media {
  overflow: hidden !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.np-split-media > .kt-inside-inner-col {
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}