/*
 * Listening page theme — design tokens + base styles taken from the icavcu.org
 * site (WordPress "ica2017" theme, Foundation-based) so the page reads as part
 * of the site.
 *
 * Font note: the site uses Everett_Regular for headings. This page does not
 * load that font — headings use a system sans stack. If the ICA wants Everett
 * here, the font file already lives on this host
 * (wp-content/themes/ica2017/assets/fonts/Everett-Regular-web.woff2) and one
 * @font-face rule pointing at it is all that is needed.
 */

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-muted: #313131;
  --color-text-label: #787878;
  --color-accent: #a738e8;
  --color-footer-bg: #000000;
  --color-footer-text: #ffffff;
  --color-btn-text: #ffffff;
  --color-border: #dadada;
  --color-border-light: #e6e6e6;
  --color-border-dark: #cacaca;

  /* Fonts */
  --font-heading: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* stand-in for Everett_Regular (Dinamo, commercial) */
  --font-body: Helvetica, Roboto, Arial, sans-serif; /* matches the live site's actual body stack — no substitution needed */

  /* Type scale (verified sizes from live CSS where noted; root is 18px, not 16px) */
  --fs-root: 18px;
  --fs-h1: 34px;
  --lh-h1: 43px;
  --fs-h2: 30px;
  --lh-h2: 33px;
  --fs-eyebrow: 17px;
  --fs-label: 20px;
  --fs-body: 18px;
  --fs-footer: 15px;

  /* Spacing (designer-picked scale observed in the source CSS, not a strict base unit) */
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 20px;
  --space-lg: 30px;
  --space-xl: 60px;
  --space-2xl: 90px;
  --space-btn-y: 17px; /* the one-off button vertical padding value */

  /* Buttons */
  --radius-btn: 0; /* buttons are square on the real site */
  --radius-pill: 100px;
  --btn-min-width: 220px;
  --btn-border-width: 2px;

  /* Motion */
  --transition-base: 200ms;

  /* Layout */
  --container-max: 1500px;
  --bp-sm: 640px;
  --bp-md: 1024px;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

html {
  font-size: var(--fs-root);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  font-weight: 600;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  text-transform: uppercase;
  letter-spacing: 1px;
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: 0.64px;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  color: var(--color-text-label);
  text-transform: uppercase;
  letter-spacing: 0.5px; /* verified live-site tracking */
  margin: 0 0 var(--space-sm);
}

.muted {
  color: var(--color-text-muted);
}

a {
  color: var(--color-text);
  text-decoration: underline;
  transition: all var(--transition-base);
}

