/* Self-hosted fonts (latin subset, variable) — replaces Elementor's Google Fonts. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(fonts/montserrat.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/eb-garamond.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/eb-garamond-italic.woff2) format("woff2"); }

/* The Economic Club of Dallas — front-end styles */

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 1%;
}

form.post-password-form {
  display: block !important;
  max-width: 420px;
  width: 90%;
  margin: 80px auto !important;
  padding: 56px 48px;
  background: #F7F0EC;
  border-top: 3px solid #C7AC81;
  text-align: center;
  box-sizing: border-box;
}

.ppf-eyebrow {
	font-family: "Helvetica Light", Helvetica, sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C7AC81;
  margin: 0 0 24px;
}

h2.ppf-heading.ppf-heading {
  font-family: "EB Garamond", Georgia, 'Times New Roman', serif;
  font-size: 2.65rem;
  line-height: 1.25;
  color: #5E1B23;
  font-weight: 400;
  margin: 0 0 24px;
}

.ppf-subtext {
	font-family: "Helvetica Light", Helvetica, sans-serif;
  font-size: 1.5rem;
  color: #4a4a4a;
  line-height: 1.5;
	font-weight: 200;
  max-width: 460px;
  margin: 0 auto 40px;
}

.ppf-field {
  text-align: left;
  max-width: 360px;
  margin: 0 auto 24px;
}

.ppf-field label {
  display: block;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C7AC81;
  margin-bottom: -15px;
}

.ppf-field input[type="password"] {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid #C7AC81;
  background: #fff;
  font-size: 1rem;
  box-sizing: border-box;
}

.ppf-field input[type="password"]:focus {
  outline: none;
  border-bottom-color: #5E1B23;
}

.ppf-submit {
  max-width: 360px;
  margin: 0 auto 32px;
}

.ppf-submit input[type="submit"] {
  display: block;
  width: 100%;
  background: #5E1B23;
  color: #fff;
  border: none;
  padding: 14px;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}

.ppf-submit input[type="submit"]:hover {
  background: #4a151c;
}

.ppf-help {
  font-size: 1.1rem;
  color: #6b6b6b;
}

.ppf-help a {
  color: #C7AC81;
  text-decoration: underline;
}

@media (max-width: 480px) {
  form.post-password-form {
    margin: 40px auto !important;
    padding: 40px 24px;
  }
  .ppf-heading {
    font-size: 1.75rem;
  }
}


/* Surface definitions */
.ecd-surface-dark {
  --ecd-heading: #F7F0EC;
  --ecd-body:    #F7F0EC;
  --ecd-accent:  #C7AC81;
}

.ecd-surface-light {
  --ecd-heading: #5E1B23;
  --ecd-body:    #272C30;
  --ecd-accent:  #5E1B23;
}

/* Consumption. Extra .elementor-kit-5 to outrank the kit heading rules
   deterministically instead of relying on stylesheet order. */
.elementor-kit-5 .ecd-surface-dark,
.elementor-kit-5 .ecd-surface-light {
  color: var(--ecd-body);
}

.elementor-kit-5 .ecd-surface-dark :is(h1,h2,h3,h4,h5,h6),
.elementor-kit-5 .ecd-surface-light :is(h1,h2,h3,h4,h5,h6) {
  color: var(--ecd-heading);
}

.elementor-kit-5 .ecd-surface-dark a:not(.elementor-button),
.elementor-kit-5 .ecd-surface-light a:not(.elementor-button) {
  color: var(--ecd-accent);
}
/* Events: registration form variants, driven by ACF via body_class.
   ponytail: CSS hide — not a security gate, just what the form shows. */
.ecd-no-guest .elementor-field-group-guest_name,
.ecd-no-guest .elementor-field-group-guest_email,
.ecd-no-guest .elementor-field-option:has(input[value="Guest"]),
.ecd-no-dietary .elementor-field-group-dietary,
.ecd-custom-form .ecd-template-form { display: none; }

