/* Art Index R’Dam – static prototype (HTML/CSS + minimal JS)
   Replace font/logo/image assets with your provided files:
   - assets/fonts/ABCWhyteInktrap-Regular.woff
   - assets/img/ArtIndex_issue35.png
   - assets/img/card-1.jpg, card-2.jpg, card-3.jpg
*/

:root{
  --pink: #f7b2e7;
  --ink: #111111;
  --rule: rgba(0,0,0,0.65);

  --container: 1180px; /* looks good at 1440+ while keeping generous margins */
  --gutter: 80px;

  --rule-thickness: 2px;

  --radius: 0px;
  --card-gap: 56px;

  --header-pad-top: 18px;
  --header-pad-bottom: 22px;

  --font-sans: "ABC Whyte Inktrap", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --alpha: 0.8;           /* 80% d'opacité */
  --IndexColor: #f7b2e7;
  --acc-bg: #ffffff;         /* closed header background */
  --acc-bg-open: #f7b2e7;    /* open header background */
  --acc-text: #000000;
  
  --acc-body-bg: #f2f2f2;
  --acc-body-text: #222;
  --acc-border: #f7b2e7;
  
  --acc-radius: 0px;        /* set to 8px if you want rounded corners */
  --pad-y: 18px;
  --pad-x: 18px;
  
  --icon-size: 20px;
  --gap: 14px;
  
  --font: "ABC Whyte Inktrap", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --nav-row-h: 64px; /* adjust if your nav bar is taller */
}

@font-face{
  font-family: "ABC Whyte Inktrap";
  src: url("assets/fonts/ABCWhyteInktrap-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "ABC Whyte Inktrap";
  src: url("assets/fonts/ABCWhyteInktrap-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  color: var(--ink);
  background: #ffffff;
  font-family: var(--font-sans);
  text-rendering: geometricPrecision;
  
}

img{ max-width: 100%; display: block; }

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus{
  left: 12px;
  top: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 2px solid #000;
  z-index: 9999;
}
.a{
color: #000;
text-decoration: none;
font-family: var(--font-sans);
font-size: 18px;
          
}
.a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}
.a:focus-visible{
  outline: 2px solid #000;
  outline-offset: 3px;
}

.container{
  width: min(var(--container), calc(100% - var(--gutter)));
  margin: 0 auto;
}

.masthead{
  background: var(--pink);
  padding: var(--header-pad-top) 0 var(--header-pad-bottom);
}

.date-line{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  align-items: center;
  gap: 18px;
  font-size: 18px;
  letter-spacing: 0.2px;
}

.date-line__rule{
  height: var(--rule-thickness);
  background: var(--rule);
  display: block;
}

.date-line__arrow{
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

.brand{
  display: flex;
  justify-content: center;
  margin: 18px 0 8px;
}

.brand__logo{
  width: min(880px, 100%);
  height: auto;
}

.nav-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

/* Desktop nav */
.nav--desktop{
  display: flex;
  gap: 42px;
  align-items: center;
  font-size: 18px;
  letter-spacing: 0.6px;
  font-weight: 700;
}

/* Mobile nav (collapsed by default) */
.nav--mobile{
  display: none;
  font-weight: 700;
  margin-top: 14px;
  padding-bottom: 2px;
  border-bottom: var(--rule-thickness) solid transparent; /* keeps layout stable when toggling */
}


.nav__link{
  color: var(--ink);
  text-decoration: none;
}
.nav__link:hover{ text-decoration: underline; }
.nav__link:focus-visible{
  outline: 2px solid #000;
  outline-offset: 3px;
}


.rule{
  border: none;
  height: var(--rule-thickness);
  background: var(--rule);
  margin: 16px 0 0;
}

/* Burger button */
.burger{
  display: none;
  width: 44px;
  height: 44px;
  border: 0px;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-direction: column;
}
.burger__bar{
  width: 20px;
  height: 2px;
  background: rgba(0,0,0,0.85);
  display: block;
}

/* Page */
.page{
  padding: 34px 0 54px;
}

.cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
  align-items: start;
}

.card{
  display: block;
  color: inherit;
  text-decoration: none; /* underline only on hover (as requested) */
}

.card__image{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eaeaea;
}

.card__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 180ms ease;
}

.card__meta{
  background: var(--pink);
  padding: 16px 18px 18px;
}


