/*
Theme Name: ERAS Society
Theme URI: https://erassociety.org
Author: Swedensites
Author URI: https://swedensites.se
Description: Custom Elementor-ready WordPress theme for the ERAS® Society, built on the 2026 site redesign brief. Provides the base layout, navigation, footer and design tokens; page content is built in Elementor.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: eras-theme
*/

/* ==========================================================================
   DESIGN TOKENS — pulled from the client's homepage brainstorm image.
   Keep these as the single source of truth. If you add matching classes
   inside Elementor's "Custom CSS" panel, reuse these variables so the
   Elementor-built pages and this theme shell always stay in sync.
   ========================================================================== */
:root{
  --eras-navy-header:   #0B4C8C; /* top nav bar */
  --eras-navy-dark:     #14213D; /* footer / dark sections */
  --eras-navy-black:    #0A0A0A; /* bottom credit bar */
  --eras-blue-banner:   #7FC6E8; /* light blue strap under hero */
  --eras-blue-cyan:     #29ABE2; /* stat / stand-out boxes */
  --eras-blue-text:     #0B3D7A; /* dark blue heading text on light bg */
  --eras-white:         #FFFFFF;
  --eras-body-text:     #2B2B2B;
  --eras-muted:         #C9D6E3;

  --eras-font-heading:  'Inter', 'Helvetica Neue', Arial, sans-serif;
  --eras-font-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;

  --eras-radius:        4px;
  --eras-container:     1200px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--eras-font-body);
  color:var(--eras-body-text);
  line-height:1.55;
  background:var(--eras-white);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5{
  font-family:var(--eras-font-heading);
  font-weight:800;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--eras-blue-text);
}
.eras-container{
  max-width:var(--eras-container);
  margin:0 auto;
  padding:0 24px;
}
.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
}
.skip-link{
  position:absolute; left:-9999px; top:0; background:#fff; color:#000; padding:10px 16px; z-index:10000;
}
.skip-link:focus{ left:8px; top:8px; }

/* ==========================================================================
   TOP UTILITY BAR + HEADER (matches navy bar with logo / nav / Members CTA)
   ========================================================================== */
.eras-header{
  background:var(--eras-navy-header);
  color:var(--eras-white);
}
.eras-header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  gap:24px;
  flex-wrap:wrap;
}
.eras-header__logo{
  font-family:var(--eras-font-heading);
  font-weight:800;
  font-size:22px;
  color:var(--eras-white);
  white-space:nowrap;
}
.eras-header__logo strong{ font-weight:800; }
.eras-nav{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  list-style:none;
  margin:0; padding:0;
}
.eras-nav a{
  font-size:15px;
  font-weight:600;
  opacity:.92;
}
.eras-nav a:hover,
.eras-nav a:focus{ opacity:1; text-decoration:underline; }
.eras-header__cta{
  background:var(--eras-white);
  color:var(--eras-navy-header);
  font-weight:700;
  padding:10px 22px;
  border-radius:var(--eras-radius);
  white-space:nowrap;
}
.eras-header__cta:hover{ opacity:.9; }

/* ==========================================================================
   HERO (full-width image, built as an Elementor section — this is fallback
   markup only, used on non-Elementor templates such as 404/search)
   ========================================================================== */
.eras-hero{
  position:relative;
  min-height:420px;
  background-size:cover;
  background-position:center;
}

/* ==========================================================================
   INTRO BANNER — light blue strap with dark blue heading text
   ========================================================================== */
.eras-banner{
  background:var(--eras-blue-banner);
  padding:34px 24px;
}
.eras-banner h2{
  margin:0;
  font-size:clamp(20px, 2.4vw, 30px);
  color:var(--eras-blue-text);
}

/* ==========================================================================
   STAT / STAND-OUT BOXES (cyan boxes in left column)
   ========================================================================== */
