/* ============================================================
   SANTA MARIA FAIRPARK  -  SAFFIRE SKIN
   Matches new Santa Barbara County Fair branded template.
   Paste into:  Saffire Admin > Site Settings > Custom CSS
   Pairs with:  header.html + footer.html
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
  --skin-primary:        #3DAFC3;   /* main teal */
  --skin-primary-dark:   #2E94A6;
  --skin-secondary:      #B2E4EC;   /* light teal (top bar) */
  --skin-accent:         #CA68C3;   /* magenta ticket button */
  --skin-accent-hover:   #E2B6DF;
  --skin-text:           #000000;
  --skin-text-light:     #475467;
  --skin-text-muted:     #667085;   /* gray used for fineprint/copyright */
  --skin-bg:             #FFFFFF;
  --skin-footer-bg:      #B2E4EC;   /* light teal (= secondary) */
  --skin-footer-text:    #000000;
  --skin-border:         #D0D5DD;
  --skin-border-strong:  #3DAFC3;   /* 3px teal section divider */

  --skin-font-body:      "Roboto", system-ui, -apple-system, sans-serif;
  --skin-font-heading:   "Roboto Slab", Georgia, serif;
  --skin-font-nav:       "Inter", system-ui, sans-serif;
  --skin-font-display:   "Poppins", "Inter", sans-serif;

  --skin-container:      1140px;   /* matches template's --container-max-width:1140 */
  --skin-radius:         4px;
}

/* ------------------------------------------------------------
   2. HIDE SAFFIRE DEFAULTS (keep cart/login functional)
   ------------------------------------------------------------ */

/* Hide visual chrome from Saffire's default header */
header.header .socialNetworks,
header.header #logoContainer,
header.header #cardWidget,
header.header #widgetBanner,
header.header .headerClear1,
header.header .headerClear2,
header.header > br {
  display: none !important;
}

.entityContainer {
    margin-top: 0px;
}

.HtmlCodeModule ~ .HtmlCodeModule, .checkout-steps, .checkout-review, .checkout-confirmation__section, .MainContent_content_pnlCreateAccount, .stay22-container, .orderConfirmationSocialShare, #reservations, #MainContent_content_uc_checkoutCart_pnl_cart {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
}

.ItemModule  {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 0 10px;
}

main.content h1,
main.content h2 {
  max-width: 1000px;
  margin-inline: auto;
}

div:has(> div > #MainContent_content_lbl_date) {
  max-width: 1000px;
  margin-inline: auto;
}

/* Collapse Saffire header to zero height; constrained to container width
   so the quickLinks align with the topbar inner's right edge. */
header.header {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: 1140px !important;
  transform: translateX(-50%);
  height: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  z-index: 100;
  pointer-events: none;     /* clicks pass through to skin-topbar */
  overflow: visible !important;
  margin-bottom: -10px;
  padding-bottom: 0px !important;
}
header.header .headerInnerContent {
  display: block;
  position: relative;
  pointer-events: none;
}
/* But the quickLinks themselves receive clicks */
header.header .quickLinks { pointer-events: auto; }
header.header .quickLinks * { pointer-events: auto; }

/* Hide Saffire breadcrumb */
.bc,
#MainContent_content_smp_breadcrumbs {
  display: none !important;
}

/* Hide Saffire's page title (we put it in the hero instead) */
h1.dynamicPageTitle {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Hide Saffire's default footer entirely */
footer.footer {
  display: none !important;
}

/* ------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------ */
body#body,
body.isResponsive {
  font-family: var(--skin-font-body);
  color: var(--skin-text);
  background: #b2e4ec;
  margin: 0;
  padding: 0;
}

body.checkoutPage main.content {
    background: #b2e4ec !important;
}

body#body * {
  box-sizing: border-box;
}

