/**
 * StayNomad base layer.
 *
 * Element-level defaults only. Anything that names a component belongs in
 * components.css. Every value here resolves to a token — no raw hex.
 *
 * @see docs/DESIGN-SYSTEM.md
 */

/* --- Reset ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Honour the user's OS setting rather than forcing smooth scroll on them. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  /*
   * Absorbs the scrollbar-width hairline that `.sn-bleed`'s `50vw` maths
   * produces. `clip` rather than `hidden`: `hidden` makes the body a scroll
   * container, which breaks `position: sticky` and in-page anchor scrolling.
   */
  overflow-x: clip;
  background-color: var(--sn-ivory);
  color: var(--sn-text);
  font-family: var(--sn-font-body);
  font-size: var(--sn-body);
  font-weight: var(--sn-weight-body);
  line-height: var(--sn-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Typography ------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sn-space-4);
  font-family: var(--sn-font-display);
  font-weight: var(--sn-weight-display);
  line-height: var(--sn-leading-heading);
  letter-spacing: var(--sn-tracking-display);
  color: var(--sn-text);
  text-wrap: balance;
}

h1 { font-size: var(--sn-h1); font-weight: var(--sn-weight-h1); line-height: var(--sn-leading-display); }
h2 { font-size: var(--sn-h2); font-weight: var(--sn-weight-h2); }
h3 { font-size: var(--sn-h3); }
h4 { font-size: var(--sn-h4); }

h5 { font-family: var(--sn-font-body); font-size: var(--sn-h5); font-weight: var(--sn-weight-semibold); letter-spacing: 0; }

h6 {
  font-family: var(--sn-font-body);
  font-size: var(--sn-h6);
  font-weight: var(--sn-weight-semibold);
  letter-spacing: 0;
}

p {
  margin: 0 0 var(--sn-space-5);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

strong { font-weight: var(--sn-weight-semibold); }

small {
  font-size: var(--sn-small);
  color: var(--sn-text-muted);
}

/* --- Links ------------------------------------------------------------ */

a {
  color: var(--sn-orange-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--sn-duration-fast) var(--sn-ease);
}

a:hover {
  color: var(--sn-orange-hover);
}

/* --- Lists ------------------------------------------------------------ */

/*
 * Prose defaults only. Scoped to unclassed lists because every component list
 * — navigation, footer columns, amenity grids — is a layout structure that
 * happens to be marked up as a list, and inheriting an indent and an
 * inter-item margin actively fights its own spacing. A horizontal nav
 * inheriting `li + li { margin-top }` misaligns every item but the first,
 * which is exactly the bug this scoping prevents.
 *
 * :where() keeps specificity at zero, so a component never has to out-specify
 * the base layer to undo it.
 */
:where(ul, ol):not([class]) {
  margin: 0 0 var(--sn-space-5);
  padding-left: var(--sn-space-5);
}

:where(ul, ol):not([class]) > li + li {
  margin-top: var(--sn-space-2);
}

/* --- Media ------------------------------------------------------------ */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

/* --- Forms ------------------------------------------------------------ */

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

/*
 * Hello Elementor's reset.css skins every bare <button> in its own #cc3366 —
 * a pink border, and on hover a filled pink background. Our buttons are either
 * .sn-btn, which paints itself, or deliberately chromeless (the FAQ triggers,
 * the header's menu toggle), so that skin only ever leaked through as a stray
 * colour one byte away from the brand orange #CC5500. Strip it and let each
 * component own its own appearance.
 *
 * Safe against .sn-btn: every variant sets its own background, border and
 * padding at higher specificity, hover included.
 *
 * The attribute selectors have to be repeated rather than relying on the bare
 * `button` element selector: reset.css writes its skin as
 * `[type="button"], [type="submit"], button`, and an attribute selector
 * outweighs an element one. Our buttons all carry an explicit type, so a plain
 * `button:hover` rule lost to `[type="button"]:hover` and the fill stayed pink.
 */
button,
[type="button"],
[type="submit"],
[type="reset"] {
  padding: 0;
  background: none;
  border: 0;
}

button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus,
[type="reset"]:hover,
[type="reset"]:focus {
  background: none;
  color: inherit;
}

/* --- Rules ------------------------------------------------------------ */

hr {
  height: 0;
  margin: var(--sn-space-7) 0;
  border: 0;
  border-top: 1px solid var(--sn-border);
}

/* --- Tables ----------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: var(--sn-space-3) var(--sn-space-4);
  border-bottom: 1px solid var(--sn-border);
  text-align: left;
}

th {
  font-weight: var(--sn-weight-semibold);
}

/* --- Focus ------------------------------------------------------------ */

/*
 * :focus-visible only — a mouse click on a button should not draw a ring,
 * but every keyboard path must. The fallback below covers browsers without
 * :focus-visible support by keeping the default outline rather than
 * suppressing it.
 */
:focus-visible {
  outline: var(--sn-focus-ring);
  outline-offset: var(--sn-focus-offset);
  border-radius: var(--sn-radius-sm);
}

/* --- Selection -------------------------------------------------------- */

::selection {
  background-color: var(--sn-orange);
  color: var(--sn-white);
}

/* --- Accessibility utilities ------------------------------------------ */

.sn-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — visible only once focused. */
.sn-skip-link {
  position: absolute;
  top: var(--sn-space-3);
  left: var(--sn-space-3);
  z-index: 999;
  padding: var(--sn-space-3) var(--sn-space-5);
  background-color: var(--sn-white);
  color: var(--sn-text);
  border-radius: var(--sn-radius-sm);
  box-shadow: var(--sn-shadow-lift);
  text-decoration: none;
  transform: translateY(-200%);
}

.sn-skip-link:focus {
  transform: translateY(0);
}

/*
 * <picture> is a grouping element with no layout role of its own. Left as a
 * normal box it sits between a styled wrapper and the <img>, so rules like
 * `.sn-card__media img { height: 100% }` resolve against the picture's auto
 * height instead of the ratio box and the crop silently stops working.
 * `display: contents` removes it from layout so the img is the direct child
 * every component's CSS already assumes it is.
 */
picture {
  display: contents;
}