/*
Theme Name: Mernda Central
Theme URI: https://gohatch.com.au
Description: Bricks child theme for the Mernda Central website. Holds the Tenant post type, ACF field groups and centre settings.
Author: Hatch
Author URI: https://gohatch.com.au
Template: bricks
Version: 1.0.0
Text Domain: mernda
*/


/* Brand fonts not bound through Bricks controls */
@font-face {
  font-family: 'Founders Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* Font ships with ascent = cap height and a deep descent, so caps sit high. Recentre. */
  ascent-override: 83%;
  descent-override: 20%;
  line-gap-override: 0%;
  src: url('https://studion38.sg-host.com/wp-content/uploads/2026/09/FoundersGrotesk-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Blair ITC Std';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://studion38.sg-host.com/wp-content/uploads/2026/09/BlairITCStd-Regular.woff2') format('woff2');
}


/* Temporary stand-in until the real Averta CY Light file is uploaded (see fonts/AvertaCY-Light.woff2) */
@font-face {
  font-family: 'Averta CY';
  font-style: normal;
  font-weight: 300;
  src: local('Helvetica Neue Light'), local('HelveticaNeue-Light'), local('Helvetica Neue'), local('Arial');
}

/* == Figma parity overrides == */
/* Bricks prints class CSS after this sheet as .name.brxe-*, so these use one extra class to win. */

/* CTA heading: four staggered lines, 80px Blair, 120px line step (Homepage 4 > CTA) */
.brxe-text.cta__heading.cta__heading {
  max-width: 100%;
  width: 100%;
  padding-bottom: 24px;
}
.cta__heading p {
  margin: 0;
  line-height: 1.5;
}
.cta__heading p:nth-child(2) { text-align: center; }
.cta__heading p:nth-child(4) { text-align: right; }

/* Directory tile: title left, category right on one baseline */
.brxe-div.tenant-tile__meta.tenant-tile__meta { width: 100%; align-items: baseline; }

@media (min-width: 768px) {
  /* Section rhythm to match Figma frame heights */
  .brxe-section.why-visit.why-visit { padding-bottom: 60px; }
  .brxe-section.find-us.find-us { padding-bottom: 60px; }
  .brxe-section.directory-preview.directory-preview { padding-bottom: 30px; }
  .brxe-div.directory-preview__head.directory-preview__head { margin-bottom: 56px; }
  .brxe-div.site-footer__bottom.site-footer__bottom { margin-top: 196px; }
}
@media (max-width: 767px) {
  .cta__heading p:nth-child(2),
  .cta__heading p:nth-child(4) { text-align: left; }
}
/* Form controls inherit the body font (browsers default them to system serif) */
input, select, textarea, button, .bricks-button { font-family: inherit; }

/* Live Google map inside the Find Us panel; muted to sit on the purple band like the Figma artwork */
.find-us__map-embed { width: 100%; height: 100%; }
.find-us__map-embed iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(0.85) contrast(0.95); }