.skin-header,
.skin-footer {
  font-family: var(--skin-font-body);
  line-height: 1.5;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------
   4. TOP UTILITY BAR  (light teal #B2E4EC, exactly 48px tall)
   ------------------------------------------------------------ */
.skin-header { position: relative; }

.skin-topbar {
  background: var(--skin-secondary);
  border-bottom: 1px solid var(--skin-border);
  font-family: var(--skin-font-display);
  position: relative;
  z-index: 1;
}

.skin-topbar__inner {
  max-width: var(--skin-container);
  margin: 0 auto;
  /* 225px left padding matches template (--padding-left:225px on inner row),
     reserves space for the logo that overlaps up from the main bar */
  padding: 0 24px 0 225px;
  min-height: 54px;     /* matches source's actual topbar height (48 min + content padding) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* LEFT: socials grid (template exact: 32x32 circle, 16px icon, 7px gap) */
.skin-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 7px;
  align-items: center;
}
.skin-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--skin-primary);
  color: var(--skin-secondary);
  transition: transform .15s ease, background .15s ease;
}
.skin-socials a:hover { background: var(--skin-primary-dark); transform: translateY(-1px); }
.skin-socials svg { width: 16px; height: 16px; fill: currentColor; }

/* ------------------------------------------------------------
   5. SAFFIRE QUICKLINKS  (Log In / My Account / View Cart)
   These replace the brand+date on the right side of the topbar.
   ------------------------------------------------------------ */
header.header .quickLinks {
  position: absolute;
  top: 0;
  right: 0;           /* aligns to container right edge (per header.header max-width) */
  margin: 0;
  padding: 0 24px 0 0;
  z-index: 100;       /* above topbar (z:1) but below logo (z:10000) */
  height: 54px;       /* match topbar height for vertical centering */
  display: flex;
  align-items: center;
}
header.header .quickLinks ul { height: 54px; }
header.header .quickLinks li { height: 54px; }
header.header .quickLinks ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--skin-font-nav);  /* Inter */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  height: 48px;
}
header.header .quickLinks li {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 48px;
}
header.header .quickLinks a {
  color: var(--skin-text);
  text-decoration: none;
  transition: color .15s ease;
  cursor: pointer;
  white-space: nowrap;
}
header.header .quickLinks a:hover { color: var(--skin-accent); }

/* Hide Tickets link (it's also in the main bar as a button) */
header.header .quickLinks .StandardHeaderTicketsAndDeals { display: none; }

/* Hide redundant cart-view (just the icon span - we use the labeled View Cart instead) */
header.header .quickLinks .standardCartView { display: none; }

/* View Cart: text + icon */
header.header .quickLinks .standardViewCart {
  gap: 6px;
}
header.header .quickLinks .viewCartText {
  font-family: var(--skin-font-nav);
  font-size: 16px;
}
header.header .quickLinks .standardViewCart svg {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-left: 2px;
}

/* My Account dropdown */
header.header .quickLinks .myAccountNavButton a { cursor: pointer; }
header.header .quickLinks .myAccountNavButtonSubMenu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #FFFFFF;
  border: 1px solid var(--skin-border);
  border-radius: 6px;
  padding: 8px 0;
  min-width: 180px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  display: none;
  z-index: 200;
}
header.header .quickLinks .myAccountButton-wrapper:hover .myAccountNavButtonSubMenu,
header.header .quickLinks .myAccountNavButtonSubMenu:hover {
  display: block;
}
header.header .quickLinks .myAccountNavButtonSubMenu a {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
}
header.header .quickLinks ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--skin-font-nav);
  font-size: 14px;
  font-weight: 500;
}
header.header .quickLinks li {
  display: inline-flex;
  align-items: center;
  position: relative;
}
header.header .quickLinks a {
  color: var(--skin-text);
  text-decoration: none;
  transition: color .15s ease;
}
header.header .quickLinks a:hover { color: var(--skin-accent); }

/* Hide top-bar "Tickets" link from quickLinks (we have a dedicated button in main bar) */
header.header .quickLinks .StandardHeaderTicketsAndDeals { display: none; }