/* Invite card: one speaker gets the photo-left layout, two get the stacked
   two-up. Both containers are in the markup; body class picks one.
   ponytail: two designs = two-place edits, the client wanted both looks. */
.ecd-solo-speaker .ecd-speakers-duo,
body:not(.ecd-solo-speaker) .ecd-speakers-solo,
.ecd-solo-speaker .ecd-speaker-2 { display: none; }

/* Header nav: "Become a Member" is the menu item with CSS class `menu-button`.
   Nav links have 0 horizontal padding (the menu gap spaces them), so the bordered
   button sets its own. Kit prefix + repeated class outranks Elementor's per-element padding rule.
   Moved from Customizer Additional CSS + the header template's custom CSS. */
.elementor-kit-5 .elementor-location-header .elementor-nav-menu--main .menu-button > .elementor-item.elementor-item {
  border-style: solid;
  border-width: 1px;
  padding: 12px 22px;
}

/* ------------------------------------------------------------------
   Redesign globals (Design Diff 01 · Global Pass)
   ------------------------------------------------------------------ */

/* §4: long paragraphs stay readable (about 70 characters) as content width grows. */
.elementor-widget-text-editor { max-width: 680px; }

/* §1: photo hero. Give a page's first container the CSS class `ecd-hero` and set
   the photo as its background (Cover, Center Center). This adds the burgundy
   fade (top for the nav, bottom for the headline) so pages need no custom CSS. */
.e-con.ecd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 1;
  pointer-events: none;
  background-image: linear-gradient(180deg,
    rgba(56, 16, 21, .88) 0%,
    rgba(56, 16, 21, .55) 14%,
    rgba(56, 16, 21, 0) 32%,
    rgba(56, 16, 21, 0) 42%,
    rgba(56, 16, 21, .78) 72%,
    rgba(56, 16, 21, .92) 100%);
}
.e-con.ecd-hero > * { position: relative; } /* content above the fade */

/* Hero height: interior 60vh capped at 560 (Elementor has no max for min-height).
   Home adds `ecd-hero--home` for 100vh capped at 900. */
.e-con.ecd-hero { min-height: min(60vh, 560px); }
.e-con.ecd-hero--home { min-height: min(100vh, 900px); }
@media (max-width: 767px) {
  .e-con.ecd-hero { min-height: 420px; }
  .e-con.ecd-hero--home { min-height: 88vh; }
}

/* Image widget crops: class `ecd-photo` is 3:2, `ecd-headshot` is square. A headshot
   with no image yet shows a plain cream square instead of Elementor's placeholder art. */
.ecd-photo img, .ecd-headshot img { display: block; width: 100%; object-fit: cover; }
.ecd-photo img { aspect-ratio: 3 / 2; }
.ecd-headshot img { aspect-ratio: 1 / 1; background: var(--e-global-color-ef50677); }
.ecd-headshot img[src*="placeholder"] { object-position: -9999px 0; }

/* Home 3a uses its own fade stops: deeper at the bottom for the rail. */
.e-con.ecd-hero--home::before {
  background-image: linear-gradient(180deg,
    rgba(56, 16, 21, .88) 0%,
    rgba(56, 16, 21, 0) 22%,
    rgba(56, 16, 21, 0) 30%,
    rgba(56, 16, 21, .90) 70%,
    rgba(56, 16, 21, .94) 100%);
}

/* [ecd_next_session]: the Home hero's rail (Home 3a). Fonts come from the kit's
   globals via Elementor's CSS variables, so Site Settings changes carry through. */