/* Directory card for brand-only tenants: logo shown contained instead of a cropped photo */
.brxe-image.tenant-card__image.tenant-card__image--logo { object-fit: contain; padding: 48px; background: #fff; }
/* Mobile: directory footer stacks the slider arrows above a full-width button */
@media (max-width: 767px) {
  .brxe-div.directory-preview__footer.directory-preview__footer {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 64px 24px 24px;
    gap: 16px;
  }
  .brxe-div.directory-preview__footer .btn { width: 100%; justify-content: center; }
  .brxe-div.tenant-tile__meta.tenant-tile__meta { flex-wrap: wrap; height: auto; row-gap: 4px; }
  .tenant-tile__category.tenant-tile__category { white-space: normal; }
}
/* Brands grid: single hairlines everywhere. The grid draws top and left, each cell draws right and bottom,
   and columns share the width equally regardless of logo size. */
.brxe-div.brands__grid.brands__grid {
  border-right: none;
  border-bottom: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.brxe-div.brands__cell.brands__cell { min-width: 0; }
/* Uniform logo box: wide marks cap at 110px, tall marks at 56px, so visual weight is similar */
.brxe-div.brands__cell.brands__cell { padding: 24px; }
.brxe-image.brands__logo.brands__logo { width: auto; height: auto; max-width: 110px; max-height: 60px; filter: none; transition: filter 0.35s ease, transform 0.4s var(--mc-ease, ease); }
.brands__cell:hover .brxe-image.brands__logo.brands__logo { filter: grayscale(1); }
@media (max-width: 767px) {
  .brxe-div.brands__grid.brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brxe-image.brands__logo.brands__logo { max-width: 96px; max-height: 52px; }
  .brxe-div.brands__cell.brands__cell { padding: 20px; }
  /* Mobile: hero title scales with the viewport instead of clipping */
  .brxe-heading.hero__title.hero__title {
    font-size: clamp(34px, 13vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    word-break: keep-all;
  }
}
/* Directory footer spans the band at every viewport (the section centres its children) */
.brxe-div.directory-preview__footer.directory-preview__footer { width: 100%; }

/* == Mobile menu: full-screen brand panel == */
@media (max-width: 767px) {
  #brxe-lz0plr .bricks-mobile-menu-wrapper {
    width: 100%;
    max-width: none;
    background: var(--brand);
    padding: 104px 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    overflow-y: auto;
  }
  #brxe-lz0plr .bricks-mobile-menu { counter-reset: mc-nav; width: 100%; }
  #brxe-lz0plr .bricks-mobile-menu > li {
    border-top: 0.6px solid rgba(255, 255, 255, 0.28);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--mc-ease, ease), transform 0.5s var(--mc-ease, ease);
  }
  #brxe-lz0plr .bricks-mobile-menu > li:last-child { border-bottom: 0.6px solid rgba(255, 255, 255, 0.28); }
  #brxe-lz0plr.show-mobile-menu .bricks-mobile-menu > li { opacity: 1; transform: none; }
  #brxe-lz0plr.show-mobile-menu .bricks-mobile-menu > li:nth-child(1) { transition-delay: 0.12s; }
  #brxe-lz0plr.show-mobile-menu .bricks-mobile-menu > li:nth-child(2) { transition-delay: 0.2s; }
  #brxe-lz0plr.show-mobile-menu .bricks-mobile-menu > li:nth-child(3) { transition-delay: 0.28s; }
  #brxe-lz0plr.show-mobile-menu .bricks-mobile-menu > li:nth-child(4) { transition-delay: 0.36s; }
  #brxe-lz0plr.show-mobile-menu .bricks-mobile-menu > li:nth-child(5) { transition-delay: 0.44s; }
  #brxe-lz0plr .bricks-mobile-menu > li > a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 20px 0;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--surface);
  }
  #brxe-lz0plr .bricks-mobile-menu > li > a::before {
    counter-increment: mc-nav;
    content: counter(mc-nav, decimal-leading-zero);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    opacity: 0.7;
    min-width: 22px;
  }
  #brxe-lz0plr .bricks-mobile-menu > li > a::after {
    content: "\2192";
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 24px;
    opacity: 0.8;
    transform: translateX(-6px);
    transition: transform 0.3s var(--mc-ease, ease), opacity 0.3s ease;
  }
  #brxe-lz0plr .bricks-mobile-menu > li > a:hover::after,
  #brxe-lz0plr .bricks-mobile-menu > li.current-menu-item > a::after { transform: none; opacity: 1; }
  #brxe-lz0plr .bricks-mobile-menu > li.current-menu-item > a::before { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
  /* Close control sits on top, in white */
  #brxe-lz0plr.show-mobile-menu .bricks-mobile-menu-toggle { z-index: 1002; }
  #brxe-lz0plr.show-mobile-menu .bricks-mobile-menu-toggle span { background-color: var(--surface); }
  /* Contact block injected by motion.js */
  .mc-menu-footer { color: var(--surface); display: grid; gap: 20px; opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--mc-ease, ease) 0.5s, transform 0.5s var(--mc-ease, ease) 0.5s; }
  #brxe-lz0plr.show-mobile-menu .mc-menu-footer { opacity: 1; transform: none; }
  .mc-menu-footer__meta { display: grid; gap: 6px; font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.4; }
  .mc-menu-footer__label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
  .mc-menu-footer__meta a { color: inherit; text-decoration: none; }
  .mc-menu-footer .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 24px;
    background: var(--brand);
    color: var(--surface);
    font-family: var(--font-accent);
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
  }
}