.eras-stat-box{
  background:var(--eras-blue-cyan);
  color:var(--eras-blue-text);
  padding:28px 26px;
  border-radius:2px;
  margin-bottom:18px;
}
.eras-stat-box .eras-stat-figure{
  font-size:34px;
  font-weight:800;
  margin:0 0 4px;
}
.eras-stat-box .eras-stat-label{
  font-size:16px;
  font-weight:500;
  color:var(--eras-blue-text);
  opacity:.85;
}

/* ==========================================================================
   DARK FOOTER SECTIONS (news/update band + footer nav)
   ========================================================================== */
.eras-band-dark{
  background:var(--eras-navy-dark);
  color:var(--eras-white);
  padding:56px 24px;
}
.eras-band-dark h3{
  color:var(--eras-white);
  font-size:20px;
  margin-bottom:10px;
}
.eras-band-dark p{
  color:var(--eras-muted);
  font-size:15px;
}
.eras-band-dark .eras-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:36px;
}
@media (max-width:900px){
  .eras-band-dark .eras-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .eras-band-dark .eras-grid{ grid-template-columns:1fr; }
}

.eras-footer{
  background:var(--eras-navy-dark);
  color:var(--eras-muted);
  padding:48px 24px 0;
}
.eras-footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:36px;
}
.eras-footer__grid h5{
  color:var(--eras-white);
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.eras-footer__grid ul{ list-style:none; margin:0; padding:0; }
.eras-footer__grid li{ margin-bottom:8px; font-size:14px; }
.eras-footer__grid a:hover{ color:var(--eras-white); }
@media (max-width:900px){
  .eras-footer__grid{ grid-template-columns:1fr 1fr; }
}

.eras-footer__bottom{
  background:var(--eras-navy-black);
  color:#8a8f98;
  font-size:13px;
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin:0 -24px;
}

/* ==========================================================================
   ELEMENTOR COMPATIBILITY
   ========================================================================== */
.elementor-page .site-content{ margin:0; padding:0; }


/* ==========================================================================
   ERAS HOME
   ========================================================================== */

.eras-home *{box-sizing:border-box;}
.eras-home{font-family:'Inter',Arial,sans-serif;color:#2B2B2B;}
.eras-home a{color:inherit;text-decoration:none;}
.eras-home .container{max-width:1200px;margin:0 auto;padding:0 24px;}
.eras-home h1,.eras-home h2,.eras-home h3{font-weight:800;color:#0B3D7A;margin:0 0 .4em;}

.eras-home .hero{
  height:380px;
  background:linear-gradient(0deg, rgba(11,20,40,.15), rgba(11,20,40,.15)),
    url('https://images.unsplash.com/photo-1584982751601-97dcc096659c?auto=format&fit=crop&w=1600&q=60') center/cover no-repeat;
}

.eras-home .banner{background:#7FC6E8;padding:34px 24px;}
.eras-home .banner h2{font-size:clamp(20px,2.4vw,30px);}

.eras-home .intro{padding:60px 24px;}
.eras-home .intro-grid{display:grid;grid-template-columns:280px 1fr 1fr;gap:40px;align-items:start;}
.eras-home .stat-box{background:#29ABE2;padding:28px 26px;margin-bottom:18px;border-radius:2px;}
.eras-home .stat-box .figure{font-size:32px;font-weight:800;color:#0B3D7A;margin:0;}
.eras-home .stat-box .label{font-size:16px;color:#0B3D7A;opacity:.85;}
.eras-home .intro-copy p{font-size:15px;line-height:1.7;color:#3a3a3a;}
.eras-home .map-wrap img{width:100%;filter:grayscale(1) contrast(1.4);}

.eras-home .band{background:#14213D;color:#fff;padding:56px 24px;}
.eras-home .band-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;}
.eras-home .band h3{color:#fff;font-size:19px;margin-bottom:10px;}
.eras-home .band p{color:#C9D6E3;font-size:14.5px;line-height:1.6;}

@media (max-width:900px){
  .eras-home .intro-grid{grid-template-columns:1fr;}
  .eras-home .band-grid{grid-template-columns:1fr 1fr;}
}