.card__title-link{
  color: #000;
  text-decoration: none;
  font-family: var(--font-sans);
}
.card__title-link:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}
.card__title-link:focus-visible{
  outline: 2px solid #000;
  outline-offset: 3px;
}

.card__title{
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}

.card__subtitle{
  margin: 0 0 14px;
  font-size: 14px;
  opacity: 0.95;
  font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
}

.card__from{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.card__from-line{
  height: 2px;
  width: 58px;
  background: rgba(255,255,255,0.9);
}

.card__from-text{
  color: rgba(255,255,255,0.92);
}

.card:hover .card__image img{
  transform: scale(1.05); /* image zoom on hover */
}


/* Breakpoints: mobile 375, tablet 768, desktop 1440+
   We implement: <= 768 : mobile/tablet layout with burger + 1 column cards
*/
@media (max-width: 768px){
  :root{
    --gutter: 44px;
    --card-gap: 28px;

    /* header can shrink on smaller screens */
    --header-pad-top: 12px;
    --header-pad-bottom: 14px;
  }

  .date-line{
    font-size: 16px;
    grid-template-columns: auto 1fr auto;
  }
  .date-line__arrow{ display: none; }
  .date-line__right{ justify-self: end; }

  .brand{ margin: 12px 0 6px; }

  .nav--desktop{ display: none; }
  .burger{ display: inline-flex; }

  .nav--mobile{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 10px;
    border-top: var(--rule-thickness) solid rgba(0,0,0,0.25);
  }
  .nav--mobile[data-open="false"]{ display: none; }

  .cards{ grid-template-columns: 1fr; }
}

/* A slightly more generous layout for tablet (>= 768) can be handled automatically by grid above.
   On large desktops (>=1440), we keep the container controlled for readability and similarity to the PDF. */
@media (min-width: 1440px){
  :root{
    --container: 1260px;
  }
}


/* --- Dropdown submenu (desktop) --- */
.nav__item{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav__submenu{
  position: absolute;
  /* ---top: calc(100% + 10px);--- */
  left: 0;
  min-width: 260px;
  background: var(--pink);
  /* ---border: var(--rule-thickness) solid rgba(0,0,0,0.35);
  /* --padding: 10px 12px;-- */
  display: none;
  z-index: 50;
  top: 100%;
  padding-top: 10px; /* visual gap, but still hoverable */
}

.nav__sublink{
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.2px;
  padding: 6px 0;
}

.nav__sublink:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav__item--has-sub:hover .nav__submenu,
.nav__item--has-sub:focus-within .nav__submenu,
.nav__item--has-sub[data-open="true"] .nav__submenu{
  display: block;
}

/* --- Mobile submenu panels --- */
.mnav__group{
  display: grid;
  gap: 10px;
}

.mnav__toggle{
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: var(--ink);
  letter-spacing: 0.6px;
  font-weight: 700;
  cursor: pointer;
}

.mnav__toggle:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mnav__panel{
  display: grid;
  gap: 8px;
  padding-left: 12px;
}

/* Ensure sublinks are visually consistent in mobile panels */
.nav--mobile .nav__sublink{
  font-weight: 400;
}

/* --- Footer (layout inspired by provided reference) --- */
.site-footer{
  margin-top: 64px;
}

.footer-top{
  background: #2f2f2f;
  color: rgba(255,255,255,0.85);
  padding: 46px 0 54px;
}

.footer-top__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 80px;
  align-items: start;
}

.footer-title{
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
}

.newsletter__form{
  display: grid;
  gap: 10px;
  max-width: 320px;
}

.newsletter__label{
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}

.newsletter__input{
  height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.35);
  background: #ffffff;
  color: #111;
  font-family: inherit;
  font-size: 14px;
}

.newsletter__captcha{
  margin-top: 10px;
  height: 78px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.92);
  color: #111;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  max-width: 360px;
}

.newsletter__captcha-box{
  width: 28px;
  height: 28px;
  border: 2px solid rgba(0,0,0,0.55);
  background: #fff;
  display: inline-block;
}

.newsletter__captcha-text{
  font-size: 18px;
}

.newsletter__send{
  margin-top: 8px;
  width: 84px;
  height: 34px;
  border: 2px solid rgba(255,255,255,0.35);
  background: transparent;
  color: rgba(255,255,255,0.75);
  font: inherit;
  cursor: pointer;
}

