/* Setup Global — section wrappers for the Elementor build.
   The source pages used inline styles on <section>/<div>; in Elementor we use
   these classes on Containers instead, driven by the same design tokens.
   Separate from setup-global.css so the source design stays untouched. */

.sg-sec        { padding-block: var(--sg-section-y); padding-inline: var(--sg-gutter); }
.sg-sec--sand  { background: var(--sg-sand); }
.sg-sec--white { background: var(--sg-white); }
.sg-sec--dark  { background: var(--sg-dark); color: var(--sg-sand); }
.sg-sec__inner { max-width: var(--sg-container); margin-inline: auto; width: 100%; }
.sg-sec__body  { margin-top: var(--sg-8); }

/* Elementor containers we tag with these classes shouldn't add their own gap. */
.sg-sec.e-con, .sg-sec__inner.e-con { --gap: 0; }

/* Legal / long-form prose pages. */
.sg-legal { max-width: 820px; margin-inline: auto; }
.sg-legal h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: var(--sg-7) 0 var(--sg-3); color: var(--sg-ink); }
.sg-legal p, .sg-legal address { color: var(--sg-muted); line-height: 1.7; margin: 0 0 var(--sg-3); font-style: normal; }
.sg-legal a { color: var(--sg-gold-text); }

/* Footer column: stack title + link list (grid cell; native container also stacks). */
.sg-footer__col { display: flex; flex-direction: column; gap: var(--sg-3, 12px); }