/* --------------------------------------------------------------------------
   1. CUSTOM PROPERTIES (color values are injected inline per-instance;
      these are the structural/fixed tokens, matching the sibling templates)
   -------------------------------------------------------------------------- */
:root {
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-12: 3rem;    --sp-20: 5rem;  --sp-28: 7rem;
  --radius-sm: 3px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.16);
  --t-fast: 150ms ease; --t-base: 250ms ease; --t-slow: 420ms ease;
  --container-max: 1280px;
  --text: #2c2c2c; --text-muted: #5f6b7a; --border: #dde4e8;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: var(--body-font), sans-serif;
  font-size:1.1rem;
  color: var(--text);
  background: var(--primary);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
/* --primary, not the template's --secondary: RISW's secondary (#86afd2) is a light blue,
   which as link text measured 2.31:1 on the white hero, against the 4.5 WCAG AA needs.
   --primary gives 7.54 there. A meeting whose secondary is a mid-tone can use the
   template's version; this palette cannot. The only links outside the white hero are in
   the footer, which overrides this rule in section 6. */
a { color: var(--primary); }
h1, h2, h3 { font-family: var(--headline-font), serif; margin: 0 0 var(--sp-4); }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.std-page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6) var(--sp-8);
}
.std-hero {
  display: grid;
  grid-template-columns: 11fr 10fr;
  gap: var(--sp-12);
  align-items: start;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-12) var(--sp-8);
}

/* --------------------------------------------------------------------------
   4. HERO LEFT COLUMN
   -------------------------------------------------------------------------- */
.std-hero-left { text-align: center; }
/* 500px, not the template's 360px, and the cap sits on the wrap rather than the image:
   the 2027 logo carries the meeting dates and a long title line, which were too small at
   360. A bare max-width: 500px on .std-logo would override the global img max-width: 100%
   and overflow any column narrower than 500, so the wrap takes the column width up to 500
   and the image fills it. That also keeps the wrap exactly the size of the image, which
   the .std-reveal percentages below depend on. */
.std-logo-wrap { position: relative; display: inline-block; width: 100%; max-width: 500px; margin-bottom: var(--sp-20); }
.std-logo { width: 100%; margin: 0 auto; }

/* top: 100% and right: 22%, not the template's 90% and 0: the dates line in logo.png ends
   78% of the way across the artwork, so right: 22% puts the badge's right edge flush with
   the end of "Rockville, MD" and its arrow under the dates, just clear of the text. The
   right-hand 0 left it hanging off past the end of the line. Retune both if the logo
   artwork changes. The 600px rule in section 9 overrides both and centres the badge. */
.std-reveal {
  position: absolute;
  top: 100%;
  right: 22%;
  z-index: 2;
  opacity: 0;
}
.std-reveal.is-visible { opacity: 1; animation: stdPopIn 450ms ease-out forwards; }
@keyframes stdPopIn {
  0%   { transform: translateX(10px) rotate(6deg); }
  70%  { transform: translateX(-3px) rotate(-2deg); }
  100% { transform: translateX(0) rotate(-4deg); }
}
.std-reveal--text {
  display: block;
  background: var(--tertiary);
  color: #fff;
  font-family: var(--body-font), sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
  padding: 0.55rem 1rem 0.5rem;
  border-radius: var(--radius-md);
  border-top: 2px solid #fff;
  box-shadow: var(--shadow-md);
  margin: 1rem 0 0 0;
}
.std-reveal--text::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 9px;
  background: var(--tertiary);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.std-reveal--image { max-width: 150px; }

.std-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-12);
}
.std-buttons-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 2rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  font-family: var(--body-font), sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.btn:active { transform: scale(0.96); }

.btn-primary {
  background-color: var(--tertiary);
  color: var(--light);
  border: 2px solid var(--tertiary);
}
.btn-primary:hover {
  background-color: var(--tertiary-dark);
  border-color: var(--tertiary-dark);
  color: var(--secondary-light);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0) scale(0.96); }

