/*
Theme Name: Education Opportunity Fund
Theme URI: https://vteof.com/
Author: DigiUB
Author URI: https://vteof.com/
Description: Custom WordPress theme for the Education Opportunity Fund site with a hero homepage, configurable section toggles, menu support, reusable resources block and shortcode, contact shortcode support, and latest-post cards.
Version: 2.0.3
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: eof-theme
*/

:root{
  --bg-0:#092415;
  --bg-1:#082716;
  --card:#0f241aee;
  --stroke:rgba(245, 244, 236, .22);
  --stroke-2:rgba(245, 244, 236, .14);
  --text:#f5f4ec;
  --muted:rgba(245, 244, 236, .78);
  --accent:#cfe6c8;
  --accent-2:#9bd2b2;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --radius:18px;
  --max:1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ height:100%; }
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(64,132,96,.28) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(155,210,178,.14) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  line-height:1.55;
  min-height:100vh;
  background-attachment:fixed;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
a:focus-visible,
button:focus-visible{
  outline:3px solid rgba(207,230,200,.55);
  outline-offset:3px;
  border-radius:10px;
}
.screen-reader-text{
  border:0;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute !important;
  width:1px;
  word-wrap:normal !important;
}
.wrap{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}
.hidden{ display:none !important; }

header.site-header{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(8,17,12,.78), rgba(8,17,12,.40));
  border-bottom:1px solid var(--stroke-2);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}
.brand img{
  height:40px;
  width:auto;
  display:block;
}
.brand .name{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.brand .name strong{
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.brand .name span{
  font-size:12px;
  color:var(--muted);
}
.nav-wrap,
.primary-nav .menu{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  list-style:none;
  margin:0;
  padding:0;
}
.primary-nav a,
.primary-nav .menu-item > a{
  display:block;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--muted);
  font-size:14px;
  letter-spacing:.02em;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  background:rgba(207,230,200,.08);
  border-color:rgba(207,230,200,.18);
  color:var(--text);
  transform:translateY(-1px);
}
.menu-btn{
  display:none;
  border:1px solid rgba(245,244,236,.18);
  background:rgba(15,36,26,.35);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
.menu-btn .bars{
  display:inline-block;
  width:18px;
  height:12px;
  position:relative;
}
.menu-btn .bars::before,
.menu-btn .bars::after,
.menu-btn .bars span{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:rgba(245,244,236,.85);
  border-radius:2px;
}
.menu-btn .bars::before{ top:0; }
.menu-btn .bars span{ top:5px; }
.menu-btn .bars::after{ bottom:0; }
.menu-label{ font-size:14px; color:rgba(245,244,236,.85); }

.site-main{
  padding:26px 0 40px;
  position:relative;
}

.hero-shell {
  position: relative;
  isolation: isolate;
  margin-top: 18px;
  border-radius: calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0;
  border: 1px solid rgba(207,230,200,.18);
  box-shadow: inset 0 0 28px 5px var(--card);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 70%, rgba(0,0,0,0.85) 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 75%, rgba(0,0,0,0.65) 85%, transparent 100%);
  min-height: 560px;
  backdrop-filter: blur(100px);
  border-bottom: none;
}
.hero-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg, linear-gradient(160deg, rgba(14,38,27,.92), rgba(20,73,52,.70)));
  background-size: cover;
  background-position: center;
  transform: scale(var(--heroZoom, 1.02));
  filter: brightness(var(--heroBright, 1.05)) contrast(1.06) saturate(1.05);
  transition: filter 120ms linear, transform 120ms linear;
  z-index: 0;
}
.hero-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg, rgba(8,17,12,.12), rgba(8,17,12,.38) 100%);
}
.hero{
  position:relative;
  z-index:1;
  display:grid;
  gap:18px;
  padding:26px;
  background:rgba(8,17,12,.20);
  align-items:start;
  grid-template-columns:minmax(0, 1.25fr) minmax(300px, 0.75fr);
  grid-template-areas:
    "title logo"
    "copy logo"
    "actions .";
}
.hero-card {
  border-radius: var(--radius);
  padding-top: 22px;
  padding-bottom: 22px;
}
.hero-title{ grid-area:title; margin-bottom:6px; }
.hero-copy{ grid-area:copy; margin-top:2px; }
.hero-actions{ grid-area:actions; }
.hero-logo {
  grid-area: logo;
  display: flex;
  align-self: stretch;
  align-items:center;
  justify-content:center;
  padding: 0;
}
.hero-tagline {
  max-width: 48ch;
  text-align: justify;
  margin-top: 40px;
  text-shadow: 1px 1px 3px black;
}
.hero-title h1{
  margin:0;
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.05;
  letter-spacing:-.02em;
  text-wrap:balance;
  text-shadow:1px 2px 6px var(--card);
}
.hero-copy,
.hero-copy p {
  margin: 0;
  color: var(--muted);
  max-width: 48ch;
  font-size: 16px;
  text-align: justify;
  font-weight: 500;
}
.hero-copy ul,
.hero-copy ol{ padding-left:1.25rem; }
.hero-copy a{ text-decoration:underline; }
.cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:0;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 20px;
  font-size:15px;
  font-weight:600;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:var(--accent);
  color:#052015;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.btn:hover{ transform:translateY(-2px); background:#dff4d8; }
