/* ==========================================================================
   Patru.design — base element styles
   --------------------------------------------------------------------------
   Depends on css/tokens.css (load tokens first). Plain CSS, no build step.
   Replicates the live Squarespace 7.1 computed styles: fluid type formula,
   heading line-height formula, rich-text link underline, and the solid
   square button with the bottom-up "wipe" hover.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset (minimal, modern)
   -------------------------------------------------------------------------- */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-stack);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--theme-text);
  background-color: var(--theme-bg);
}

/* --------------------------------------------------------------------------
   Fluid type scale — exact Squarespace 7.1 formula, two branches:
   1) portrait phones (<=767px, portrait): scales with viewport HEIGHT,
      clamped at 900px:  (scale - 1) * 0.012 * min(100vh, 900px) + 1rem
   2) >=768px or landscape: scales with viewport WIDTH, capped by the
      2560px max page width:
      min((scale - 1) * 1.2vw + 1rem,
          max((scale - 1) * 0.012 * maxPageWidth + 1rem, scale * 1rem))
   Each element sets --fluid-scale; the three shared rules below do the rest.
   The unqualified rule is the static fallback (scale * 1rem), mirroring the
   live h1{font-size:var(--heading-1-size)} fallback.
   -------------------------------------------------------------------------- */

body     { --fluid-scale: var(--text-normal-scale); }
h1       { --fluid-scale: var(--h1-scale); }
h2       { --fluid-scale: var(--h2-scale); }
h3       { --fluid-scale: var(--h3-scale); }
h4       { --fluid-scale: var(--h4-scale); }
.text-large { --fluid-scale: var(--text-large-scale); }  /* live: .sqsrte-large */
.text-small { --fluid-scale: var(--text-small-scale); }  /* live: .sqsrte-small */
.btn     { --fluid-scale: var(--btn-font-scale); }

body,
h1, h2, h3, h4,
.text-large,
.text-small,
.btn {
  font-size: calc(var(--fluid-scale) * 1rem);
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  body,
  h1, h2, h3, h4,
  .text-large,
  .text-small,
  .btn {
    font-size: calc((var(--fluid-scale) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  }
}

@media screen and (min-width: 768px), screen and (orientation: landscape) {
  body,
  h1, h2, h3, h4,
  .text-large,
  .text-small,
  .btn {
    font-size: min(
      calc((var(--fluid-scale) - 1) * 1.2vw + 1rem),
      max(
        calc((var(--fluid-scale) - 1) * 0.012 * var(--max-page-width) + 1rem),
        calc(var(--fluid-scale) * 1rem)
      )
    );
  }
}

/* --------------------------------------------------------------------------
   Headings
   Live line-height formula per level:
     calc(--heading-font-line-height * (1 + (1 - scale) / 25))
   e.g. h1: 1.2em * (1 + (1 - 5.5)/25) = 0.984em
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 2rem 0;                          /* live: h1,h2,h3,h4{margin:2rem 0} */
  font-family: var(--font-stack);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: none;
  color: var(--theme-heading);
}

h1 { line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h1-scale)) / 25)); }
h2 { line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h2-scale)) / 25)); }
h3 { line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h3-scale)) / 25)); }
h4 { line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h4-scale)) / 25)); }

/* --------------------------------------------------------------------------
   Body text tiers
   Live re-applies line-height on p (em unit) so each tier gets 1.4 of its
   OWN font-size rather than inheriting body's computed pixels.
   -------------------------------------------------------------------------- */

p {
  margin: 1rem 0;                          /* live: p,.sqsrte-small{margin:1rem 0} */
  line-height: var(--body-line-height);
}

.text-large,
.text-small {
  line-height: var(--body-line-height);
}

/* Rich-text lists (live: ul margin 1em 0, 40px indent, half-spaced li
   paragraphs). Component lists (nav, social, galleries) reset their own. */
ul, ol {
  margin: 1em 0;
  padding-left: 40px;
}

li p {
  margin: 0.5em 0;
}

/* Squarespace hides accidentally-empty paragraphs but preserves the
   deliberate ones (data-rte-preserve-empty) as blank lines; the zero-width
   space recreates the line box. */
p:empty {
  display: none;
}

p:empty[data-rte-preserve-empty] {
  display: block;
}

p:empty[data-rte-preserve-empty]::after {
  content: "\200b";
}

/* --------------------------------------------------------------------------
   Links
   Live rich-text links: no text-decoration; 1px currentColor gradient drawn
   at the bottom, thickening to 2px on hover.
   Bare <a> stays unstyled (nav/components style their own links).
   -------------------------------------------------------------------------- */

a {
  color: inherit;
}

p a,
li a,
.text-large a,
.text-small a {
  display: inline;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left bottom;
  transition:
    color 0.6s var(--anim-curve-flex),
    background-size var(--link-underline-duration) var(--anim-curve-flex);
}

p a:hover,
li a:hover,
.text-large a:hover,
.text-small a:hover {
  color: inherit;
  background-size: 100% 2px;               /* live hover thickens underline */
}

/* --------------------------------------------------------------------------
   Buttons — live tweaks: solid style, square shape, stroke 0.
   Hover (flex animation type): a ::before layer colored with the button's
   TEXT color wipes up from the bottom (clip-path) while the label flips to
   the button's BACKGROUND color. transform:scaleY(1) creates the stacking
   context that keeps the z-index:-1 fill inside the button.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  position: relative;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-stack);
  font-weight: var(--btn-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  color: var(--theme-btn-text);
  background-color: var(--theme-btn-bg);
  border: none;                            /* shape-square + stroke 0px */
  border-radius: 0;
  cursor: pointer;
  transform: scaleY(1);
  transition: color var(--btn-hover-duration) var(--anim-curve-flex);
}

.btn::before {
  content: "";
  position: absolute;
  z-index: var(--z-below);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid var(--theme-btn-bg);
  background-color: var(--theme-btn-text);
  clip-path: polygon(-2% 102%, 102% 102%, 102% 102%, -2% 102%);
  transition: clip-path var(--btn-hover-duration) var(--anim-curve-flex);
  transform: translateZ(0);
}

@media (hover: hover) {
  .btn:hover {
    color: var(--theme-btn-bg);
  }

  .btn:hover::before {
    clip-path: polygon(-2% -2%, 102% -2%, 102% 102%, -2% 102%);
  }
}

/* --------------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--max-page-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* Section base: any themed region flips its palette via the variables
   remapped in tokens.css. */
[data-theme] {
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

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

img,
picture,
video,
svg {
  max-width: 100%;
}

img,
video {
  display: block;
  height: auto;
}

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

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}