/*!
Theme Name: Kingston Central Plaza
Template: milton-village
Description: Child theme for Kingston Central Plaza, based on Milton Village.
Version: 1.0.0
Text Domain: kingston-central-plaza
*/

:root {
  --brand-dark: #425563;
  --brand-accent: #FAB900;
  --brand-accent-alt: #5E90A7;
  --text-background-primary: #FFFFFF;
  --background-primary: #5E90A7;
  --background-primary-15: #5E90A726; /* #5E90A7 15% opacity */
  --background-primary-30: #5E90A74D; /* #5E90A7 30% opacity */
  --background-secondary: color-mix(in srgb, var(--brand-accent) 5%, transparent); /* Brand accent 15% opacity */
  --hero-line-1: var(--text-background-primary);
  --hero-line-2: var(--brand-accent);

  /* Mega menu */
  --mega-menu-section-title-color: var(--brand-accent-alt);
  --mega-menu-store-location-color: var(--brand-accent-alt);

  /* Header mobile toggle buttons */
  --header-mobile-toggle-icon: #FFFFFF;

  /* Header search form */
  --header-search-form-bg: var(--background-primary-15);

  /* Main menu — desktop top-level item padding */
  --main-menu-item-padding-x-desktop: 1rem;

  /* Icon CTA block */
  --icon-cta-text: var(--brand-dark);
  --icon-cta-bg: var(--background-primary-30);
  --icon-cta-bg-hover: var(--background-primary-30);
  --icon-cta-border: transparent;
  --icon-cta-border-hover: var(--background-primary);

  /* Tabs header block */
  --tabs-header-button-text: var(--brand-dark);
  --tabs-header-button-bg: var(--background-primary-15);
  --tabs-header-button-bg-desktop: transparent;
  --tabs-header-button-bg-hover: var(--background-primary-30);
  --tabs-header-button-border: transparent;
  --tabs-header-button-border-hover: var(--background-primary);
  --tabs-header-button-active-bg: var(--background-primary-30);
  --tabs-header-button-active-border: transparent;

  /* Accordion block */
  --accordion-item-bg: var(--background-primary-15);

  /* Image Map Pro */
  --image-map-stores-list-bg: color-mix(in srgb, var(--brand-accent) 5%, transparent);
  --image-map-map-area-bg: #FFFFFF;

  /* Shop category card label */
  --shop-category-label-bg: #FFFFFF;
  --shop-category-label-text: var(--brand-dark);

  /* Store archive featured category CTAs */
  --store-archive-featured-categories-bg: var(--background-primary-15);
  --store-archive-category-label-bg: #FFFFFF;

  /* Store archive filters — form fields */
  --store-archive-field-bg: var(--background-primary-15);
  --store-archive-field-border: var(--background-primary-15);

  /* Event archive filters — form fields */
  --event-archive-field-bg: var(--background-primary-15);
  --event-archive-field-border: var(--background-primary-15);

  /* Store archive filters — category radio active indicator */
  --store-archive-category-filter-active-bg: #B7CDD9;

  /* Store archive filters — mobile filter/sort row background */
  --store-archive-mobile-filters-bg: color-mix(in srgb, var(--background-primary) 5%, transparent);
  --store-archive-mobile-filters-border-color: #D9D9D9;

  /* Store card content area (below image) */
  --store-card-content-bg: #FFFFFF;
  --store-card-content-bg-image: none;
  --store-card-content-text: var(--brand-dark);
  --store-card-content-icon: var(--brand-accent);

  /* Store detail page */
  --store-detail-hero-hours-border: var(--brand-accent);
  --store-detail-hero-hours-row-border: var(--brand-accent);
  --store-detail-contact-bg: var(--background-primary-15);

  /* Primary button */
  --button-primary-bg: var(--brand-accent);
  --button-primary-text: #FFFFFF;
  --button-primary-bg-hover: var(--brand-dark);
  --button-primary-text-hover: #FFFFFF;

  /* Form field labels */
  --form-label-color: var(--brand-dark);
  --hero-content-form-label-color: var(--brand-dark);

  /* What's New stores section */
  --whats-new-stores-bg: var(--background-primary-15);

  /* Search results — store results section */
  --search-store-results-bg: var(--background-primary-15);

  /* Search results page — form fields */
  --search-results-field-bg: var(--background-primary-30);
  --search-results-field-border: var(--background-primary-30);

  /* Search results page — result items */
  --search-result-item-bg: var(--background-primary-15);

  /* Slider navigation — default for coloured block backgrounds */
  --slider-nav-arrow-color: #FFFFFF;
  --slider-nav-dot: #FFFFFF;
  --slider-nav-dot-active: var(--brand-accent);

  /* Hero slider navigation */
  --hero-slider-arrow-bg: #FFFFFF;
  --hero-slider-arrow-bg-hover: var(--brand-accent);
  --hero-slider-arrow-color: var(--brand-dark);
  --hero-slider-arrow-color-hover: #FFFFFF;
  --hero-slider-dot: #FFFFFF;
  --hero-slider-dot-hover: var(--brand-accent);
  --hero-slider-dot-active: var(--brand-accent);

  /* Event card media */
  --event-card-arrow-color: #FFFFFF;
  --event-card-fallback-accent-top: -25px;
  --event-card-fallback-accent-right: -25px;
  --event-card-fallback-accent-bottom: auto;
  --event-card-fallback-accent-left: auto;
  --event-card-fallback-accent-width: 80%;
  --event-card-fallback-accent-height: 80%;
  --event-card-fallback-accent-position: top right;
  --event-card-fallback-accent-size: contain;
  --event-card-fallback-accent-opacity: 0.1;

  /* Site footer */
  --footer-nav-color: #FFFFFF;
  --footer-logo-max-width: 160px;
  --footer-logo-max-width-desktop: 292px;
  --footer-nav-columns: 2;
  --footer-main-gap-desktop: 300px;
  --footer-nav-margin-bottom-desktop: 100px;
  --footer-main-border-color: transparent;
  --footer-info-bg: #DDE5E9;
  --footer-info-text: var(--brand-dark);
  --footer-accent-primary-opacity: 0.1;
  --footer-accent-secondary-opacity: 0.1;

  /* Footer accents — mobile */
  --footer-accent-primary-content: "";
  --footer-accent-secondary-content: none;
  --footer-accent-primary-top: auto;
  --footer-accent-primary-right: auto;
  --footer-accent-primary-bottom: -78px;
  --footer-accent-primary-left: -142px;
  --footer-accent-primary-width: 341px;
  --footer-accent-primary-height: 341px;
  --footer-accent-primary-position: bottom left;
}