a:hover {
  color: var(--color-accent);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Buttons — square, bordered, purple fill for the primary CTA */
.cta-btn,
.outline-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 18px;
  min-width: var(--btn-min-width);
  padding: var(--space-btn-y) var(--space-lg) 15px;
  border-radius: var(--radius-btn);
  border: var(--btn-border-width) solid var(--color-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.cta-btn {
  background-color: var(--color-accent);
  color: var(--color-btn-text);
  border-color: var(--color-text);
}

.cta-btn:hover {
  background-color: #8b2ec4; /* darkened accent — no source hover value found, kept close to the fill */
  color: var(--color-btn-text);
}

.outline-btn {
  background-color: transparent;
  color: var(--color-text);
}

.outline-btn:hover {
  background-color: var(--color-text);
  color: var(--color-btn-text);
}

/* ==========================================================================
   Header + footer — matching the icavcu.org site's ica2017 theme. Values and
   breakpoints are the site's own: 40em (640px) "medium", 64em (1024px) "large",
   plus its 480px / 850px pixel tweaks. Helvetica stack throughout (the site's
   header/footer never use Everett).
   ========================================================================== */

.row { max-width: var(--container-max); margin: 0 auto; }
.row::after { content: ""; display: table; clear: both; }

/* ---- Header ------------------------------------------------------------- */
.header {
  border-bottom: 1px solid var(--color-text);
  padding: 10px 15px 0;
  position: relative;
  background: var(--color-bg);
  z-index: 1;
  font-family: var(--font-body);
}
.header a { text-decoration: none; }
.header img { display: inline-block; vertical-align: middle; }

.header-left { display: none; width: 25%; float: left; }
.header-left img { max-height: 60px; width: auto; height: auto; }

.header-right { width: 100%; }

/* top row: VCU wordmark (their hours line omitted — CMS-generated per day) */
.header-right-top {
  font-size: 13px;
  color: var(--color-text);
  padding: 3px 0 10px;
  text-align: center;
  position: absolute;
  right: 15px;
  top: 75px;
  width: 50%;
}
.header-right-top .vcu-logo { display: none; }          /* show-for-medium */
.header-right-top .vcu-logo img { max-width: 225px; width: 100%; height: auto; }

/* bottom row: logo + map marker + menu toggle (mobile), nav (desktop) */
.header-right-bottom { position: relative; }
.header-right-bottom .logo-menu { float: left; display: inline-block; padding: 5px 0 10px; }
.header-right-bottom .logo-menu img { width: auto; height: auto; }
.header-right-bottom .logo-menu .logo-wide { display: none; max-height: 30px; }
.header-right-bottom .logo-menu .logo-square { display: inline-block; max-height: 90px; }

.header-right-bottom .mobile-map-marker {
  display: inline-block;
  position: absolute;
  top: 20px;
  right: 85px;
  color: var(--color-text);
  font-size: 120%;
}
.marker-icon svg { width: 17px; height: 22px; display: block; }

.menu-toggle {
  position: absolute;
  top: 12px;
  right: 0;
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 8px 0;
  margin: 0;
  cursor: pointer;
  color: var(--color-text);
  font: inherit;
}
.toggle-txt { text-transform: uppercase; font-size: 14px; letter-spacing: .2px; }
.c-hamburger { display: block; position: relative; width: 18px; height: 18px; }
.c-hamburger span,
.c-hamburger span::before,
.c-hamburger span::after {
  display: block; position: absolute; left: 0; right: 0; height: 3px;
  background: #333; border-radius: 2px; content: "";
}
.c-hamburger span { top: 8px; }
.c-hamburger span::before { top: -6px; }
.c-hamburger span::after { top: 6px; }
.c-hamburger.is-x span { background: transparent; }
.c-hamburger.is-x span::before { top: 0; transform: rotate(45deg); }
.c-hamburger.is-x span::after { top: 0; transform: rotate(-45deg); }

.header .desktop-menu { display: none; list-style: none; margin: 0; padding: 0; }
.header .desktop-menu li { display: inline-block; }
.header .desktop-menu li a {
  display: inline-block;
  text-transform: uppercase;
  font-family: var(--font-body);
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  padding: 23px 8px 20px;
  border-bottom: 3px solid transparent;
  transition: all .3s ease;
}
.header .desktop-menu li a:hover { color: var(--color-accent); text-decoration: underline; }

/* off-canvas menu (their Foundation off-canvas, position-right, white) */
.off-canvas {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 250px;
  max-width: 90%;
  z-index: 100;
  background: var(--color-bg);
  border-left: 1px solid #d8d8d8;
  box-shadow: -4px 0 8px rgba(0,0,0,.06);
  transform: translateX(100%);
  transition: transform .5s ease;
  overflow-y: auto;
}
body.menu-open .off-canvas { transform: translateX(0); }
.off-canvas .menu-close { position: absolute; top: 33px; right: 20px; }
.off-canvas > ul.menu { list-style: none; margin: 130px 10px 20px; padding: 0; text-transform: uppercase; }
.off-canvas > ul.menu li a { display: block; color: var(--color-text); text-decoration: none; padding: 20px; font-size: 14px; }
.off-canvas > ul.menu li a:hover { text-decoration: underline; }

@media screen and (max-width: 480px) {
  .header-right-top { padding: 0; }
  .header-right-bottom .mobile-map-marker { right: 74px; }
}

@media screen and (min-width: 40em) {                    /* medium */
  .header-right-top { text-align: right; position: relative; right: auto; top: auto; width: 100%; }
  .header-right-top .vcu-logo { display: inline-block; }
  .header-right-top .vcu-logo img { margin-top: -3px; }
  .header-right-bottom .logo-menu .logo-wide { display: inline-block; }
  .header-right-bottom .logo-menu .logo-square { display: none; }
  .header-right-bottom .mobile-map-marker { top: 50%; transform: translateY(-50%); }
  .menu-toggle { top: 50%; transform: translateY(-50%); }
}
@media screen and (max-width: 850px) {
  .header-right-top .vcu-logo { border-top: 1px solid #e5e5e5; padding-top: 10px; margin-top: 5px; }
}
@media screen and (min-width: 64em) {                    /* large */
  .header-left { display: block; padding-top: 20px; }
  .header-right { width: 75%; float: left; text-align: right; }
  .header-right-bottom .logo-menu,
  .header-right-bottom .mobile-map-marker,
  .header .menu-toggle { display: none; }
  .header .desktop-menu { display: block; }
}

/* ---- Footer ------------------------------------------------------------- */
footer.footer {
  margin: 0;
  margin-top: auto;
  padding: 0;
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  font-size: var(--fs-footer);
  font-family: var(--font-body);
}
footer.footer > .row { max-width: 600px; }
footer.footer .columns { padding: 20px 15px; }
footer.footer .footer-logo { max-height: 100px; width: auto; height: auto; margin: 0 auto; display: block; }
footer.footer .col-nav { display: none; }
footer.footer a { color: #999; text-decoration: underline; }

footer.footer nav { font-family: var(--font-body); font-size: 18px; }
footer.footer nav ul { list-style: none; width: 100%; max-width: 600px; margin: 0; padding: 0; overflow: hidden; }
footer.footer nav ul li { float: left; display: inline; width: 50%; text-align: left; padding: 8px 0; }
footer.footer nav a { color: var(--color-footer-text); text-decoration: none; }
footer.footer nav a:hover { text-decoration: underline; color: var(--color-footer-text); }

footer.footer .social-address { text-align: center; padding-top: 0; }
footer.footer .social-address p { margin: 0; }
footer.footer .social-address .social-btns { display: inline-block; }
footer.footer .social-address .social-btns ul { list-style: none; margin: 0 0 10px; padding: 0; }
footer.footer .social-address .social-btns ul li { display: inline-block; }
footer.footer .social-address .social-btns a { color: #bab8b9; margin-right: 10px; text-decoration: none; display: inline-block; }
footer.footer .social-address .social-btns .social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  color: var(--color-footer-text);
  border: solid 2px var(--color-footer-text);
  height: 34px; width: 34px;
  border-radius: 100px;
}
footer.footer .social-address .social-btns .social-icon svg { width: 18px; height: 18px; }
footer.footer .social-address p a { color: var(--color-footer-text); text-decoration: none; }
footer.footer .social-address p a:hover { text-decoration: underline; }

@media screen and (min-width: 40em) {                    /* medium */
  footer.footer > .row { max-width: 1400px; }
  footer.footer .footer-logo { max-height: 145px; }
}
@media screen and (min-width: 64em) {                    /* large */
  footer.footer > .row { display: flex; align-items: stretch; }
  footer.footer .columns { width: 33.3333%; padding-top: 60px; padding-bottom: 60px; }
  footer.footer .col-nav { display: block; border-left: 1px solid var(--color-footer-text); border-right: 1px solid var(--color-footer-text); }
  footer.footer .col-social { padding-left: 5%; }
  footer.footer .social-address { text-align: left; padding-top: 60px; }
  footer.footer .social-address p { text-align: left; font-size: 14px; }
  footer.footer .social-address .social-btns .social-icon { height: 26px; width: 26px; border-width: 1.5px; }
  footer.footer .social-address .social-btns .social-icon svg { width: 12px; height: 12px; }
}