/* Site-wide styles for the Ilex Garden website. Layered on colors_and_type.css */

* { box-sizing: border-box; }
body { margin: 0; }

/* ---------------------- Layout ---------------------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-6); }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--space-6); }

section { padding: var(--space-9) 0; }
section.tight { padding: var(--space-7) 0; }

/* ---------------------- Top nav ---------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 237, 224, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.site-nav .inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  max-width: 1180px; margin: 0 auto;
}
.site-nav .brand img { height: 28px; display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); align-items: center; }
.site-nav a { color: var(--fg-2); text-decoration: none; font-size: var(--t-small); }
.site-nav a:hover { color: var(--fg-1); }
.site-nav a.active { color: var(--fg-1); font-weight: var(--w-medium); }

/* ---------------------- Buttons ---------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: var(--t-small); font-weight: var(--w-medium);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-quick) var(--ease-settle), color var(--t-quick) var(--ease-settle), border-color var(--t-quick);
}
.btn-primary { background: var(--accent-primary); color: var(--bark-50) !important; }
.btn-primary:hover { background: var(--accent-press); color: var(--bark-50); }
.btn-secondary { background: transparent; color: var(--fg-1); border-color: var(--line-medium); }
.btn-secondary:hover { background: var(--surface-sunk); color: var(--fg-1); }

/* ---------------------- Hero shared ---------------------- */
.hero { padding-top: var(--space-9); padding-bottom: var(--space-9); position: relative; }
.hero .eyebrow { display: inline-block; margin-bottom: var(--space-4); }
.hero p.lead { margin-top: var(--space-5); }
.hero .cta-row { display: flex; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; }

/* ---------------------- Cards ---------------------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-leaf);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card-canopy { background: var(--surface-canopy); color: var(--fg-on-deep); border: none; }
.card-canopy h2, .card-canopy h3, .card-canopy p { color: var(--fg-on-deep); }

/* ---------------------- Reflective prompt ---------------------- */
.reflect {
  border-left: 1px solid var(--line-medium);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
  margin-left: auto;
  margin-right: auto;
  max-width: 60ch;
}
.reflect p {
  font-style: italic; font-weight: var(--w-light);
  color: var(--fg-2); font-size: 21px; line-height: 1.5; margin: 0;
}
.reflect .label {
  font-size: var(--t-overline); text-transform: uppercase; letter-spacing: var(--track-wide);
  color: var(--fg-3); margin-bottom: var(--space-3);
}

/* ---------------------- Footer ---------------------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: var(--space-8) 0 var(--space-7);
  margin-top: var(--space-9);
  position: relative;
  overflow: hidden;
  background: rgba(244, 237, 224, 0.88);       
  backdrop-filter: blur(12px);                   
  -webkit-backdrop-filter: blur(12px);
}
.site-footer .inner {
  max-width: 1180px; margin: 0 auto; padding: 0 var(--space-6);
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-7);
}
.site-footer h4 { font-size: var(--t-overline); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--fg-3); margin: 0 0 var(--space-4); font-weight: var(--w-medium); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer a { color: var(--fg-2); text-decoration: none; font-size: var(--t-small); }
.site-footer a:hover { color: var(--fg-1); }
.site-footer .colophon { font-style: italic; font-weight: var(--w-light); color: var(--fg-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line-soft); font-size: var(--t-caption); text-align: center; }
.site-footer .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; opacity: 0.5; pointer-events: none; }

/* ---------------------- Misc ---------------------- */
.eyebrow { font-size: var(--t-overline); text-transform: uppercase; letter-spacing: var(--track-wide); font-weight: var(--w-medium); color: var(--accent-primary); }
.divider-leaf { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-7) 0; color: var(--fg-3); }
.divider-leaf::before, .divider-leaf::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 800px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .site-footer .inner { grid-template-columns: 1fr; }
}

/* ---------------------- Image slots ---------------------- */
image-slot { display: block; width: 100%; }

/* ---------------------- Type variations (set on <html data-type-variant>) ---------------------- */
html[data-type-variant="editorial"] .display,
html[data-type-variant="editorial"] h1 { font-weight: 300; letter-spacing: -0.03em; font-style: italic; }
html[data-type-variant="editorial"] h2 { font-weight: 300; font-style: italic; }

html[data-type-variant="confident"] .display,
html[data-type-variant="confident"] h1 { font-weight: 600; letter-spacing: -0.025em; }
html[data-type-variant="confident"] h2 { font-weight: 600; }

html[data-type-variant="quiet"] .display,
html[data-type-variant="quiet"] h1 { font-weight: 400; letter-spacing: -0.015em; }
html[data-type-variant="quiet"] h2 { font-weight: 400; }
html[data-type-variant="quiet"] .display { font-size: clamp(40px, 5vw, 60px); }