.btn.secondary{
  background:transparent;
  border:1px solid rgba(245,244,236,.35);
  color:var(--text);
  box-shadow:none;
}
.btn.secondary:hover{ color: white; }
.sliding-button.secondary::before { background-color: #ffa700eb; }
.sliding-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffa700c4;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in-out;
  z-index: -1;
}
.sliding-button:hover::before{ transform:translateX(0); }
.map-frame{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.map-frame img{
  display:block;
  width:100%;
  max-width:420px;
  max-height:380px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(2px 2px 4px black);
}
.content-section,
.page-shell,
.posts-shell{
  padding:26px 0 0;
}
.content-card,
.page-card,
.post-card{
  background:rgba(8,17,12,.18);
  border:1px solid rgba(207,230,200,.10);
  box-shadow:inset 0 0 18px rgba(0,0,0,.08);
  border-radius:18px;
  padding:22px;
}
.content-section h2,
.page-shell h1,
.posts-shell h1{
  margin:0 0 8px;
  font-size:22px;
}
.content-section p,
.page-card p,
.posts-shell p,
.entry-excerpt{ color:var(--muted); }
.post-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:14px;
}
.post-card{
  padding:0;
  overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
  display:flex;
  flex-direction:column;
  min-height:100%;
  background:linear-gradient(180deg, rgba(10,28,19,.72), rgba(9,26,18,.92));
}
.post-card:hover{
  transform:translateY(-6px);
  border-color:rgba(207,230,200,.26);
  box-shadow:0 24px 44px rgba(0,0,0,.28), inset 0 0 18px rgba(0,0,0,.08);
}
.post-card-link{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.post-card-media{
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(207,230,200,.12), rgba(155,210,178,.05));
  border-bottom:1px solid rgba(207,230,200,.10);
}
.post-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease, filter .45s ease;
}
.post-card:hover .post-card-media img{
  transform:scale(1.05);
  filter:brightness(1.06);
}
.post-card-body{
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.post-card h3,
.post-card h2{
  margin:0;
  font-size:20px;
  line-height:1.2;
}
.post-card .meta,
.entry-meta{
  color:var(--muted);
  font-size:13px;
  margin-bottom:0;
}
.read-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  color:var(--accent);
  font-weight:600;
}
.read-more::after{
  content:"→";
  transition:transform .18s ease;
}
.post-card:hover .read-more::after{
  transform:translateX(4px);
}
.empty-panel{
  min-height:240px;
}
footer.site-footer{
  margin-top:34px;
  padding:22px 0 32px;
  border-top:1px solid var(--stroke-2);
}
.footer-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.social .soc{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(245,244,236,.16);
  background:rgba(15,36,26,.35);
  padding:10px 12px;
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
  transition:background .12s ease, transform .12s ease, border-color .12s ease, color .12s ease;
}
.social .soc svg{ width:18px; height:18px; fill:rgba(245,244,236,.80); }
.social .soc:hover{
  background:rgba(207,230,200,.10);
  border-color:rgba(207,230,200,.24);
  color:var(--text);
  transform:translateY(-1px);
}
.social .soc:hover svg{ fill:rgba(245,244,236,.95); }
.copyright{ color:var(--muted); font-size:13px; }
.entry-content a,
.page-card a,
.content-card a{ color:var(--accent); text-decoration:none; }
.read-more:hover {
  font-weight:bold;
  color:var(--accent-2);
}
.wp-block-image img{ border-radius:12px; }