.newsletter__send:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-note{
  font-size: 18px;
  line-height: 1.5;
  max-width: 560px;
  color: rgba(255,255,255,0.62);
}

.footer-partner{
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 10px;
}

.footer-partner__label{
  color: rgba(255,255,255,0.6);
  font-size: 18px;
  margin-bottom: 6px;
}

.footer-partner__name{
  font-size: 34px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.5px;
}

/* Bar with social icons */
.footer-bar{
  background: #5a5a5a;
  padding: 12px 0;
}

.footer-bar__inner{
  display: flex;
  justify-content: center;
}

.footer-social{
  display: inline-flex;
  gap: 18px;
}

.footer-social__icon{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-weight: 700;
  border-radius: 3px;
}

.footer-social__icon:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-bottom{
  background: #ffffff;
  color: rgba(0,0,0,0.28);
  padding: 16px 0 22px;
  font-size: 14px;
  text-align: center;
}

/* Footer responsive */
@media (max-width: 768px){
  .footer-top__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-partner{
    margin-top: 0;
  }
}


/* --- Bottom section (integrated structure) --- */
.bottom{
  background: #2f2f2f;
  color: rgba(255,255,255,0.85);
  padding: 46px 0 34px;
  margin-top: 64px;
}
/* --- LOCATIONS GRID --- */

.container-8{
  width: min(var(--container), calc(100% - var(--gutter)));
  margin: 0 auto;
}

.row-8{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 80px;
  row-gap: 28px;
  align-items: start;
}

.col-6{ grid-column: span 6; }
.col-12{ grid-column: span 12; }

.center{ text-align: center; }
.justify{ text-align: left; }



/* --- Bottom section (integrated structure) --- */
.bottom h5{
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
}

.bottom h6{
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
}

.bottom .name{
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}

.bottom input[type="text"]{
  height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.35);
  background: #ffffff;
  color: #111;
  font-family: inherit;
  font-size: 14px;
  width: 320px;
  max-width: 100%;
}

.bottom .send{
  margin-top: 8px;
  width: 84px;
  height: 34px;
  border: 2px solid rgba(255,255,255,0.35);
  background: transparent;
  color: rgba(255,255,255,0.75);
  font: inherit;
  cursor: pointer;
}

.bottom .send:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Social media bar */
.social_media{
  background: #5a5a5a;
  padding: 12px 0;
}

.social_media .col-12{
  display: flex;
  justify-content: center;
  gap: 18px;
}

.social_media a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Copyright footer */
footer{
  background: #ffffff;
  padding: 16px 0 22px;
  text-align: center;
}

footer .footer{
  color: rgba(0,0,0,0.28);
  font-size: 14px;
}

/* Responsive */
@media (max-width: 768px){
  .row-8{
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .col-6, .col-12{ grid-column: 1 / -1; }
  .bottom{
    padding: 40px 0 28px;
  }
}


/* --- Detail page (location/venue) --- */
.detail{
  padding-top: 8px;
}

.detail__top{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 32px;
}

.detail__logo{
  width: 100%;
  max-width: 360px;
  height: auto;
}

.detail__title{
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-sans);
}

.detail__subtitle{
  margin: 22px 0 8px;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-sans);
}

.detail__addr{
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.detail__link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.detail__section{
  display: grid;
  gap: 26px;
}

.detail__entry{
  display: grid;
  gap: 10px;
}

.detail__date{
  font-size: 18px;
  font-weight: 700;
}

.detail__heading{
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-sans);
}

.detail__date--hash,
.detail__heading--hash{
  font-weight: 700;
}

.detail__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 820px;
}

.detail__image{
  width: 100%;
  max-width: 820px;
  height: auto;
  display: block;
}

@media (max-width: 768px){
  .detail__top{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .detail__logo{
    max-width: 520px;
  }
}


/* --- FOOTER_3 (from FOOTER_3.pdf) --- */
.footer3{
  margin-top: 64px;
}

.footer3__top{
  background: var(--pink);
  color: #000;
  padding: 34px 0;
}

.footer3__top-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 36px;
}

.footer3__social-col{
  display: flex;
  justify-content: center;
  gap: 18px;
}

.footer3__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.footer3__icon img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.footer3__divider{
  width: 2px;
  height: 220px;
  background: #000;
}

.footer3__newsletter-col{
  justify-self: start;
  width: min(520px, 100%);
  align-items: left;
}

