/**
 * Embers design system
 *
 * New templates should use the semantic classes in this file. Legacy theme
 * classes remain supported through the compatibility selectors below.
 */

:root {
  /* Brand colours */
  --color-brand: #1e3a49;
  --color-brand-hover: #0d2634;
  --color-brand-deep: #0f202d;
  --color-accent: #c3a27c;
  --color-accent-strong: #c75235;
  --color-ink: #171412;
  --color-white: #fff;
  --color-surface: #fff;
  --color-surface-soft: #f1f9f7;
  --color-surface-sand: #f4ecd9;
  --color-border: rgba(30, 58, 73, .18);
  --color-border-inverse: rgba(255, 255, 255, .25);

  /* Typography */
  --font-display: "Tan Nimbus", Georgia, serif;
  --font-body: "Poppins", Arial, sans-serif;
  --font-condensed: "Oswald", Arial, sans-serif;
  --font-size-body: 1.6rem;
  --font-size-small: 1.4rem;
  --font-size-eyebrow: 1.2rem;
  --font-size-display: clamp(4.5rem, 7vw, 11.2rem);
  --font-size-heading: clamp(3.4rem, 4.4vw, 6.4rem);
  --font-size-subheading: clamp(2.8rem, 3vw, 4.8rem);
  --line-height-display: 1.18;
  --line-height-heading: 1.18;
  --line-height-body: 1.6;

  /* Spacing */
  --space-1: .4rem;
  --space-2: .8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2rem;
  --space-6: 2.4rem;
  --space-8: 3.2rem;
  --space-10: 4rem;
  --space-12: 4.8rem;
  --space-16: 6.4rem;
  --space-20: 8rem;
  --section-space: clamp(5.2rem, 7vw, 8rem);

  /* Layout and shape */
  --container-gutter: clamp(1.4rem, 3vw, 2.8rem);
  --container-wide: 144rem;
  --container-content: 124rem;
  --container-reading: 82rem;
  --radius-sm: .5rem;
  --radius-md: 1.2rem;
  --radius-lg: 2rem;
  --shadow-dialog: 0 3rem 10rem rgba(0, 0, 0, .4);
  --transition-ui: 200ms ease;

  /* Component defaults */
  --button-height: 5rem;
  --button-padding: 2rem;
  --button-radius: var(--radius-sm);
}

body {
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
.t-display,
.t-heading,
.t-subheading,
.font-display,
.tan-nimbus,
.allison-regular {
  font-family: var(--font-display);
  font-style: normal;
  line-height: var(--line-height-heading);
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* All active selectors that use the display face share safe vertical metrics. */
h1,
h2,
.page-title .title,
.heading-section .main,
.float-heading h2,
.map-load-button__label {
  font-family: var(--font-display);
  line-height: var(--line-height-heading);
}

h1,
.page-title .title,
.float-heading h2 {
  line-height: var(--line-height-display);
}

.t-display {
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
}

.t-heading {
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
}

.t-subheading {
  font-size: var(--font-size-subheading);
  line-height: var(--line-height-heading);
}

.t-body,
.font-body {
  font-family: var(--font-body);
  line-height: var(--line-height-body);
}

.t-eyebrow {
  margin-block: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--font-size-eyebrow);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.display-amp {
  display: inline-block;
  font-size: .8em;
  line-height: 1;
  vertical-align: .06em;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-brand { color: var(--color-brand) !important; }
.text-inverse { color: var(--color-white) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-accent-strong { color: var(--color-accent-strong) !important; }

/* Layout
 * Keep the theme's legacy container names on one shared geometry. New markup
 * should use .site-container (or .l-container); the aliases prevent older
 * templates from drifting horizontally.
 */
.site-container,
.l-container,
.container,
.themesflat-container:not(.full):not(.w1573):not(.w1550):not(.w1604):not(.w1600):not(.w700) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.l-container--wide { max-width: var(--container-wide); }
.l-container--reading { max-width: var(--container-reading); }
.l-section { padding-block: var(--section-space); }

.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-space, var(--space-6));
}

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-space, var(--space-4));
}

.surface-light {
  background: var(--color-surface);
  color: var(--color-brand);
}

.surface-soft {
  background: var(--color-surface-soft);
  color: var(--color-brand);
}

.surface-sand {
  background: var(--color-surface-sand);
  color: var(--color-brand);
}

.surface-brand {
  background: var(--color-brand);
  color: var(--color-white);
}

/* Buttons and text links */
.c-btn,
.button-style-1,
.button-style-2,
.button-style-3,
.btn-custom,
.btn-primary,
.event-button {
  min-height: var(--button-height);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  padding-inline: var(--button-padding);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-ui), background-color var(--transition-ui), border-color var(--transition-ui), transform var(--transition-ui);
}

.c-btn--light,
.button-style-1 {
  background: var(--color-white);
  color: var(--color-brand);
}

.c-btn--light:hover,
.button-style-1:hover {
  background: var(--color-brand);
  color: var(--color-white);
}

.c-btn--dark,
.button-style-2,
.button-style-3,
.catering-buttons .btn-custom,
.btn-primary,
.event-button {
  background: var(--color-brand);
  color: var(--color-white);
}

.c-btn--dark:hover,
.button-style-2:hover,
.button-style-3:hover,
.catering-buttons .btn-custom:hover,
.btn-primary:hover,
.event-button:hover {
  background: var(--color-brand-hover);
  color: var(--color-white);
}

.c-btn--outline {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

.c-btn--block { width: 100%; }

.c-link,
.event-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: max-content;
  border-bottom: 1px solid currentColor;
  padding-bottom: var(--space-1);
  color: inherit;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.4;
}

.c-link:hover,
.event-text-link:hover {
  color: var(--color-accent-strong);
}

.c-btn:focus-visible,
.c-link:focus-visible,
.button-style-1:focus-visible,
.button-style-2:focus-visible,
.button-style-3:focus-visible,
.btn-custom:focus-visible,
.btn-primary:focus-visible,
.event-button:focus-visible,
.event-text-link:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* Content primitives */
.c-rich-text > :first-child { margin-top: 0; }
.c-rich-text > :last-child { margin-bottom: 0; }
.c-rich-text p { line-height: var(--line-height-body); }

.c-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Theme-specific reusable helpers */
.page-spacer { min-height: 10rem; }
.search-heading { color: var(--color-ink); font-weight: 700; }
.form-required { color: #df0000; }
.menu-offset { margin-top: 3rem; }

.page-title.has-slide-image {
  background-image: var(--slide-image);
  background-position: center;
  background-size: cover;
}

.bg-text-inner.has-bg-img {
  background-image: var(--section-background);
}

.masonry-grid {
  column-count: 3;
  column-gap: var(--space-3);
}

.masonry-item {
  margin-bottom: var(--space-3);
  break-inside: avoid;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.masonry-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--transition-ui);
}

.masonry-item img:hover { transform: scale(1.05); }

.gallery-header {
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--space-4);
}

.gallery-title {
  color: var(--color-ink);
  font-size: 2rem;
  font-weight: 600;
}

.featured-image {
  width: 8rem;
  height: 8rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
}

.featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

@media (max-width: 991px) {
  .masonry-grid { column-count: 2; }
}

@media (max-width: 560px) {
  :root {
    --container-gutter: 1.4rem;
    --button-padding: 1.8rem;
  }

  .c-btn,
  .button-style-1,
  .button-style-2,
  .button-style-3,
  .btn-custom,
  .btn-primary,
  .event-button {
    font-size: 1.6rem;
  }

  .display-amp { font-size: .62em; }

  .masonry-grid { column-count: 1; }
}