@media (min-width: 721px) and (max-width: 1020px){
  .hero{
    grid-template-columns:minmax(0, 1fr) minmax(240px, 0.56fr);
    grid-template-areas:
      "title logo"
      "copy logo"
      "actions .";
  }
  .hero-title h1{ white-space:normal; }
  .map-frame{ min-height:360px; }
  .map-frame img{ max-width:340px; max-height:340px; }
  .post-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .menu-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .primary-nav{
    display:none;
    width:100%;
    padding:10px 0 14px;
  }
  .site-header[data-open="true"] .primary-nav{ display:block; }
  .nav-wrap,
  .primary-nav .menu{
    width:100%;
    justify-content:flex-start;
    flex-direction:column;
    align-items:stretch;
  }
  .topbar{ flex-wrap:wrap; align-items:center; }
  .primary-nav a,
  .primary-nav .menu-item > a{
    width:100%;
    border-radius:14px;
    border-color:rgba(245,244,236,.14);
    background:rgba(0,0,0,.12);
  }
  .brand{ min-width:auto; }
  .hero{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "title title"
      "copy logo"
      "actions actions";
    padding:18px;
    gap:14px;
  }
  .hero-card{ padding:16px 0; }
  .hero-title h1{ font-size:clamp(24px, 7vw, 34px); }
  .hero-copy,
  .hero-copy p,
  .hero-tagline{ font-size:15px; }
  .map-frame{ min-height:220px; padding:8px; }
  .map-frame img{ max-width:100%; max-height:240px; }
  .cta-row{ flex-direction:column; align-items:stretch; }
  .btn{ width:100%; }
  .post-grid{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .hero{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "logo"
      "copy"
      "actions";
  }
  .map-frame{ min-height:200px; }
  .hero-title h1{ text-align:center; }
  .hero-tagline{ margin-top:20px; }
  .wrap{ width:min(var(--max), calc(100% - 24px)); }
}

@media (prefers-reduced-motion: reduce){
  *{
    transition:none !important;
    scroll-behavior:auto !important;
  }
}


@media (max-width: 900px){
  .post-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .post-grid{ grid-template-columns:1fr; }
}

.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.video-embed-wrap{
  margin-top:18px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(207,230,200,.12);
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}

.video-embed-wrap iframe,
.video-embed-wrap video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  min-height:320px;
  border:0;
}

 .resource-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:18px;
}

.resource-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-radius:16px;
  border:1px solid rgba(207,230,200,.12);
  background:linear-gradient(180deg, rgba(10,28,19,.58), rgba(9,26,18,.80));
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.resource-item:hover{
  transform:translateY(-2px);
  border-color:rgba(207,230,200,.26);
  background:linear-gradient(180deg, rgba(13,34,23,.72), rgba(9,26,18,.92));
  box-shadow:0 16px 28px rgba(0,0,0,.22);
}

.resource-main{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  flex:1;
}

.resource-title-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}

.resource-icon{
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(207,230,200,.10);
  border:1px solid rgba(207,230,200,.18);
  font-size:18px;
  line-height:1;
}

.resource-head{
  min-width:0;
}

.resource-title{
  margin:0;
  font-size:19px;
  line-height:1.25;
}

.resource-summary{
  margin:6px 0 0;
  color:var(--muted);
}

.resource-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--muted);
}

.resource-type{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(207,230,200,.25);
  background:rgba(207,230,200,.12);
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  font-weight:700;
}

.resource-meta-item{
  display:inline-flex;
  align-items:center;
}

.resource-action{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:190px;
  width:190px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(207,230,200,.24);
  background:rgba(207,230,200,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  color:var(--text);
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  z-index:1;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.resource-action::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:#b011099c;
  transform:translateX(-100%);
  transition:transform .4s ease-in-out;
  z-index:-1;
}

.resource-action.read-more::after,
.resource-action::after{
  content:none !important;
}

.resource-action .action-label,
.resource-action .action-arrow{
  position:relative;
  z-index:1;
}

.resource-action .action-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.1em;
  line-height:1;
  transition:transform .18s ease;
}

.resource-item:hover .resource-action,
.resource-action:hover{
  transform:translateY(-2px);
  background:rgba(207,230,200,.14);
  border-color:rgba(207,230,200,.34);
  color:var(--text);
  box-shadow:0 10px 28px rgba(0,0,0,.30);
}

.resource-item:hover .resource-action::before,
.resource-action:hover::before{
  transform:translateX(0);
}

.resource-item:hover .resource-action .action-arrow,
.resource-action:hover .action-arrow{
  transform:translateX(4px);
}
.empty-state{
  color:var(--muted);
  margin-top:12px;
}