/* mc-card-placeholder: tenants without a photo or logo yet get a quiet branded panel in the image slot */
.brxe-div.tenant-card__head { order: 0; }
.tenant-card__body { order: 2; }
.tenant-card:not(:has(.tenant-card__image))::before {
  content: "";
  order: 1;
  display: block;
  height: 300px;
  background: #f3eef5 url('https://studion38.sg-host.com/wp-content/uploads/2026/09/21ba5520-2125-403c-80ef-d1df11c86a02.svg') center / 64px no-repeat;
  opacity: 0.9;
}
@media (max-width: 767px) { .tenant-card:not(:has(.tenant-card__image))::before { height: 220px; } }

/* Homepage slider and grid: every tenant, with fallbacks for missing artwork */
.brxe-image.tenant-tile__image.tenant-tile__image--logo {
  object-fit: contain;
  padding: 30% 14%;
  background: #f3eef5;
}
.tenant-tile:not(:has(.tenant-tile__image))::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 373 / 480;
  background: #f3eef5 url('https://studion38.sg-host.com/wp-content/uploads/2026/09/21ba5520-2125-403c-80ef-d1df11c86a02.svg') center / 72px no-repeat;
}
.brands__name {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  transition: color 0.3s ease;
}
.brands__cell:hover .brands__name { color: var(--brand); }
@media (max-width: 767px) { .brands__name { font-size: 13px; } }
/* Tile meta grows with long names instead of spilling into the controls row */
.brxe-div.tenant-tile__meta.tenant-tile__meta { height: auto; min-height: 45px; align-items: baseline; }
.tenant-tile__title.tenant-tile__title { min-width: 0; line-height: 1.2; }
.tenant-tile__category.tenant-tile__category { flex-shrink: 0; }