@media (min-width: 768px) {
  :root {
    /* Footer accents — desktop */
    --footer-accent-secondary-content: "";
    --footer-accent-primary-top: -195px;
    --footer-accent-primary-right: auto;
    --footer-accent-primary-bottom: auto;
    --footer-accent-primary-left: -195px;
    --footer-accent-primary-width: 470px;
    --footer-accent-primary-height: 469px;
    --footer-accent-primary-position: top left;
    --footer-accent-secondary-bottom: -16px;
    --footer-accent-secondary-right: -110px;
    --footer-accent-secondary-width: 438px;
    --footer-accent-secondary-height: 438px;
  }
}

.site-footer {
  background-image: none !important;
  overflow: hidden;
}

/* White block background variants */
.bg-white {
  /* Store card text area */
  --store-card-content-bg: var(--background-primary-15);

  /* Slider navigation */
  --slider-nav-arrow-bg: var(--brand-dark);
  --slider-nav-arrow-bg-hover: var(--brand-accent);
  --slider-nav-arrow-color: #FFFFFF;
  --slider-nav-dot: var(--background-primary);
  --slider-nav-dot-active: var(--brand-accent);
}

/* Block background colour utilities (linked to background colour field selections) */
.bg-background-primary-15 {
  background-color: var(--background-primary-15);
}

.bg-background-primary-30 {
  background-color: var(--background-primary-30);
}

.text-text-background-primary {
  color: var(--text-background-primary);
}

.site-header .site-branding {
  width: 138px !important;
}

.site-header .site-branding .custom-logo-link {
  display: block;
  line-height: 0;
}