.page-card-wide{
  max-width:960px;
  margin:0 auto;
}

@media (max-width: 720px){
  .resource-item{
    flex-direction:column;
    align-items:flex-start;
  }

  .resource-action{
    width:100%;
    justify-content:flex-start;
    padding-left:0;
  }

  .resource-title{
    font-size:18px;
  }

  .video-embed-wrap iframe,
  .video-embed-wrap video{
    min-height:220px;
  }
}

.contact-form-wrap{
  margin-top:18px;
  padding:18px;
  border-radius:16px;
  border:1px solid rgba(207,230,200,.12);
  background:linear-gradient(180deg, rgba(10,28,19,.58), rgba(9,26,18,.80));
}

.contact-form-wrap form,
.contact-form-wrap .wpcf7,
.contact-form-wrap .wpforms-container{
  display:block;
}

.contact-form-wrap :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select){
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(207,230,200,.20);
  background:rgba(0,0,0,.18);
  color:var(--text);
  margin-top:8px;
  margin-bottom:14px;
}

.contact-form-wrap :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select):focus{
  outline:none;
  border-color:rgba(207,230,200,.40);
  box-shadow:0 0 0 3px rgba(207,230,200,.10);
}

.contact-form-wrap :is(input[type="submit"], button[type="submit"], .wpforms-submit, .wpcf7-submit){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 20px;
  font-size:15px;
  font-weight:600;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:var(--accent);
  color:#052015;
  cursor:pointer;
  transition:all .18s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

.contact-form-wrap :is(input[type="submit"], button[type="submit"], .wpforms-submit, .wpcf7-submit):hover{
  transform:translateY(-2px);
  background:#dff4d8;
}



.eof-page-bg{
  position:relative;
  min-height:0;
}

.eof-page-bg .page-card{
  position:relative;
  overflow:hidden;
  min-height:min(74vh, 900px);
  background:rgba(8,17,12,.42);
}

.eof-page-bg .page-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--eof-page-bg-image);
  background-size:var(--eof-page-bg-size, cover);
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(var(--eof-page-bg-blur)) brightness(.84);
  opacity:var(--eof-page-bg-opacity);
  transform:scale(1.05);
  z-index:0;
}

.eof-page-bg .page-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(8,17,12,.18), rgba(8,17,12,.44));
  z-index:0;
}

.eof-page-bg .page-card > *{
  position:relative;
  z-index:1;
}

.eof-page-bg--subtle .page-card{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  background:rgba(8,17,12,.44);
  border-color:rgba(207,230,200,.14);
}

.eof-page-bg--subtle .page-card::before{
  filter:blur(var(--eof-page-bg-blur)) brightness(.82);
  opacity:var(--eof-page-bg-opacity);
}

.eof-page-bg--dramatic .page-card{
  min-height:min(82vh, 980px);
  background:rgba(8,17,12,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-color:rgba(207,230,200,.18);
  box-shadow:0 18px 42px rgba(0,0,0,.20), inset 0 0 18px rgba(0,0,0,.08);
}

.eof-page-bg--dramatic .page-card::before{
  opacity:calc(var(--eof-page-bg-opacity) + .18);
  filter:blur(max(calc(var(--eof-page-bg-blur) - 4px), 0px)) brightness(.92);
  transform:scale(1.02);
}



.eof-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999;
  transition:opacity .2s ease, visibility .2s ease;
}

.eof-popup-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

body.eof-popup-open{
  overflow:hidden;
}

.eof-popup-dialog{
  position:relative;
  width:min(980px, 100%);
  height:min(78vh, 760px);
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(207,230,200,.22);
  background:rgba(8,17,12,.97);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  transform:translateY(10px) scale(.985);
  transition:transform .2s ease;
}

.eof-popup-overlay.is-open .eof-popup-dialog{
  transform:translateY(0) scale(1);
}

.eof-popup-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(13,31,22,.98), rgba(10,24,17,.92));
  border-bottom:1px solid rgba(207,230,200,.14);
}

.eof-popup-title{
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.eof-popup-body{
  height:calc(100% - 63px);
  background:rgba(255,255,255,.98);
}

.eof-popup-dialog iframe{
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}

.eof-popup-close{
  border:1px solid rgba(245,244,236,.20);
  background:rgba(8,17,12,.70);
  color:var(--text);
  border-radius:999px;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:24px;
  line-height:1;
}

.eof-popup-close:hover{
  background:rgba(207,230,200,.14);
}