/* Cart icon styling */
header.header .quickLinks .standardViewCart svg {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
header.header .quickLinks .viewCartText {
  font-size: 13px;
  margin-right: 4px;
}

/* My Account dropdown */
header.header .quickLinks .myAccountNavButton a { cursor: pointer; }
header.header .quickLinks .myAccountNavButtonSubMenu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid var(--skin-border);
  border-radius: var(--skin-radius);
  padding: 8px 0;
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: none;
  z-index: 100;
}
header.header .quickLinks .myAccountNavButton-wrapper:hover .myAccountNavButtonSubMenu,
header.header .quickLinks .myAccountNavButtonSubMenu:hover {
  display: block;
}
header.header .quickLinks .myAccountNavButtonSubMenu a {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
}

/* ------------------------------------------------------------
   6. MAIN NAV BAR  (teal #3DAFC3, max-height 65px overflow visible
   from template's #strawberry-header rule)
   ------------------------------------------------------------ */
.skin-mainbar {
  background: var(--skin-primary);
  position: relative;
  /* No z-index here — it would create a stacking context that traps
     the logo's z-index, hiding the logo top behind the topbar. */
  max-height: 65px;
  overflow: visible;
}

.skin-mainbar__inner {
  max-width: var(--skin-container);
  margin: 0 auto;
  padding: 0;
  /* Source content height is ~61px (nav widget: 18px pad + 24px line + 18px pad);
     using 60 here so logo overflow into hero matches source's ~18px overhang. */
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo: align-self:flex-start anchors it to TOP of mainbar so the
   -40px margin works against a known reference. Width 228 matches
   source's measured rendered width on a desktop viewport. */
.skin-logo {
  position: relative;
  z-index: 10000;
  align-self: flex-start;
  margin-top: -40px;
  margin-bottom: 0;
  flex: 0 0 25%;
  max-width: 280px;
  display: block;
  max-height: 60px;       /* matches main bar inner height */
  overflow: visible;
  text-align: start;
}
.skin-logo img {
  display: block;
  width: 228px;        /* matches source's measured rendered width */
  height: auto;
  max-width: 100%;
  /* natural height (~119px) overflows the 65px container — by design */
}

/* Burger toggle (mobile only) */
.skin-nav-toggle { display: none; }
.skin-burger {
  display: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
}
.skin-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Desktop nav */
.skin-nav { flex: 1 1 auto; }
.skin-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
}
.skin-nav > ul > li {
  position: relative;
}
.skin-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--skin-font-nav);
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  padding: 12px 4px;
  transition: color .15s ease;
}
.skin-nav a:hover,
.skin-nav a:focus { color: var(--skin-accent-hover); }
.skin-caret { width: 10px; height: 10px; fill: currentColor; }

.skin-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: var(--skin-secondary);
  border: 1px solid var(--skin-border);
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
  z-index: 100;
}
.skin-nav > ul > li.has-submenu:hover > .skin-submenu,
.skin-nav > ul > li.has-submenu:focus-within > .skin-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.skin-submenu a {
  display: block;
  padding: 10px 16px;
  font-size: 15px;
  color: var(--skin-text);
  font-weight: 500;
}
.skin-submenu a:hover {
  background: #FFFFFF;
  color: var(--skin-text-light);
}

/* ------------------------------------------------------------
   7. TICKET STUB BUTTON  (magenta, raffle-ticket shape)
   ------------------------------------------------------------ */
