@layer base {

* {
  box-sizing: border-box;
}

/* Safari/iOS renders native button chrome (a grey rounded pill) under
   whatever background a <button> sets unless appearance is reset — Chrome's
   device emulation is still Blink under the hood and never shows this. */
button {
  appearance: none;
  -webkit-appearance: none;
}

/* Mobile Safari/Chrome paint a grey tap-highlight box on any tappable
   element by default — most visible on custom (non-native) interactive
   elements like our role="button" card and icon buttons. We already show
   our own :focus-visible/:hover feedback, so suppress the default. */
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Only show a focus ring for real keyboard navigation, not for the
   programmatic .focus() calls our JS makes after a tap/click (opening the
   mobile nav, etc.) — :focus-visible tells those apart automatically. */
button:focus {
  outline: none;
}

body.using-keyboard button:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Reserve the scrollbar's space permanently so that locking the page
     (overflow: hidden) while a modal is open doesn't remove the scrollbar
     and shift the page/modal sideways. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  margin: 0;
  line-height: 1.15;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 90%;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Placeholder blocks — stand in for real photography until assets exist */
.placeholder-img {
  background: var(--color-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  min-height: 200px;
  border-radius: 4px;
}

.placeholder-line {
  height: 10px;
  border-radius: 5px;
  background: #b3b3b3;
  margin: 0.6rem 0;
}

.placeholder-line--full {
  width: 100%;
  max-width: 540px;
}

.placeholder-line--short {
  width: 45%;
  max-width: 260px;
}

/* Global padding for top-level page sections. Scoped to DIRECT children of
   <main> so it applies to the real page sections (hero, offer, find-us,
   about) but NOT to nested subsections like the .offer-group category boxes,
   which would otherwise get double-padded on top of their own spacing. */
main > section {
  padding: 4.5rem 0;
  scroll-margin-top: 140px;
}

}