.footer3__newsletter-head{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.footer3__arrow{
  font-size: 28px;
  line-height: 1;
  color: #000;
  transform: translateY(2px);
}

.footer3__newsletter-title{
  font-size: 22px;
  font-weight: 700;
  color: #000;
  margin-left: 120px;
}

.footer3__newsletter-subtitle{
  font-size: 13px;
  color: #000;
  opacity: 0.8;
  margin-top: 2px;
}

.footer3__form{
  width: 100%;
}

/* Bottom black block */
.footer3__bottom{
  background: #000000;
  color: var(--pink);
  padding: 34px 0 26px;
}

.footer3__bottom-inner{
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  align-content: center;
}

.footer3__partner-label{
  font-size: 18px;
  color: var(--pink);
  margin-bottom: 6px;
  align-content: center;
  display: grid;
  justify-items: center;
}

.footer3__partner-name{
  font-size: 32px;
  font-weight: 700;
  color: var(--pink);
  margin-bottom: 10px;
  align-content: center;
  display: grid;
  justify-items: center;
}

.footer3__cbk{
  max-width: 110px;
  height: auto;
  align-content: center;
  display: grid;
  justify-items: center;
}
.footer3__cbk-link{
  display: flex;
  justify-content: center;
}
.footer3__collab{
  font-size: 18px;
  color: var(--pink);
}

.footer3__robomg{
  color: var(--pink);
  text-decoration: none;
}

.footer3__robomg:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer3__rule{
  position: relative;
  left: 50%;
  width: 100vw;
  height: 3px;
  background: var(--pink);
  margin-top: 6px;
  transform: translateX(-50%);
}


.footer3__copyright{
  font-size: 16px;
  color: var(--pink);
}

@media (max-width: 768px){
  .footer3__top-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .footer3__divider{
    display: none;
  }
  .footer3__newsletter-col{
    justify-self: center;
  }
}


/* Requested typography */

.footer3__collab,
.footer3__copyright,
h2 {
  color: var(--IndexColor);
  font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
}
.date-line__left,
.date-line__right,
h3 {
  color: black;
  font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
}
h14{
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
font-family: var(--font-sans);
}
h12{
  font-weight:400;
  margin-bottom: 2px;
  font-size: 16px;
font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* CSS Spacing elements */
.MapIndexList { 
margin: 0 0 20px 0; padding: 0; list-style: none; }

/* CSS Spacing elements */
.MapIndexCategory { 
  margin: 0 0 12px 0; padding: 0; list-style: none; }
  
.MapIndexList li{
    list-style: none;
  }
  .MapIndexCategoryList { 
    margin: 0 0 10px 0; padding: 0; list-style: none; }
    
  .MapIndexList li{
      list-style: none;
    }
/* Apply the same style to specified elements */


.footer3__newsletter-title{
  color: black;
  font-family: var(--font-sans);
  font-size: 22px;
}


.date-line__connector{
  display: inline-flex;
  align-items: center;
  gap: 0px; /* no gap between rule and arrow */
  width: 100%;
}

.date-line__connector .date-line__rule{
  flex: 1 1 auto;
  height: var(--rule-thickness);
  background: var(--rule);
}

.date-line__connector .date-line__arrow{
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}


.footer3__arrowline{
  width: 20px;
  height: 3px;
  background: #000;
  display: inline-block;
  margin-right: 8px; /* gap between line and arrow */
  transform: translateY(12px);
}


.footer3__arrowimg{
  height: 20px;
  width: auto;
  display: inline-block;
}


/* --- Top date arrow connector (line + SVG arrow) --- */
.date-line{
  grid-template-columns: auto 1fr auto;
}

.date-line__connector{
  display: inline-flex;
  align-items: center;
  gap: 0px; /* no gap between line and arrow */
  width: 100%;
  transform: translateY(-1px);
}

.date-line__line{
  flex: 1 1 auto;
  height: 2px;
  background: #000;
}

.date-line__connector svg{
  flex: 0 0 auto;
  width: 16px;
  height: 10px;
  overflow: visible;
}


/* --- Full-width pink edge line --- */
.edge-line{
 /*  position: fixed;
 top: 0;*/
  left: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 1px;
  background-color: rgba(247, 178, 231, 0.8);
  z-index: 9999;
  pointer-events: none;
}


/* --- Submenu hover arrow --- */
.nav__sublink{
  position: relative;
}

.nav__sublink::before{
  content: "";
  display: inline-block;
  width: 0;
  margin-right: 0;
}

.nav__sublink:hover::before,
.nav__sublink:focus-visible::before{
  content: "→";
  width: auto;
  margin-right: 8px;
}

.hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; overflow: hidden; border-style: inset; border-width: 1px;}

/* --- Christian Ouwens template layout (Christianowens_template.pdf) --- */
.detail2{
  padding-top: 10px;
  padding-bottom: 10px;
}

.detail2__head{
  text-align: left;
  max-width: none;
}

.detail2__title{
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 30px;
}

.detail2__addresses{
 display: grid;
 grid-template-columns: 1.05fr 1fr;
 gap: 42px;
 align-items: start;
 padding: 0 0 26px;
}
.detail2__addrblock{
  min-width: 0;
}

.detail2__subtitle{
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}

.detail2__addr{
  line-height: 1.45;
  font-size: 14px;
}

.detail2__link{
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.detail2__rule{
  border: none;
  height: 2px;
  background: #000;
  margin: 14px 0 22px;
}
.container detail2,
.detail2__list{
  display: grid;
  gap: 0;
}

.detail2__item{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 42px;
  align-items: start;
  padding: 0 0 26px;
}

.detail2__img{
  width: 100%;
  height: auto;
  display: block;
}

.detail2__text{
  text-align: left;
}

.detail2__date{
  font-weight: 700;
  margin-bottom: 6px;
}

.detail2__heading{
  font-weight: 700;
  margin-bottom: 10px;
}

.detail2__p{
  margin: 0 0 10px;
  line-height: 1.55;
  font-size: 14px;
  max-width: 520px;
}

.detail2__sep{
  height: 2px;
  background: rgba(247, 178, 231, 0.8);
  width: 100%;
  margin: 0 0 26px;
}
.detail2__opening{
  font-weight: 600;
  margin-bottom: 6px;
  margin-top: 20px;
}

@media (max-width: 768px){
  .detail2__item{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .detail2__p{
    max-width: none;
  }
  .detail2__addresses{
  grid-template-columns: 1fr;
  gap: 16px;
  }
  .detail2__addrblock{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* --- Locations page --- */
.locations__map{
  margin-top: 10px;
  margin-bottom: 26px;
}

.locations__mapframe{
  width: 100%;
  height: 420px;
  border: 2px solid #000;
  display: block;
}

.locations__section-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

.locations__list{
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 8px;
}

.locations__list li{
  display: grid;
  grid-template-columns: 46px 1fr auto auto;
  gap: 12px;
  align-items: baseline;
}

.locations__num{
  font-weight: 700;
}

.locations__name{
  color: #000;
  text-decoration: none;
}

.locations__name:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.locations__meta{
  color: #000;
  text-decoration: none;
  opacity: 0.75;
  font-size: 14px;
}

.locations__meta:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.locations__more{
  margin: 0 0 24px;
}

.locations__more a{
  color: #000;
  text-decoration: none;
}

.locations__more a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px){
  .locations__mapframe{ height: 320px; }
  .locations__list li{
    grid-template-columns: 38px 1fr auto auto;
    gap: 10px;
  }
}
.container_video{
 max-width: none;
 margin: 0;
 padding: 0;
  
}
/* Google Map container (Locations page) */
#map_canvas_wrap{
  width: 100%;
  border: 2px solid #000;
}

#map_canvas{
  width: 100%;
  height: 420px;
}
@media (max-width: 768px){
  #map_canvas{ height: 320px; }
}
.locations-columns{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;              
  }
/* CSS */
/* A round badge that centers the number perfectly without resizing the text */
.num-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: #000;

  width: 1.9em;              /* MUST equal height */
  height: 1.9em;             /* MUST equal width */
  padding: 0;                /* IMPORTANT: no padding, or it becomes oval */
  border-radius: 50%;        /* exact circle */

  line-height: 1;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 13px;

  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  white-space: nowrap;
}
/* MAP BUTTONS*/
.btn-ghost2{
color: #000000;
text-decoration: none;
font-family: var(--font-sans);
font-size: 18px;
          
}
.btn-ghost2:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-ghost2:focus-visible{
  outline: 2px solid #000;
  outline-offset: 3px;
}
.map-link{
color: var(--IndexColor);
text-decoration: none;
font-family: var(--font-sans);
font-size: 18px;
}
.map-link:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}
.map-link:focus-visible{
  outline: 2px solid #000;
  outline-offset: 3px;
}

