/* ==========================================================================
   By Jillian Rose — Base Element Styles
   Global typography, links, lists, forms. Applies site-wide chrome
   (headings, body copy, nav links, footer) — does NOT touch homepage
   or page-level layout/arrangement. That is Phase 2.
   ========================================================================== */

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

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ---- Headings: Cormorant Garamond, generous fluid scale ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(32px, 4.4vw, var(--text-h1)); line-height: 1.1; }
h2 { font-size: clamp(26px, 3.2vw, var(--text-h2)); }
h3 { font-size: clamp(21px, 2.4vw, var(--text-h3)); line-height: 1.3; }
h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h4);
  letter-spacing: .01em;
  line-height: 1.4;
}

p { margin: 0 0 var(--space-3); color: var(--color-text); }

/* ---- Links ----
   Body-copy links get color + underline (not color alone — satisfies
   WCAG 1.4.1). Nav/button links override this in components.css. */
a {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .15s ease;
}
a:hover, a:focus-visible { color: var(--color-text); }
a:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }

/* ---- Lists ---- */
ul, ol { margin: 0 0 var(--space-3); padding-left: 1.3em; color: var(--color-text); }
li { margin-bottom: var(--space-1); }

/* ---- Blockquote: serif italic with accent rule ---- */
blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.3em;
  line-height: 1.5;
  color: var(--color-text);
  margin: var(--space-4) 0;
  padding: 0 0 0 var(--space-3);
  border-left: 3px solid var(--color-accent-dark);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-5) 0;
}

/* ---- Content-width container ----
   --container-width was defined in tokens.css but never actually applied
   anywhere — that gap, not the <img> rule below, was the real cause of
   featured images (and everything else) rendering at full viewport width.
   Verified against live markup: .site-inner is the unconstrained outer
   wrapper; .content-sidebar-wrap is the real width-constrained column
   wrapping .content + sidebar; .wrap is Genesis's separate reusable class
   for the header/nav/footer sections. Both get the same value so framing
   is consistent everywhere, not just in the post body. */
.wrap,
.content-sidebar-wrap {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

/* ---- Images ----
   Base rule covers every <img> in the theme, including the confirmed real
   Genesis featured-image markup:
   <a class="entry-image-link"><img class="... post-image entry-image" ...></a>
   display:block avoids the inline-image baseline gap; max-width:100% now
   has an actually-constrained ancestor to size against. */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.entry-image-link { display: block; }

/* WordPress core image-alignment classes (alignleft/alignright/aligncenter/
   alignnone) — WP core adds these to any aligned image in post content, on
   featured images and inline content images alike, but ships no CSS for
   them itself; that's always the theme's responsibility. Left undefined
   until now. */
.alignleft {
  float: left;
  margin: 0 var(--space-3) var(--space-2) 0;
}
.alignright {
  float: right;
  margin: 0 0 var(--space-2) var(--space-3);
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignnone { margin-bottom: var(--space-2); }

/* ---- Forms: baseline ----
   Uses --color-border-interactive (not the soft decorative border) —
   inputs are functional UI, not decoration, and need a perceivable
   boundary per WCAG 1.4.11. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border-interactive);
  border-radius: var(--radius);
  padding: 13px 16px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #B4ADA6; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-accent-dark);
  box-shadow: 0 0 0 3px rgba(152,114,123,.16);
}
label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

/* ---- Selection ---- */
::selection { background: var(--color-accent); color: var(--color-text); }