.btn-outline {
  background-color: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline:hover {
  background-color: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}
.btn-outline:active { transform: translateY(0) scale(0.96); }

.std-sponsor-text {
  color: var(--text-muted);
  font-size:1.1rem;
  font-weight:200;
  max-width: 32rem;
  margin: 0 auto;
  text-align: left;
}

/* --------------------------------------------------------------------------
   5. HERO RIGHT COLUMN
   -------------------------------------------------------------------------- */
.std-venue-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: var(--sp-6);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.std-venue-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
/* 3/2, not the template's 2/1, on purpose: venue.jpg is a 1336x890 shot of the
   Bethesda North Marriott and 2/1 cropped the top of the building off. The right
   column has slack under the Participate/Attend card, so the taller frame costs
   nothing and evens the two columns up. Match this to the photo, not the reverse. */
.std-venue-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.std-venue-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(10,20,30,0.72);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  font-size: 1rem;
  text-align:center;
}

.std-card {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.std-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
/* The last block in the card carries a bottom margin that lands on top of the card's own
   padding, adding dead space under the final date. */
.std-card > :last-child { margin-bottom: 0; }
.std-card h2 {
  font-weight:400;
  color: var(--secondary-light);
  border-bottom: 2px solid var(--secondary);
  padding-bottom: var(--sp-2);
}
.std-date-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; line-height: 1.4; }
.std-date-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: var(--sp-4);
  padding: var(--sp-1) 0;
}
.std-date-label { font-weight: 200; }
.std-date-range { color: rgba(255,255,255,0.75); font-size: 0.9em; white-space: nowrap; }

/* Two-column ledger above the mobile breakpoint: the date stays pinned right on the
   first baseline and only the label wraps. Below it the flex rule above still applies
   and stacks label over date, which is what narrow screens need. */
@media (min-width: 601px) {
  .std-date-list li { display: grid; grid-template-columns: 1fr auto; }
  .std-date-range { text-align: right; }
}

/* --------------------------------------------------------------------------
   6. FOOTER
   -------------------------------------------------------------------------- */
.std-footer {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  align-items: center;
  justify-content: space-between;
}
.std-footer-logo { max-width: 220px; }
/* The footer is the only content outside the white .std-hero, so it sits directly on the
   body background -- which this instance sets to --primary, a dark blue, rather than the
   template's light --secondary-light. --text-muted measured 1.01:1 there and the global
   --primary link colour 1.00:1, so both are reversed to light. images/ASAlogo.png is
   already a white knockout and needs no change. */
.std-footer-address { font-size: 0.85em; color: var(--light); line-height: 1.6; margin: 0; }
.std-footer-address a { color: #fff; }

/* --------------------------------------------------------------------------
   7. ENTRANCE MOTION (hero fade/rise on load; reveal handled separately by JS)
   -------------------------------------------------------------------------- */
.std-fade-in {
  opacity: 0;
  transform: translateY(6px);
  animation: stdFadeIn var(--t-slow) forwards;
}
.std-fade-in--delay1 { animation-delay: 120ms; }
@keyframes stdFadeIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .std-fade-in { animation: none; opacity: 1; transform: none; }
  .std-reveal.is-visible { animation: none; transform: translateX(0) rotate(-4deg); }
}

/* --------------------------------------------------------------------------
   8. EXPANSION MODULE SHELL (header.cfm / footer.cfm / satellite pages)
   -------------------------------------------------------------------------- */
.expansion-page { max-width: var(--container-max); margin: 0 auto; padding: var(--sp-8) var(--sp-6); }
.expansion-back {
  display: inline-block;
  margin-bottom: var(--sp-6);
  color: var(--secondary);
  text-decoration: none;
  font-weight: 600;
}
.expansion-back:hover { text-decoration: underline; }
.expansion-block-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.expansion-block-header .expansion-back { margin-bottom: 0; }
.expansion-block-logo { max-width: 180px; flex-shrink: 0; }
.expansion-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.expansion-block--wide { padding-left: var(--sp-20); padding-right: var(--sp-20); }
.expansion-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-8);
}
.expansion-nav a { text-decoration: none; color: var(--primary); font-weight: 600; }
.expansion-nav a:hover { color: var(--secondary); }