.site-header .site-branding .custom-logo {
  width: 138px !important;
  height: 63px !important;
  object-fit: contain;
}

@media (min-width: 768px) {
  .site-header .site-branding {
    width: 159px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .site-header .site-branding .custom-logo {
    width: 159px !important;
    height: 73px !important;
  }
}

/* Hero block accent backgrounds — override parent theme curves */
section.hero-block {
  position: relative;
}

section.hero-block .hero-content {
  background-image: none !important;
}

section.hero-block .hero-inner::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 255px;
  height: 255px;
  background-image: url("images/background-accent-2.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 1024px) {
  section.hero-block .hero-inner::before {
    top: -199px;
    right: calc(37.5% - 199px);
    width: 470px;
    height: 469px;
    background-image: url("images/background-accent-1.png");
  }
}

section.hero-block::after {
  display: none;
}

@media (min-width: 1024px) {
  section.hero-block::after {
    content: "";
    display: block;
    position: absolute;
    left: -45px;
    bottom: -42px;
    width: 470px;
    height: 469px;
    background-image: url("images/background-accent-2.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
  }

  section.hero-block--short::after {
    left: -195px;
    bottom: -195px;
  }
}

section.hero-block .hero-inner {
  position: relative;
  z-index: 1;
}

section.hero-block .hero-image {
  position: relative;
  z-index: 1;
}

section.hero-block .hero-content > * {
  position: relative;
  z-index: 1;
}

/* Hero Content block — accent background on left column (when ACF toggle is on) */
.hero-content-block .hero-content-left {
  position: relative;
  overflow: hidden;
  color: var(--text-background-primary);
  background-image: none !important;
}

.hero-content-block .hero-content-content.prose ul > li::marker,
.hero-content-block .hero-content-content.prose ol > li::marker {
  color: var(--text-background-primary);
}

.hero-content-block .hero-content-left[style*="background-image"]::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -110px;
  width: 438px;
  height: 438px;
  background-image: url("images/background-accent-1.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.hero-content-block .hero-content-left > * {
  position: relative;
  z-index: 1;
}

/* Centre Management Contacts block — dark mode text (parent uses text-background-primary) */
.centre-management-contacts-block .text-background-primary,
.centre-management-contacts-block .text-background-primary a {
  color: var(--text-background-primary);
}

/* Event detail page — information sidebar and swapped CTA colours */
.single-event .bg-background-primary.rounded-lg {
  background-color: var(--background-primary-15);
}

.single-event .bg-background-primary.rounded-lg a.rounded-full {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.single-event .bg-background-primary.rounded-lg a.rounded-full:hover {
  background-color: var(--button-primary-bg-hover);
  color: var(--button-primary-text-hover);
}

.single-event .event-terms-toggle {
  background-color: var(--brand-dark);
  color: #FFFFFF;
}

.single-event .event-terms-toggle:hover {
  background-color: var(--brand-accent);
  color: #FFFFFF;
}

/* Event/news detail page — hero accent background on dark column */
.single-event article > .grid > .bg-brand-dark,
.single-post article > .grid > .bg-brand-dark {
  position: relative;
  overflow: hidden;
  background-image: none !important;
}

.single-event article > .grid > .bg-brand-dark[style*="background-image"]::after,
.single-post article > .grid > .bg-brand-dark[style*="background-image"]::after {
  content: "";
  position: absolute;
  right: -195px;
  bottom: -195px;
  width: 470px;
  height: 470px;
  background-image: url("images/background-accent-1.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.single-event article > .grid > .bg-brand-dark > *,
.single-post article > .grid > .bg-brand-dark > * {
  position: relative;
  z-index: 1;
}

/* Event/news detail page — hero fallback accent when no image */
.single-event article > .grid > .bg-background-primary,
.single-post article > .grid > .bg-background-primary {
  position: relative;
  overflow: hidden;
  background-image: none !important;
}

.single-event article > .grid > .bg-background-primary[style*="background-image"]::after,
.single-post article > .grid > .bg-background-primary[style*="background-image"]::after {
  content: "";
  position: absolute;
  top: -195px;
  right: -195px;
  width: 470px;
  height: 470px;
  background-image: url("images/background-accent-1.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}