/* == Uniform card and tile heights; logos always scale inside their box == */
/* Directory cards: fixed head, image and body heights so every card matches */
.brxe-div.directory__grid.directory__grid { align-items: stretch; }
.tenant-card .brxe-div.tenant-card__head.tenant-card__head { height: 118px; overflow: hidden; }
.tenant-card .tenant-card__heading.tenant-card__heading { justify-content: center; min-width: 0; }
.tenant-card .tenant-card__title.tenant-card__title {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25;
}
.tenant-card .tenant-card__category.tenant-card__category { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenant-card .tenant-card__logo-box.tenant-card__logo-box { height: 100%; min-width: 0; }
.tenant-card .brxe-image.tenant-card__logo.tenant-card__logo {
  display: block; width: 100%; height: 64px; max-width: 100%; max-height: 100%; object-fit: contain;
}
.tenant-card .tenant-card__body.tenant-card__body { height: 92px; overflow: hidden; }
.tenant-card .tenant-card__excerpt.tenant-card__excerpt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Homepage tiles: meta always reserves two lines so tiles never jump in height */
.home-directory-tile .brxe-div.tenant-tile__meta.tenant-tile__meta { height: 80px; min-height: 0; align-items: flex-start; }
.home-directory-tile .tenant-tile__title.tenant-tile__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home-directory-tile .tenant-tile__category.tenant-tile__category { padding-top: 8px; }
/* Brand grid: logos never exceed the cell's content box */
.brands__cell .brxe-image.brands__logo.brands__logo { flex-shrink: 1; min-width: 0; object-fit: contain; }
.brxe-div.brands__cell.brands__cell { overflow: hidden; min-width: 0; }

@media (max-width: 767px) {
  .tenant-card .brxe-div.tenant-card__head.tenant-card__head { height: 112px; }
  .tenant-card .tenant-card__heading.tenant-card__heading { padding: 16px; gap: 4px; }
  .tenant-card .tenant-card__title.tenant-card__title { -webkit-line-clamp: 2; font-size: 22px; line-height: 1.2; }
  .tenant-card .tenant-card__category.tenant-card__category { font-size: 15px; }
  .tenant-card .tenant-card__logo-box.tenant-card__logo-box { width: 112px; padding: 14px; }
  .tenant-card .brxe-image.tenant-card__logo.tenant-card__logo { height: 48px; }
  .tenant-card .tenant-card__body.tenant-card__body { height: 108px; padding: 18px 16px; }
  .tenant-card .tenant-card__excerpt.tenant-card__excerpt { -webkit-line-clamp: 3; }
  .home-directory-tile .brxe-div.tenant-tile__meta.tenant-tile__meta { height: 64px; }
  .home-directory-tile .tenant-tile__category.tenant-tile__category { padding-top: 4px; }
}
/* Tile media shares one aspect ratio, so photo, logo and placeholder tiles match */
.home-directory-tile .brxe-image.tenant-tile__image.tenant-tile__image { width: 100%; height: auto; aspect-ratio: 373 / 480; }
.home-directory-tile .brxe-image.tenant-tile__image--photo { object-fit: cover; }

/* Coming soon label for tenants that have not opened yet */
.mc-soon {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
}
.tenant-card .mc-soon--card { margin-top: 6px; }
.home-directory-tile .brxe-div.tenant-tile__meta.tenant-tile__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  row-gap: 6px;
}
.home-directory-tile .tenant-tile__title { grid-row: 1 / span 2; }
.home-directory-tile .tenant-tile__category { grid-column: 2; grid-row: 1; text-align: right; }
.home-directory-tile .mc-soon--tile { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
.tenant-meta--soon .tenant-meta__value { color: #c9a8d6; }
/* Card head fits title, category and status without squashing any line */
.tenant-card .brxe-div.tenant-card__head.tenant-card__head { height: 148px; }
.tenant-card .tenant-card__heading.tenant-card__heading > * { flex-shrink: 0; }
.tenant-card .tenant-card__category.tenant-card__category { line-height: 1.3; }
@media (max-width: 767px) {
  .tenant-card .brxe-div.tenant-card__head.tenant-card__head { height: 140px; }
}
/* Slider arrows sit at the edges on phones */
@media (max-width: 767px) {
  #home-directory-slider .splide__arrows .splide__arrow.splide__arrow--prev { left: 0; right: auto; }
  #home-directory-slider .splide__arrows .splide__arrow.splide__arrow--next { left: auto; right: 0; border-left: 0.5px solid rgba(0, 0, 0, 0.24); }
}

/* Current gallery thumbnail */
.tenant-info__thumb { cursor: pointer; transition: opacity 0.2s ease; }
.tenant-info__thumbs .tenant-info__thumb:not(.is-current) { opacity: 0.6; }
.tenant-info__thumbs .tenant-info__thumb:hover { opacity: 1; }

/* Footer legal links never break mid-link; on phones the credit wraps to its own line */
.site-footer__legal-link { white-space: nowrap; }
@media (max-width: 767px) {
  .brxe-div.site-footer__legal { flex-wrap: wrap; row-gap: 12px; }
}

/* Illustrated location map above the Google Map */
.brxe-div.find-us__map.find-us__map { display: flex; flex-direction: column; gap: 16px; height: auto; }
.brxe-image.find-us__location-map { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.find-us__map #find-us-map-embed.find-us__map-embed { width: 100%; height: 420px; min-height: 0; flex: none; }
@media (max-width: 767px) {
  .find-us__map #find-us-map-embed.find-us__map-embed { height: 320px; }
}
/* Desktop: maps side by side at equal height */
@media (min-width: 992px) {
  .brxe-div.find-us__map.find-us__map { flex-direction: row; align-items: stretch; }
  .find-us__map .brxe-image.find-us__location-map { flex: 1 1 0; min-width: 0; width: auto; }
  .find-us__map #find-us-map-embed.find-us__map-embed { flex: 1 1 0; min-width: 0; width: auto; height: auto; }
}
/* Tenant opening hours table in Store information */
.brxe-div.tenant-contact--hours { align-items: flex-start; height: auto; padding-top: 12px; padding-bottom: 12px; }
#tenant-contact-hours.tenant-contact--hours { align-items: flex-start; }
#tenant-contact-hours .brxe-image.tenant-contact__icon { align-self: flex-start; margin-top: 0; }
.brxe-div.tenant-hours { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.brxe-div.tenant-hours__row { display: flex; justify-content: space-between; gap: 16px; }
.tenant-hours__row .tenant-hours__day { text-align: left; }
.tenant-hours__row .tenant-hours__time { text-align: right; white-space: nowrap; }