/**
 * Sampatti Setu V2 — Base foundation
 *
 * Foundational rules only. No global WPResidence restyles.
 * Avoid broad element selectors against theme markup.
 */

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

/* Sensible media defaults (retina-friendly, no forced crop).
 * Hero video cover overrides live under .ss-hero only (ss-components.css). */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

img {
  -webkit-user-drag: none;
}

/*
 * Accessibility — focus
 * Do NOT remove default :focus outlines site-wide.
 * Enhance keyboard focus only via :focus-visible.
 */
:focus-visible {
  outline: 2px solid var(--ss-muted-gold, #d6b268);
  outline-offset: 3px;
}

/* Reduced-motion consumers can rely on tokens; see ss-motion.css */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}

/* -------------------------------------------------------------------------
 * Minimal utilities — only when clearly justified for future ss- markup
 * ------------------------------------------------------------------------- */

.ss-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ss-container {
  width: 100%;
  max-width: var(--ss-content-max, 72rem);
  margin-inline: auto;
  padding-inline: var(--ss-gutter-desktop, 2rem);
}

.ss-container--wide {
  max-width: var(--ss-wide-max, 90rem);
}

@media (max-width: 1024px) {
  .ss-container {
    padding-inline: var(--ss-gutter-tablet, 1.5rem);
  }
}

@media (max-width: 767px) {
  .ss-container {
    padding-inline: var(--ss-gutter-mobile, 1rem);
  }
}

/* -------------------------------------------------------------------------
 * Typography Foundation — Helvetica
 * Controlled scope: body, headings, forms, buttons
 * Does not override icon fonts (.fa, .dashicons, svg, etc.)
 * ------------------------------------------------------------------------- */
body,
input,
button,
select,
textarea {
  font-family: var(--ss-font-body, "Helvetica Neue", Helvetica, Arial, sans-serif);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ss-font-display, "Helvetica Neue", Helvetica, Arial, sans-serif);
}