.mapInfoTitle {
  color: black;
  font-family: var(--font-sans);
  font-size: 18px;
}
.gm-style-iw-c{
/*  height : 96px !important; */
}
///////////////////////////
//////////////////////////
////////////////////////
/////*EVENT PAGE*///////
////////////////////
////////////////////
///////////



.accordion{
  max-width: 1200px;
  border: 1px solid var(--acc-border);
  border-radius: var(--acc-radius);
  overflow: hidden;
}

.acc-item + .acc-item{
  border-top: 1px solid var(--acc-border);
}

/* --- HEADER (button) --- */
.acc-trigger{
  width: 100%;
  display: grid;
  grid-template-columns: 280px 160px 120px 1fr auto; /* 4 columns + icon */
  align-items: center;
  gap: var(--gap);

  background: var(--acc-bg);
  color: var(--acc-text);
  border: 0;
  cursor: pointer;

  padding: var(--pad-y) var(--pad-x);
  text-align: left;

  appearance: none;
}

.acc-trigger[aria-expanded="true"]{
  background: var(--acc-bg-open);
}

.acc-trigger:focus-visible{
  outline: 3px solid rgba(0,0,0,0.35);
  outline-offset: -3px;
}

.acc-col{
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  min-width: 0; /* allows text truncation */
  /*white-space: nowrap;*/
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column 1: date/time style */
.acc-col.meta{
  font-weight: 500;
  opacity: 0.95;
}
.acc-col.place{
  font-weight: 600;
  opacity: 0.95;
}
/* Column 3 "Event" slightly lighter (optional) */
.acc-col.kind{
  font-weight: 500;
  opacity: 0.9;
}
/*  Title can wrap to multiple lines => header height grows */
.acc-col.title{
  white-space: normal;          /* allow wrapping */
  overflow: visible;            /* no clipping */
  text-overflow: clip;          /* no ellipsis */
  word-break: normal;
  overflow-wrap: anywhere;      /* prevents overflow with long strings */
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 200;
}
/* Right-side + / − icon */
.acc-icon{
  width: var(--icon-size);
  height: var(--icon-size);
  position: relative;
  display: inline-block;
  justify-self: end;
  flex: 0 0 auto;
}
.acc-icon::before,
.acc-icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  border-radius: 1px;
}
.acc-icon::after{
  width: 2px;
  height: 18px;
}
.acc-trigger[aria-expanded="true"] .acc-icon::after{
  opacity: 0;
}
/* text in the botton can wrap•/
.acc-col{
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Optional: top-align columns when title becomes multi-line */
.acc-trigger{
  align-items: start;           /* instead of center */
}
.acc-icon{
  align-self: center;           /* keep icon visually centered */
}