.ecd-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 36px;
  row-gap: 6px;
  min-height: 88px;
  border-top: 1px solid rgba(199, 172, 129, .45);
}
.ecd-rail__label,
.ecd-rail__more {
  font-family: var(--e-global-typography-b09e3d7-font-family);
  font-size: var(--e-global-typography-b09e3d7-font-size);
  font-weight: var(--e-global-typography-b09e3d7-font-weight);
  letter-spacing: var(--e-global-typography-b09e3d7-letter-spacing);
  text-transform: uppercase;
}
.ecd-rail__label { color: var(--e-global-color-e04dd47); }
.ecd-rail .ecd-rail__title {
  font-family: var(--e-global-typography-11fe3f2-font-family);
  font-size: var(--e-global-typography-11fe3f2-font-size);
  font-weight: 400;
  color: #fff;
}
.ecd-rail__meta {
  font-family: var(--e-global-typography-75c399f-font-family);
  font-size: var(--e-global-typography-75c399f-font-size);
  font-weight: 300;
  color: var(--e-global-color-d52ff85);
}
.ecd-rail .ecd-rail__more { margin-left: auto; color: #fff; }
.ecd-rail .ecd-rail__title:hover,
.ecd-rail .ecd-rail__more:hover { color: var(--e-global-color-e04dd47); }
@media (max-width: 1024px) {
  .ecd-rail { flex-direction: column; align-items: flex-start; padding: 20px 0 24px; }
  .ecd-rail .ecd-rail__more { margin-left: 0; margin-top: 8px; }
}

/* §4: the header sits transparent over the hero, aligned to the same 1320 box. */
body:has(.ecd-hero) { position: relative; }
body:has(.ecd-hero) .elementor-location-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 99;
}
body:has(.ecd-hero) .elementor-location-header .elementor-element-f83e0fa {
  background: transparent !important; /* beats Elementor's generated background rule */
  border-bottom-color: rgba(247, 240, 236, .15);
}

/* Header drawer (tablet and mobile): Become a Member as an outlined gold button,
   inset to line up with the other drawer items. */
.elementor-kit-5 .elementor-location-header .elementor-nav-menu--dropdown .menu-button > .elementor-item.elementor-item {
  justify-content: center;
  margin: 20px 64px 24px;
  padding: 14px 20px;
  border: 1px solid var(--e-global-color-e04dd47);
  color: var(--e-global-color-e04dd47);
}
@media (max-width: 767px) {
  .elementor-kit-5 .elementor-location-header .elementor-nav-menu--dropdown .menu-button > .elementor-item.elementor-item {
    margin: 16px 20px 20px;
  }
}

/* Members: cards open the bio dialog ([ecd_member_modal], js/member-modal.js). */
.member-card { cursor: pointer; }
.member-card:focus-visible { outline: 1px solid var(--e-global-color-f42742c); outline-offset: 6px; }
.member-card:hover .elementor-heading-title { color: var(--e-global-color-f42742c); }
.ecd-headshot img { object-position: center 20%; } /* keep faces in portrait crops */

