/* ==========================================================================
   Pottery & Glass Land — Shared Site Styles

   Link this in every page's <head>, BEFORE that page's own <style> block
   (if it has one), so page-specific rules still win where a page needs
   something different.

   What's in here: things that were already identical across the existing
   pages (color/font tokens, reset, links, buttons, basic form-field rules),
   plus new base styles for headings/buttons/inputs so plain HTML looks
   right with no class added.

   What's deliberately NOT in here: header/nav/hero/footer sizing and
   page-only components. Those already differ a little page to page
   (padding, breakpoints, sticky behavior) — pulling them in here would
   have quietly changed how an existing page looks, so they stay in each
   page's own <style> block exactly as before.
   ========================================================================== */

:root {
  --color-primary: #5B5048;
  --color-accent: #BF8160;
  --color-bg: #FDFCF8;
  --color-surface: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-muted: #666666;
  --color-border: #E5E0D8;
  --color-green: #1B6B42;
  --font-heading: 'Unna', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --radius: 12px;
  --container-padding: 24px;
  /* --max-width is intentionally not set here — index.html and
     sunday-club.html each use a different value, so each page still
     defines it in its own CSS file. --container-padding defaults to
     24px (index.html's value); sunday-club.css overrides it to 20px. */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: var(--font-body); font-weight: 400; background: var(--color-bg); color: var(--color-text); line-height: 1.6; }
a { color: inherit; text-decoration: none; }

/* --- New: base element styles, so a plain tag looks right with no class --- */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); line-height: 1.2; }
h1 { font-size: clamp(30px, 5vw, 44px); margin-bottom: 12px; }
h2 { font-size: 26px; margin-bottom: 8px; }
h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
p { color: var(--color-text-muted); }

button, input, select, textarea { font-family: var(--font-body); font-size: 14px; color: var(--color-text); }
button {
  display: inline-block; padding: 10px 22px; border-radius: 100px; font-weight: 600;
  cursor: pointer; border: none; background: var(--color-border); color: var(--color-text);
  transition: opacity 0.2s, transform 0.1s; text-align: center;
}
button:hover { opacity: 0.88; transform: translateY(-1px); }
input, select, textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); outline: none; transition: border-color 0.2s; appearance: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--color-primary); }
textarea { resize: vertical; }

/* --- Pill-button system (moved from index.html, values unchanged) --- */
.btn { display: inline-block; padding: 10px 22px; border-radius: 100px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: opacity 0.2s, transform 0.1s; text-align: center; }
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-primary { background: var(--color-primary); color: white; }
.btn-accent { background: var(--color-accent); color: white; }
.btn-outline { background: transparent; border: 2px solid currentColor; }

/* --- Form basics (already identical on both pages, moved here unchanged) --- */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* --- Phone field with country selector --- generic pattern: any phone
   field on any page pairs a country-code select with the number input,
   using the same formatPhone/getFullPhone/isValidPhone JS helpers (see
   claude/style-guide.md "Phone number fields"). */
.phone-row { display: flex; gap: 6px; align-items: stretch; }
.phone-row .phone-country { flex-shrink: 0; width: auto; padding: 10px 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.phone-row input { flex: 1; min-width: 0; }

/* --- Dark/colored-background utility ---
   Add class="on-dark" to any wrapper that sets its own background + color
   (e.g. a dark card or banner). Every heading/paragraph inside it will then
   inherit that color instead of falling back to the default brand color —
   without needing to remember to add "color: inherit" to each one by hand. */
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark p { color: inherit; }

/* --- Layout container (generic — every page uses this) --- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--container-padding); }

/* --- Nav utility: highlight one nav link (e.g. a promoted page/section) --- */
.nav-highlight { color: var(--color-accent) !important; font-weight: 600; }

/* --- Section header pattern: eyebrow label + title + intro paragraph,
   used at the top of any content section on any page --- */
section { padding: 72px 0; }
.section-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; margin-bottom: 8px; }
.section-title { font-family: var(--font-heading); font-size: clamp(24px, 4vw, 40px); font-weight: 700; color: var(--color-primary); margin-bottom: 12px; line-height: 1.2; }
.section-body { font-size: 16px; color: var(--color-text-muted); max-width: 560px; margin-bottom: 48px; }

/* --- Card: a generic bordered content box, used for any grouped content
   (a form section, a summary, a highlighted item) --- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; margin-bottom: 20px; }
.card h2, .card h3 { font-size: 21px; margin-bottom: 4px; }
.card .card-sub { font-size: 14px; color: var(--color-text-muted); margin-bottom: 20px; }

/* --- Form helper text --- */
.hint { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }

/* --- Modal / popup: a centered overlay dialog, used for any popup content
   (an info tooltip, a schedule picker, a confirmation) ---
   Structure: .modal-overlay (the dim background) > .modal (the white box) */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.5); }
.modal-overlay.open { display: flex; }
.modal { background: white; border-radius: 14px; padding: 28px 32px; max-width: 420px; width: 100%; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.modal h4 { font-size: 20px; margin-bottom: 12px; }
.modal p { font-size: 15px; line-height: 1.7; }
.modal-close { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--color-text-muted); line-height: 1; }
.modal-close:hover { color: var(--color-text); }