/* --- PANEL --- */
.acc-panel{
  background: var(--acc-body-bg);
  color: var(--acc-body-text);
  font-family: var(--font);

  overflow: hidden;
  max-height: 0;
  transition: max-height 240ms ease;
}

.acc-panel-inner{
  padding: 16px var(--pad-x) 20px var(--pad-x);
  border-top: 1px solid var(--acc-border);
}

/* 2 columns in content: text left, image right */
.acc-content{
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.acc-text{
  flex: 1 1 60%;
  min-width: 0;
  line-height: 1.55;
  font-size: 18px;
  font-family: var(--font-sans);
  
}

.acc-media{
  flex: 0 1 40%;
  min-width: 240px;
  max-width: 420px; 
}

.acc-media img{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--acc-border);
  background: #fff;
}

/* Responsive: stack on small screens */
@media (max-width: 820px){
  .acc-trigger{
  grid-template-columns: 1fr auto; /* stack header info */
  row-gap: 8px;
  }
  .acc-trigger .acc-col{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  }

  /* Put the four header columns in a vertical flow on mobile */
  .acc-trigger .acc-col.meta{ order: 1; }
  .acc-trigger .acc-col.place{ order: 2; }
  .acc-trigger .acc-col.kind{ order: 3; }
  .acc-trigger .acc-col.title{ order: 4; }
  .acc-trigger .acc-icon{ order: 5; }

  .acc-content{
  flex-direction: column;
  }
  .acc-media{
  max-width: 100%;
  min-width: 0;
  }
}
/* ...columns in Mobile... */

  @media (max-width: 820px){
  /* Make the header a 1-column grid (icon stays on the right) */
  .acc-trigger{
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    row-gap: 8px;
    align-items: start;
  }

  /* Force each of the 4 text columns onto its own row, in order */
  .acc-trigger .acc-col.meta  { grid-column: 1; grid-row: 1; }
  .acc-trigger .acc-col.place { grid-column: 1; grid-row: 2; }
  .acc-trigger .acc-col.kind  { grid-column: 1; grid-row: 3; }
  .acc-trigger .acc-col.title { grid-column: 1; grid-row: 4; }

  /* Keep the icon aligned on the right, vertically centered across the stack */
  .acc-trigger .acc-icon{
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    justify-self: end;
  }

  /* On mobile, allow wrapping (no ellipsis) */
  .acc-trigger .acc-col{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Content (panel) stack: text then image */
  .acc-content{
    flex-direction: column;
  }
  .acc-media{
    max-width: 100%;
    min-width: 0;
  }
  }
  /* slining button this Week*/
  /* Invisible anchor offset (useful if you have sticky headers) */
  .jump-anchor{
  position: relative;
  top: -12px;     /* tweak if needed */
  height: 1px;
  }
  
  /* The bar container */
  .jumpbar{
  max-width: 1200px;
  margin: 0 0 18px 0;
  }
  
  /* Track: horizontal + scrollable on small screens */
  .jumpbar-track{
  position: relative;
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid #d8d8d8;
  background: #f6f6f6;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none; /* Firefox */
  font-family: var(--font-sans);
  }
  .jumpbar-track::-webkit-scrollbar{ display:none; } /* Chrome/Safari */
  
  /* Buttons */
  .jumpbar-btn{
  position: relative;
  z-index: 2;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  font: font-family: var(--font-sans);
  color: #111;
  cursor: pointer;
  white-space: nowrap;
  }
  
  /* Slider “pill” (moves under active button) */
  .jumpbar-slider{
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  width: 80px;
  
  border-radius: 9999px;
  background: #111;
  opacity: 0.9;
  
  transform: translateX(var(--slider-x, 0px));
  transition: transform 220ms ease, width 220ms ease;
  }
  
  /* Active button text color on dark slider */
  .jumpbar-btn.is-active{
  color: #fff;
  }
  
  /* Slight rounding like segmented control */
  .jumpbar-track{
  border-radius: 9999px;
  }
  .jumpbar-btn{
  border-radius: 9999px;
  }
  .event-btn{
  color: #000000;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 16px;
            
  }
  .event-btn:hover{
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .event-btn:focus-visible{
    outline: 2px solid #000;
    outline-offset: 3px;
  }

/* Responsive video embed (full width of its container) */
.video-embed{
  width: 100%;
}
.video-embed iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
}
//////* MAGZINE*////////
.magazine-h5{
color: black;
font-family: var(--font-sans);
font-size: 16px;

}
.magazine__title{
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 30px;
}
.magazine-h1{
color: black;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;

}
.magazine-h2{
color: black;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 200;

}
.magazine_detail2__sep-img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}
/* =========================================================
  Floating button
   ========================================================= */
.fab{
     position: fixed;
     right: 18px;
     bottom: 18px;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: var(--IndexColor);
     display: grid;
     place-items: center;
     z-index: 9999;
     text-decoration: none;
     box-shadow: 0 10px 30px rgba(0,0,0,.18);
     -webkit-tap-highlight-color: transparent;
   
     border: 0;                 /* IMPORTANT */
     outline: none;
     appearance: none;          /* IMPORTANT (button UA styles) */
     -webkit-appearance: none;  /* IMPORTANT */
   }
   
   .fab__arrow{
     width: 12px;
     height: 12px;
     border-right: 3px solid #000;
     border-bottom: 3px solid #000;
     transform: rotate(-135deg);
   }
   .fab--side{
     left: 18px;
     right: auto;
     bottom: 18px;
     top: auto;
     transform: none;
     cursor: pointer;
     border: 0;
     padding: 0;
   }
   
   .fab__arrow--left{
     transform: rotate(135deg); /* arrow left */
   }
   .fab:focus{
     outline: none;
   }
   
   .fab:focus-visible{
     outline: 2px solid rgba(0,0,0,.35); /* optional accessible focus */
     outline-offset: 3px;
   }