.ecd-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(56, 16, 21, .72);
}
.ecd-modal[hidden] { display: none; }
.ecd-modal__card {
  position: relative; width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto;
  padding: 48px 40px; background: var(--e-global-color-5c0c78e);
  border-top: 2px solid var(--e-global-color-e04dd47);
}
.ecd-modal__close {
  position: absolute; top: 14px; right: 16px; padding: 6px;
  background: none; border: 0; color: var(--e-global-color-primary); font-size: 18px; cursor: pointer;
}
.ecd-modal__name {
  margin: 0 0 6px; color: var(--e-global-color-primary);
  font-family: var(--e-global-typography-7c87c31-font-family); font-size: var(--e-global-typography-7c87c31-font-size);
  font-weight: var(--e-global-typography-7c87c31-font-weight); line-height: var(--e-global-typography-7c87c31-line-height);
}
.ecd-modal__role {
  margin: 0 0 20px; color: var(--e-global-color-f42742c);
  font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.ecd-modal__bio { margin: 0 0 24px; font-size: 16px; line-height: 1.65; }
.ecd-modal__link {
  font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.ecd-modal__close:hover, .ecd-modal__close:focus { background: none; color: var(--e-global-color-f42742c); } /* beats the theme's button:focus fill */
.ecd-modal__close:focus-visible { outline: 1px solid var(--e-global-color-f42742c); }

/* Full-bleed photo band (Events): the photo is the container's background. */
.e-con.ecd-wide-photo { aspect-ratio: 3 / 1; }
@media (max-width: 767px) { .e-con.ecd-wide-photo { aspect-ratio: 3 / 2; } }

/* News: [ecd_pdf_badge] is a small outlined label. */
a.ecd-pdf-badge {
  display: inline-block; padding: 6px 10px; white-space: nowrap; line-height: 1.2; border: 1px solid var(--e-global-color-f42742c);
  color: var(--e-global-color-primary); font-size: 12px; font-weight: 500; letter-spacing: .14em;
}
a.ecd-pdf-badge:hover { border-color: var(--e-global-color-f42742c); color: var(--e-global-color-f42742c); }

/* A heading link that should read as a link (Contact's email): thin gold underline. */
.ecd-link-underline .elementor-heading-title a { /* beats Elementor's no-underline on heading links */
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
  text-decoration-color: var(--e-global-color-e04dd47);
}

/* News: external headlines end in a small gold ↗ (class on the Loop Item's title). */
.ecd-external .elementor-heading-title a::after {
  content: "↗"; margin-left: .3em;
  font-family: Montserrat, sans-serif; font-size: 15px; color: var(--e-global-color-f42742c);
}

/* Membership tier cards: Neutral 200 border with a Gold Deep top edge. */
body .elementor .e-con.ecd-card-gold-top { border-top-color: var(--e-global-color-f42742c); }

/* Apply form (widget class `ecd-form`): 52px fields, an "Or" divider, quiet notes. */
.ecd-form .elementor-field-textual:not(textarea) { height: 52px; min-height: 0; padding-top: 0; padding-bottom: 0; }
.ecd-form .elementor-field-textual { padding-left: 18px; padding-right: 18px; }
.ecd-form .ecd-form-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--e-global-color-dbd1c40); }
.ecd-form .ecd-form-note-nomination {
  margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--e-global-color-33e90c6);
  font-size: 18px; line-height: 1.65;
}
.ecd-form .ecd-form-or {
  display: flex; align-items: center; gap: 20px; width: 100%; margin: 8px 0;
  color: var(--e-global-color-f42742c); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.ecd-form .ecd-form-or::before, .ecd-form .ecd-form-or::after { content: ""; flex: 1; border-top: 1px solid var(--e-global-color-33e90c6); }

/* Full-bleed two-column rows (Apply): backgrounds run to the window edge, but the
   content's outer edge stays on the 1320 box: 64px, or the box margin past 1448px.
   Percent padding resolves against the full-width row. Tablet and mobile stack. */
@media (min-width: 1025px) {
  body .elementor .e-con.ecd-bleed-start { --padding-left: max(64px, calc(50% - 660px)); }
  body .elementor .e-con.ecd-bleed-end { --padding-right: max(64px, calc(50% - 660px)); }
}

/* Event detail (4h): the invitation card. Centered, tight paragraphs, round portraits. */
.ecd-invite-card { text-align: center; }
.ecd-invite-card p { margin: 0; }
.ecd-invite-card .elementor-widget-text-editor { max-width: none; }
.ecd-italic .elementor-heading-title { font-style: italic; }
.elementor-widget-image.ecd-portrait img { /* outranks Elementor's image radius */
  display: block; width: 128px; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%;
  border-radius: 50%; padding: 4px; border: 1px solid var(--e-global-color-c7ac860);
}

/* Registration: the delivery checkboxes sit under a hairline, options on one line. */
.ecd-form .elementor-field-type-checkbox { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--e-global-color-33e90c6); }
.ecd-form .elementor-field-subgroup .elementor-field-option label { font-size: 16px; color: var(--e-global-color-dbd1c40); }
@media (max-width: 767px) { .elementor-widget-image.ecd-portrait img { width: 104px; } } /* two fit side by side */