.skin-ticket-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.82em;       /* matches source exactly: 6.82 * 18px = 122.76px */
  height: 2.73em;      /* matches source exactly: 2.73 * 18px = 49.14px */
  font-family: "Poppins", Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  background:
    repeating-linear-gradient(92deg, transparent, rgba(255,255,255,0.03) 1px, transparent 2px, transparent 6px),
    repeating-linear-gradient(178deg, transparent, rgba(0,0,0,0.02) 1px, transparent 2px, transparent 8px),
    radial-gradient(ellipse 80px 40px at 20% 30%, rgba(255,255,255,0.08), transparent),
    radial-gradient(ellipse 60px 50px at 75% 65%, rgba(0,0,0,0.05), transparent),
    linear-gradient(165deg, rgba(255,255,255,0.07) 0%, transparent 40%, rgba(0,0,0,0.04) 100%),
    var(--skin-accent);
  clip-path: polygon(
    0% 0%, 0.23em 5%, 0% 10%, 0.23em 15%, 0% 20%, 0.23em 25%, 0% 30%,
    0.23em 35%, 0% 40%, 0.23em 45%, 0% 50%, 0.23em 55%, 0% 60%, 0.23em 65%,
    0% 70%, 0.23em 75%, 0% 80%, 0.23em 85%, 0% 90%, 0.23em 95%, 0% 100%,
    100% 100%, 100% 95%, calc(100% - 0.23em) 90%, 100% 85%, calc(100% - 0.23em) 80%,
    100% 75%, calc(100% - 0.23em) 70%, 100% 65%, calc(100% - 0.23em) 60%, 100% 55%,
    calc(100% - 0.23em) 50%, 100% 45%, calc(100% - 0.23em) 40%, 100% 35%,
    calc(100% - 0.23em) 30%, 100% 25%, calc(100% - 0.23em) 20%, 100% 15%,
    calc(100% - 0.23em) 10%, 100% 5%, calc(100% - 0.23em) 0%, 100% 0%
  );
  filter: url(#paper-grain);
  transition: transform .15s ease, filter .15s ease, color .15s ease, background .15s ease;
}
.skin-ticket-btn:hover {
  transform: scale(1.04);
  filter: url(#paper-grain) brightness(1.08);
  color: #000;
  background:
    repeating-linear-gradient(92deg, transparent, rgba(255,255,255,0.03) 1px, transparent 2px, transparent 6px),
    repeating-linear-gradient(178deg, transparent, rgba(0,0,0,0.02) 1px, transparent 2px, transparent 8px),
    radial-gradient(ellipse 80px 40px at 20% 30%, rgba(255,255,255,0.08), transparent),
    radial-gradient(ellipse 60px 50px at 75% 65%, rgba(0,0,0,0.05), transparent),
    linear-gradient(165deg, rgba(255,255,255,0.07) 0%, transparent 40%, rgba(0,0,0,0.04) 100%),
    var(--skin-accent-hover);
}
.skin-ticket-btn:hover .inner { border-color: #000; }
.skin-ticket-btn:hover .num { color: #000; }
.skin-ticket-btn:active {
  transform: scale(0.97);
  filter: url(#paper-grain) brightness(0.95);
}
.skin-ticket-btn .inner {
  position: absolute;
  inset: 0.23em 0.64em;
  border: 0.07em solid #FFFFFF;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease;
}
.skin-ticket-btn .num {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 0.32em;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0;
  line-height: 1;
  transition: color .15s ease;
  pointer-events: none;
}
/* Position numbers INSIDE the white inner border.
   Inner border is at inset 0.23em/0.64em from button edges.
   At .num font-size of 0.32em (5.76px on 18px button), 1em on .num = 5.76px ≈
   button's 0.32em. So top:1em places num just inside the inner top border,
   and left:2.55em (= 14.7px ≈ button's 0.82em) just inside the inner left. */
.skin-ticket-btn .num.tl { top: 1em; left: 2.55em; }
.skin-ticket-btn .num.tr { top: 1em; right: 2.55em; }
.skin-ticket-btn .num.bl { bottom: 1em; left: 2.55em; }
.skin-ticket-btn .num.br { bottom: 1em; right: 2.55em; }
.skin-ticket-btn__label {
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------
   8. HERO  (full-bleed photo + 50% black overlay + opacity-fan
   transition + light teal subtitle band — matches template hero)
   ------------------------------------------------------------ */
.skin-hero {
  position: relative;
  min-height: 350px;
  background-image: url("https://santabarbaracountyfair.com/wp-content/uploads/sites/3/2026/04/AdobeStock_208181282-1536x1052.jpeg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

/* 50% black overlay (matches template --overlay-opacity:0.5) */
.skin-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000000;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}

.skin-hero__inner {
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  padding: 0 24px;
  margin-top: -100px;     /* matches template title margin-top:-100px */
}

.skin-hero__title {
  font-family: var(--skin-font-display);  /* Poppins */
  font-size: 55px;
  font-weight: 600;
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* Opacity-fan SVG at bottom of hero (235px tall, light teal fill).
   Rotated 180deg to match Elementor's .elementor-shape-bottom behavior:
   filled portion sits at the bottom of the hero, fan/peaks rise UP into the photo. */
.skin-hero__shape {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: calc(100% + 1.3px);
  height: 235px;
  display: block;
  z-index: 2;
  pointer-events: none;
  transform: rotate(180deg);
}
.skin-hero__shape .elementor-shape-fill {
  fill: var(--skin-secondary);  /* #B2E4EC */
}

/* ------------------------------------------------------------
   8b. BODY INTRO  (NOT part of the hero/header — first child of
   the body content; the date band uses the same light teal as
   the rest of the body so they flow as one continuous section)
   ------------------------------------------------------------ */
.skin-body-intro {
  background: var(--skin-secondary);  /* #B2E4EC */
  text-align: center;
  padding: 40px 24px;
  margin: 0;
}
.skin-body-intro p {
  margin: 0;
  font-family: var(--skin-font-display);  /* Poppins */
  font-size: 25px;
  font-weight: 400;
  line-height: 1.4;
  color: #000000;
}

/* ------------------------------------------------------------
   9. MAIN CONTENT AREA
        Body uses light teal (#B2E4EC) end-to-end, continuous
        with .skin-body-intro above. Page content sits on top.
   ------------------------------------------------------------ */
main.content,
main.AngularAppContainer {
  background: var(--skin-secondary);  /* #B2E4EC */
  width: 100%;
  padding: 0px;
  margin-top: -5px;
}

#MainContent_content_uc_entityModuleContainerDisplay_rptr_rows_rptr_columns_0_div_column_0{
    padding: 0px;
}

.dynamicPageContainer {
  margin: 0 auto;
  padding: 0;
  background: transparent;            /* let the light teal show through */
  font-family: var(--skin-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--skin-text);
}

/* Headings — recolored for readability on light teal background */
.dynamicPageContainer h1,
.dynamicPageContainer h2,
.dynamicPageContainer h3,
.dynamicPageContainer h4 {
  font-family: var(--skin-font-heading);
  color: #fff;            /* black, best contrast on light teal */
  line-height: 1.25;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.dynamicPageContainer h2 { font-size: 32px; color: var(--skin-text); }
.dynamicPageContainer h3 { font-size: 24px; color: var(--skin-accent); }  /* magenta — high contrast */
.dynamicPageContainer h4 { font-size: 19px; }

.dynamicPageContainer p { margin: 0 0 1em; }

.dynamicPageContainer a {
  color: var(--skin-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dynamicPageContainer a:hover { color: var(--skin-primary); }

.entityContainerModule {
  margin-bottom: 28px;
}

.entityContainerModule .photoLeft,
.entityContainerModule .photoRight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.entityContainerModule .photoRight { direction: rtl; }
.entityContainerModule .photoRight > * { direction: ltr; }
.entityContainerModule .previewArea { min-width: 0; }
.entityContainerModule img {
  max-width: 100%;
  height: auto;
  border-radius: var(--skin-radius);
}

/* ------------------------------------------------------------
   10. FOOTER  -  sponsor strip (white bg, 3px teal top border)
   ------------------------------------------------------------ */
.skin-footer {
  background: var(--skin-footer-bg);
  color: var(--skin-footer-text);
  font-family: var(--skin-font-body);
}

/* Sponsor carousel: 8 across desktop, 4 across tablet/mobile.
   Slide width = 1/8 viewport; image is 150x150 natural with 20px
   between adjacent slides (matches template image_spacing_custom:20). */
.skin-footer__sponsors {
  background: #FFFFFF;
  border-top: 3px solid var(--skin-border-strong);
  padding: 16px 0;
  overflow: hidden;
}
.skin-sponsor-track {
  display: flex;
  width: max-content;
  animation: skin-sponsor-scroll 40s linear infinite;
  align-items: center;
}
.skin-sponsor-track > a {
  flex: 0 0 12.5vw;            /* 1/8 of viewport on desktop */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;             /* 10+10 = 20px between adjacent images */
  box-sizing: border-box;
}
.skin-sponsor-track img {
  max-width: 100%;
  max-height: 150px;           /* matches source natural image size */
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  transition: opacity .2s ease;
}
.skin-sponsor-track a:hover img { opacity: 0.8; }
@keyframes skin-sponsor-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.skin-footer__sponsors:hover .skin-sponsor-track { animation-play-state: paused; }

/* ------------------------------------------------------------
   11. FOOTER  -  3-column main section
        bg #B2E4EC, 3px teal top border, 5% side padding
   ------------------------------------------------------------ */
.skin-footer__main {
  background: var(--skin-footer-bg);
  border-top: 3px solid var(--skin-border-strong);
  padding: 36px 5%;
  position: relative;
}
.skin-footer__inner {
  max-width: 1312px;
  margin: 0 auto;
}
.skin-footer__main .skin-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
  padding-top: 16px;
  position: relative;
}
/* 1px gray divider line above the 3 columns */
.skin-footer__main .skin-footer__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--skin-border);
}

.skin-footer__col h5 {
  font-family: var(--skin-font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: -0.48px;
  color: var(--skin-primary);
  text-align: center;
  margin: 0 0 16px;
}

.skin-footer__logo {
  display: block;
  width: 85%;
  max-width: 480px;
  height: auto;
  margin: 0 0 24px;
}

/* Contact list */
.skin-footer__contact {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.skin-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--skin-font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--skin-text);
}
.skin-footer__contact a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--skin-text);
  text-decoration: none;
  transition: color .2s ease;
}
.skin-footer__contact a:hover { color: var(--skin-primary); }
.skin-footer__contact svg {
  width: 24px;
  height: 24px;
  fill: var(--skin-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Social icons in footer */
.skin-footer__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.skin-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  background: transparent;
  color: var(--skin-primary);
  transition: color .2s ease;
}
.skin-footer__socials svg {
  width: 35px;
  height: 35px;
  fill: currentColor;
}
.skin-footer__socials a:hover { color: #344054; }

/* Newsletter column */
.skin-footer__col--newsletter h5 { text-align: center; }
.skin-footer__col--newsletter > p {
  font-family: var(--skin-font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: var(--skin-text-muted);
  text-align: center;
  max-width: 500px;
  margin: 0 auto 18px;
}
.skin-newsletter {
  display: flex;
  gap: 0;
  margin: 0 auto 14px;
  max-width: 500px;
}
.skin-newsletter input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid var(--skin-border);
  border-right: 0;
  color: var(--skin-text-muted);
  font-family: var(--skin-font-nav);
  font-size: 16px;
  line-height: 200%;
  border-radius: 8px 0 0 8px;
  outline: none;
  transition: border-color .15s ease;
}
.skin-newsletter input[type="email"]::placeholder { color: var(--skin-text-muted); }
.skin-newsletter input[type="email"]:focus { border-color: var(--skin-primary); }
.skin-newsletter button {
  padding: 12px 20px;
  border: 0;
  background: var(--skin-accent);
  color: #FFFFFF;
  font-family: var(--skin-font-nav);
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  cursor: pointer;
  border-radius: 0 8px 8px 0;
  transition: background .15s ease;
}
.skin-newsletter button:hover { background: var(--skin-primary); color: #FFFFFF; }
.skin-footer__fineprint {
  font-family: var(--skin-font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: var(--skin-text-muted);
  text-align: center;
  margin: 0;
}

/* Other events column */
.skin-footer__col--events h5 { text-align: center; }
.skin-footer__col--events img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.skin-footer__col--events a {
  display: block;
  transition: opacity .15s ease;
}
.skin-footer__col--events a:hover { opacity: 0.85; }

/* ------------------------------------------------------------
   12. FOOTER  -  copyright bar
        bg #B2E4EC, 3px teal top border, gray text
   ------------------------------------------------------------ */
.skin-footer__bottom {
  background: var(--skin-footer-bg);
  border-top: 3px solid var(--skin-border-strong);
  padding: 8px 5%;
  position: relative;
}
.skin-footer__bottom .skin-footer__inner {
  padding-top: 16px;
  position: relative;
  text-align: center;
}
.skin-footer__bottom .skin-footer__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--skin-border);
}
.skin-footer__bottom p {
  margin: 0;
  font-family: var(--skin-font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: var(--skin-text-muted);
}

/* ------------------------------------------------------------
   13. RESPONSIVE  -  tablet
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Topbar: source has socials at x=10, brand at right.
     Padding 10 left matches source. */
  .skin-topbar__inner {
    padding: 0 12px 0 10px;
    min-height: 48px;
    justify-content: flex-start;
    gap: 14px;
  }
  .skin-socials { margin-left: 0; gap: 7px; }
  .skin-socials a { width: 32px; height: 32px; }  /* source mobile: 32x32 */
  .skin-socials svg { width: 16px; height: 16px; }

  /* Quicklinks: condensed at right side of topbar */
  header.header .quickLinks {
    height: 48px;
    right: 12px;
  }
  header.header .quickLinks ul { gap: 12px; font-size: 13px; height: 48px; }
  header.header .quickLinks li { height: 48px; }

  /* Mainbar: source caps at 65px (per #strawberry-header), overflow visible.
     Logo anchored to TOP and FLUSH LEFT (source has logo at x=0). */
  .skin-mainbar { max-height: 65px; overflow: visible; }
  .skin-mainbar__inner {
    gap: 12px;
    min-height: 60px;
    max-height: 65px;
    overflow: visible;
    padding: 0 12px 0 0;     /* flush left to match source's logo x=0 */
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  /* Logo: 164px wide on tablet. Container capped at 65px tall —
     image natural ~86px overflows DOWN only. Flush left (no margin).
     High z-index so logo paints ABOVE the dropdown menu when it opens. */
  .skin-logo {
    flex: 0 0 auto;
    max-width: none;
    margin: 0;
    margin-top: 0;
    max-height: 65px;
    overflow: visible;
    align-self: flex-start;
    position: relative;
    z-index: 10000;
  }
  .skin-logo img { width: 164px; }

  /* Source switches nav to burger at tablet (Elementor --dropdown-tablet).
     Hide horizontal nav, show burger toggle (vertically centered in mainbar). */
  .skin-nav { display: none; }
  .skin-burger {
    display: flex;
    order: 2;
    margin-left: auto;
    width: 42px;
    height: 42px;
    justify-content: center;
    align-self: center;
  }

  /* Per request: HIDE the TICKETS button on tablet and mobile */
  .skin-ticket-btn { display: none; }

  /* Burger-revealed nav drops down from below the mainbar.
     z-index is lower than the logo (10000) so the logo's overflow into the
     dropdown area paints above. Top padding 28px keeps the menu items clear
     of the logo's ~18px overhang. */
  .skin-nav-toggle:checked ~ .skin-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--skin-secondary);
    border: 1px solid var(--skin-border);
    z-index: 5;
    padding: 28px 0 8px;
  }
  .skin-nav-toggle:checked ~ .skin-nav > ul {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .skin-nav-toggle:checked ~ .skin-nav a {
    color: var(--skin-text);
    padding: 12px 24px;
    font-size: 15px;
  }
  .skin-nav-toggle:checked ~ .skin-nav .has-submenu .skin-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(0,0,0,0.05);
  }

  /* Hero */
  .skin-hero { min-height: 300px; }
  .skin-hero__inner { margin-top: -80px; }
  .skin-hero__title { font-size: 44px; }
  .skin-hero__shape { height: 170px; }
  .skin-body-intro p { font-size: 22px; }

  .skin-footer__main .skin-footer__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
    justify-items: center;
  }
  .skin-footer__main { padding: 64px 5% 48px; }
  .skin-footer__logo { margin-left: auto; margin-right: auto; }
  .skin-footer__contact { display: inline-block; text-align: left; }
  .skin-footer__socials { justify-content: center; margin: 0 auto 40px; }
  .skin-footer__col--events { max-width: 500px; width: 100%; }

  /* Sponsor track: 4 across at tablet width */
  .skin-sponsor-track > a { flex: 0 0 25vw; padding: 0 10px; }
  .skin-sponsor-track img { max-height: 140px; }
}

/* ------------------------------------------------------------
   14. RESPONSIVE  -  mobile
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Topbar — socials at 10px from left, quicklinks at right (matches source) */
  .skin-topbar__inner {
    padding: 0 8px 0 10px;
    min-height: 48px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .skin-socials { gap: 7px; margin-left: 0; }
  .skin-socials a { width: 32px; height: 32px; }  /* match source's 32x32 */
  .skin-socials svg { width: 16px; height: 16px; }

  header.header .quickLinks {
    height: 48px;
    right: 8px;
  }
  header.header .quickLinks ul {
    gap: 8px;
    font-size: 11px;
    height: 48px;
  }
  header.header .quickLinks li { height: 48px; }
  header.header .quickLinks .viewCartText { display: none; }

  /* Mobile main bar: logo flush left, burger right (tickets hidden) */
  .skin-mainbar__inner {
    flex-wrap: nowrap;
    padding: 0 10px 0 0;       /* logo flush at x=0, burger has 10px right */
    min-height: 60px;
    max-height: 65px;
    overflow: visible;
    gap: 8px;
    justify-content: space-between;
    align-items: flex-start;
  }
  .skin-logo {
    flex: 0 0 auto;
    margin: 0;
    align-self: flex-start;
    max-height: 65px;
    overflow: visible;
  }
  .skin-logo img { width: 159px; }

  .skin-burger {
    display: flex;
    order: 2;
    margin-left: auto;
    width: 42px;
    height: 42px;
    align-self: center;        /* vertically centered in the mainbar */
  }
  /* TICKETS button stays hidden on mobile (inherited from tablet) */
  .skin-ticket-btn { display: none; }

  .skin-nav {
    order: 4;
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .skin-nav-toggle:checked ~ .skin-nav {
    max-height: 600px;
    padding-bottom: 12px;
  }
  .skin-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 12px;
  }
  .skin-nav > ul > li {
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  .skin-nav a {
    padding: 14px 8px;
    width: 100%;
  }
  .skin-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: rgba(255,255,255,0.1);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .skin-nav > ul > li.has-submenu:hover > .skin-submenu,
  .skin-nav > ul > li.has-submenu:focus-within > .skin-submenu {
    max-height: 400px;
  }
  .skin-submenu a { color: #FFFFFF; padding-left: 24px; }
  .skin-submenu a:hover { background: rgba(255,255,255,0.15); color: var(--skin-accent-hover); }

  .skin-hero { min-height: 260px; }
  .skin-hero__inner { margin-top: -60px; padding: 0 16px; }
  .skin-hero__title { font-size: 36px; }
  .skin-hero__shape { height: 120px; }
  .skin-body-intro { padding: 28px 16px; }
  .skin-body-intro p { font-size: 18px; }

  .entityContainerModule .photoLeft,
  .entityContainerModule .photoRight {
    grid-template-columns: 1fr;
    gap: 20px;
    direction: ltr;
  }

  .skin-footer__main { padding: 48px 5%; }
  .skin-footer__main .skin-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .skin-footer__col--newsletter > p { font-size: 16px; }
  .skin-footer__col h5 { font-size: 20px; }

  /* Sponsor track: 4 across at mobile width (10px spacing per template mobile setting) */
  .skin-sponsor-track > a { flex: 0 0 25vw; padding: 0 5px; }
  .skin-sponsor-track img { max-height: 110px; }
}