.expansion-block h2 {
  margin-top: var(--sp-20);
  border-bottom: 2px solid var(--secondary);
  padding-bottom: var(--sp-2);
}
.expansion-nav + div h2 { margin-top: 0; }

.center { text-align: center; }

.guidelines-image { margin: 0 auto; }

/* --- Submission accordion --- */
.submission-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border-radius: var(--radius-sm);
}
.submission-meta-item {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  font-size: 0.82rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.6rem;
}
.submission-meta-label { font-weight: 700; color: var(--primary); white-space: nowrap; }

.accordion { margin-top: var(--sp-4); margin-bottom: var(--sp-8); }
.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-2);
  overflow: hidden;
}
.accordion-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem var(--sp-6);
  font-family: var(--body-font), sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--t-fast);
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--secondary);
  border-bottom: 2px solid var(--secondary);
  transform: rotate(45deg);
  transition: transform var(--t-base);
  flex-shrink: 0;
  margin-left: var(--sp-4);
}
.accordion-item[open] > summary::after { transform: rotate(-135deg); }
.accordion-item summary:hover { background: color-mix(in srgb, var(--primary) 90%, var(--secondary)); }
.accordion-item[open] > summary { border-bottom: 1px solid var(--border); }
.accordion-body { padding: var(--sp-6); background: var(--light); }
.accordion-body > *:first-child { margin-top: 0; }
.accordion-body > *:last-child  { margin-bottom: 0; }
.accordion-body h4 {
  font-family: var(--headline-font), serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--primary);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
}
.accordion-body ul, .accordion-body ol { padding-left: 2.25rem; }

.badge-open {
  display: inline-block;
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.15em 0.55em;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--body-font), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary);
  background: var(--tertiary);
  border-radius: 100px;
  vertical-align: middle;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */
/* Stack below 1024px. The two-column hero needs a genuinely wide viewport -- between 900 and
   1024 the columns were narrow enough that the layout went awkward, so the stack point moved
   up. The .98 is deliberate: on a display with a fractional device pixel ratio (Windows at
   125% is the common case) the viewport width is itself fractional, so a plain 1023px misses
   a window whose width reports as 1023 but measures 1023.2. 1023.98 catches everything below
   1024 and still leaves a true 1024-wide viewport, iPad landscape included, on two columns. */
@media (max-width: 1023.98px) {
  .std-hero { grid-template-columns: 1fr; padding: var(--sp-8); }
  /* Stacked, the button block's desktop margins read as dead air rather than as separation
     between two columns, so pull both in. */
  .std-buttons { margin-top: var(--sp-6); margin-bottom: var(--sp-8); }
}
@media (max-width: 600px) {
  .std-page { padding: var(--sp-8) var(--sp-4); }
  .std-hero { padding: var(--sp-6); }
  .std-logo-wrap { margin-bottom: 4.5rem; }
  .std-reveal { top: calc(100% + 10px); left: 50%; right: auto; }
  .std-reveal.is-visible { animation: stdPopInDown 450ms ease-out forwards; }
  .std-buttons-row { flex-direction: column; width: 50%; }
  .btn { width: 100%; text-align: center; justify-content: center; }
  .std-footer { flex-direction: column; align-items: flex-start; }
  .expansion-block-header { flex-wrap: wrap; }
  .expansion-block-logo { max-width: 110px; }
}
@keyframes stdPopInDown {
  0%   { transform: translateX(-50%) translateY(-8px); }
  70%  { transform: translateX(-50%) translateY(3px); }
  100% { transform: translateX(-50%) translateY(0); }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .std-reveal.is-visible { animation: none; transform: translateX(-50%) translateY(0); }
}