/* Footer "The Club": a grid of [left list | 48px | right list], each list column as wide as its
   own text, with the heading centered over the 48px gap: so it sits midway between the two
   lists' text however long either is (Luisa). The lists' wrapper is display: contents so its
   two widgets become the grid's outer columns. */
.e-con.ecd-club { display: grid !important; grid-template-columns: max-content 48px max-content; gap: 20px 0 !important; } /* not Elementor's 20px column gap */
.ecd-club > .elementor-widget-heading { grid-column: 2; justify-self: center; width: max-content !important; max-width: none !important; white-space: nowrap; } /* wider than the 48px track (Elementor caps widgets at 100%): centered overflow */
.ecd-club > .e-con { display: contents; }
.ecd-club > .e-con > .elementor-widget:first-child { grid-column: 1; }
.ecd-club > .e-con > .elementor-widget:last-child { grid-column: 3; }

/* [ecd_recent_speakers]: the recent-speakers line as a slider. Label, then a scroll-snap
   row of "Name, Title" in the serif with gold dots between, then arrows (only when it
   overflows). Type and colours come from the kit's globals (Eyebrow, H4; Gold Deep,
   Gold, Primary), so it matches the static line it replaces. */
.ecd-speakers { display: flex; align-items: center; gap: 32px; }
.ecd-speakers__label {
  flex: none;
  font-family: var(--e-global-typography-b09e3d7-font-family), sans-serif;
  font-size: var(--e-global-typography-b09e3d7-font-size);
  font-weight: var(--e-global-typography-b09e3d7-font-weight);
  letter-spacing: var(--e-global-typography-b09e3d7-letter-spacing);
  text-transform: uppercase;
  color: var(--e-global-color-f42742c);
}
.ecd-speakers__track {
  flex: 1; min-width: 0; display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ecd-speakers__track::-webkit-scrollbar { display: none; }
.ecd-speakers__item {
  flex: none; white-space: nowrap; scroll-snap-align: start;
  font-family: var(--e-global-typography-11fe3f2-font-family), serif;
  font-size: var(--e-global-typography-11fe3f2-font-size);
  font-weight: var(--e-global-typography-11fe3f2-font-weight);
  line-height: var(--e-global-typography-11fe3f2-line-height);
  color: var(--e-global-color-primary);
}
.ecd-speakers__item + .ecd-speakers__item::before {
  content: "·"; margin: 0 32px; color: var(--e-global-color-e04dd47);
}
.ecd-speakers__nav { flex: none; display: flex; gap: 8px; }
.ecd-speakers__nav[hidden] { display: none; }
.ecd-speakers__nav button {
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--e-global-color-f42742c); border-radius: 0;
  color: var(--e-global-color-primary); font-size: 15px; line-height: 1;
}
.ecd-speakers__nav button:hover:not(:disabled) { background: var(--e-global-color-primary); color: #fff; }
.ecd-speakers__nav button:disabled { opacity: .35; cursor: default; }
@media (max-width: 767px) {
  /* stacked: label, the row (one speaker per swipe, wrapping), arrows */
  .ecd-speakers { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ecd-speakers__track { width: 100%; }
  .ecd-speakers__item { flex-basis: 100%; white-space: normal; }
  .ecd-speakers__item + .ecd-speakers__item::before { content: none; }
}

/* Intro band under a photo hero (interior_hero): its last paragraph's margin plus the next
   band's full top padding left a big gap (Luisa). Tighten to 40 (28 on phones). */
.e-con.ecd-intro p:last-child { margin-bottom: 0; }
.e-con.ecd-intro + .e-con { --padding-top: 40px !important; } /* beats the band's own per-element value */
@media (max-width: 767px) { .e-con.ecd-intro + .e-con { --padding-top: 28px !important; } }