@font-face {
  font-family: 'Allrounder';
  src: url('../fonts/AllrounderMonumentTest-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --accent: #ebbf7a;
  --bg-overlay: rgba(0,0,0,0.35);
  --max-width: 100vw;
  --main: #ebbf7a;
  --secondary: #e3d3bd;
}

*{box-sizing:border-box}
.hero{
  position:relative;
  height:100vh; /* full viewport */
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  /* hero background image (covers both desktop and mobile) */
  background-image: url('../imgs/BG.png');
  background-size: cover;
  background-position: center;
  overflow:hidden;
}

html,body{height:100%;margin:0;font-family:Allrounder, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;color:#222}

/* Make the background image cover the full page via the body so it appears across the site */
/* Body background image removed by user request; use a plain background color instead */
body{
  background: none;
  background-color: #ffffff;
}

.hero .overlay{
  position:absolute;inset:0;background:var(--bg-overlay);z-index:1;
}

/* overlay graphic placed above the background image but below the text */
.hero .overlay-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:2;
  pointer-events:none;
}

/* Mobile banner (hidden on desktop) */
.mobile-banner{display:none;width:100%;height:auto;object-fit:cover}

.hero-content{position:relative;z-index:3;text-align:center;padding:3rem;width:100%;max-width:var(--max-width)}

/* Hero grid: two columns on wider screens, single column on mobile */
.hero-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2rem;
  align-items:center;
}

.col{min-width:0}

.hero-card{
  background: rgba(255,255,255,0.06);
  padding:1.25rem;
  border-radius:8px;
  text-align:left;
  color: rgba(255,255,255,0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.btn{
  display:inline-block;
  background:var(--accent);
  color:white;
  padding:.5rem .75rem;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
}

.btn:hover{opacity:.95}

/* Event row: icon-enhanced elevated cards */
.event-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
  margin-top:1rem;
  align-items:stretch; /* ensure children stretch to equal height */
}

.event-col{
  display:flex;
  flex-direction:row; /* icon, meta, button in one row */
  align-items:center;
  justify-content:space-between; /* meta expands, button stays right */
  gap:.75rem;
  background: rgba(255,255,255,0.04);
  padding:.75rem;
  border-radius:8px;
  text-align:left;
  min-height:110px; /* baseline height to improve visual balance */
}
.event-col .icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,0.03);color:var(--main);flex:0 0 44px}
.event-col .meta{flex:1}
.event-col .label{font-size:.75rem;text-transform:uppercase;opacity:.85;color:var(--secondary);margin:0}
.event-col .value{font-weight:700;margin-top:.15rem;color:var(--main);line-height:1}
.event-col .sub{font-size:.85rem;opacity:.9;margin-top:.25rem;color:rgba(255,255,255,0.75)}
.btn.primary{background:var(--main);color:#111;padding:.5rem .9rem;border-radius:8px}
.btn.primary:hover{opacity:.95}
.btn{margin-left:0;white-space:nowrap}

.brand{
  font-size:4rem;
  margin:0;
  color: var(--main);
  
}
.brand-logo{display:block;max-width:80px;height:auto;margin:0 auto .6rem}
/* visibility helpers for logo variants */
.mobile-only{display:none}
.desktop-only{display:block}
.lead{
  font-size:1.5rem;
  opacity:0.95;
  margin: 0;
  color: var(--secondary);
}
.decor{width:120px;height:auto;margin-top:1rem;display:inline-block;filter:drop-shadow(0 6px 14px rgba(0,0,0,0.5))}

.container{max-width:var(--max-width);margin:2rem auto;padding:0 1rem}
.container h2{color:var(--accent);margin-top:0}

/* Cookie consent banner */
.cookie-consent{display:none;position:fixed;left:0;right:0;bottom:0;background:rgba(20,20,20,0.92);color:#fff;padding:0.9rem 0;z-index:9999;font-family:"Times New Roman", Times, serif}
.cookie-consent .cookie-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cookie-consent p{margin:0;font-size:0.95rem;line-height:1.3}
.cookie-consent .cookie-actions{display:flex;gap:.5rem}
.cookie-consent .btn{border-radius:6px;padding:.5rem .75rem;font-family:"Times New Roman", Times, serif}
.cookie-consent .btn.primary{background:var(--main);color:#111}

@media (max-width:600px){
  .cookie-consent .cookie-inner{flex-direction:column;align-items:flex-start;padding:0 .75rem}
  .cookie-consent .cookie-actions{width:100%;justify-content:flex-end}
}

/* Policy pages: use default system fonts and black text, make content card-like */
.policy{
  background: #ffffff;
  color: #000000;
  font-family: Arial, 'Times New Roman', serif;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  max-width: 900px;
  margin: 2rem auto;
  line-height: 1.6;
}
.policy h1{font-size:2rem;margin-bottom:.5rem;color:#111}
.policy h2{margin-top:1.25rem;color:#111}
.policy p, .policy li, .policy address{color:#000}
.policy a{color:var(--main);text-decoration:underline}
.policy ul, .policy ol{margin-left:1.25rem}
.policy .btn{display:inline-block;padding:.45rem .75rem;border-radius:6px}

@media (max-width:767px){
  .policy{padding:1rem;margin:1rem}
  .policy h1{font-size:1.5rem}
}

.footer{padding:1.25rem;text-align:center;color:#666;border-top:1px solid #eee}

/* Ensure footer links are not default blue; match the copyright text color */
.footer a,
.footer a:visited{
  color: inherit; /* uses #666 from .footer */
  text-decoration: none;
}

.footer a:hover,
.footer a:focus{
  color: var(--accent);
  text-decoration: underline;
}

@media (min-width:768px){
  .brand{
    font-size:4.5rem;
    font-weight: 100;
  }
  .lead{font-size: 1.5rem}
}

/* Mobile / small screens: adjust hero and overlay focus and improve stacking */
@media (max-width: 767px) {
  /* Make hero flexible on mobile so content isn't cropped by a fixed 100vh */
  .hero{
    height: auto;
    min-height: 60vh;
    background-position: right center; /* keep focal area on the right */
    align-items: flex-start; /* allow content to flow from the top */
    padding-top: 2.25rem;
  }

  /* Slightly darker overlay for improved contrast on small screens */
  .hero .overlay{
    background: rgba(0,0,0,0.55);
  }

  /* Tune overlay-image focal point slightly inward from the right edge */
  .hero .overlay-image{
    object-position: 85% center;
  }

  .hero-content{
    padding:1.25rem;
    text-align: left; /* left-align for better readability on narrow viewports */
  }

  .brand{font-size:1.8rem}
  .lead{font-size:1rem}
  .brand-logo{
    max-width:80px;
    margin:1rem auto .5rem
  }
  /* Hide desktop-only elements and show mobile-only ones on small screens */
  .desktop-only{display:none !important}
  .mobile-only{display:block !important}

  /* Stack event columns on small screens. Let each event card lay out as two columns
     (meta | CTA) when there is room; fall back to single-column when very narrow. */
  .event-row{grid-template-columns: 1fr;}
  .event-col{
    display:grid;
    grid-template-columns: 1fr auto; /* meta on left, button on right if space allows */
    align-items:center;
    gap:.5rem;
    background: rgba(255,255,255,0.04);
    padding:.75rem;
    border-radius:8px;
    text-align:left;
    min-height:110px;
  }
  .event-col .meta{margin:0}
  .btn, .btn.primary{width:auto;display:inline-flex;justify-content:center;padding:.6rem .75rem}

  /* Make the hero grid a single column on mobile so left/right columns stack */
  .hero-grid{grid-template-columns: 1fr;gap:1rem}

  .container{margin:1rem auto;padding:0 1rem}

  /* Show the mobile banner and hide decorative overlays so the banner stands alone.
     Position the banner absolutely so it doesn't push the hero content off-screen. */
  .mobile-banner{
    display:block;
    position:absolute;
    top:0;
    
  }
  .hero .overlay, .hero .overlay-image{display:none}

  /* Make room for the absolutely-positioned banner so hero content sits below it */
  .hero-content{padding-top:calc(25vh);padding-bottom:1.5rem}

  /* Make footer links wrap nicely on small screens */
  .footer .footer-nav{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;align-items:center;margin-bottom:.5rem}
  .footer .footer-nav a{display:inline-block;padding:.125rem .25rem}
}

/* When screen is very narrow, stack meta and CTA vertically inside event cards */
@media (max-width:420px){
  .event-col{grid-template-columns: 1fr;align-items:flex-start}
  .btn, .btn.primary{width:100%}
}