/* ============================================================================
   TAMM Sections - layout helpers that the theme stylesheet does not own.
   Kept separate so the generated tamm-sections.css stays a clean copy.

   Why these exist: when a shortcode is dropped into a theme whose content
   column is narrower than the viewport, viewport media queries cannot see it.
   Container queries let the grids collapse to match the space they actually
   have, so the cards can never burst out of the page.
   ============================================================================ */

.tamm-hz { position: relative; }
.tamm-hz--header { position: relative; z-index: 60; }
.tamm-hz--search { padding-block: 26px; }
.tamm-hz-favourites { padding-block: 50px 80px; min-height: 50vh; }

/* Marks a grid wrapper that queries its own width instead of the viewport. */
.tamm-hz-cq { container-type: inline-size; }

/* Opt-in full-bleed. Use when your theme wraps content in a narrow column.
   Add breakout="yes" to [tamm_header] or [tamm_home]. */
.tamm-hz--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Shown when a section has no property data to render. */
.tamm-hz-missing {
  max-width: 1440px;
  margin: 22px auto;
  padding: 15px 18px;
  background: #fff8e5;
  border-inline-start: 4px solid #d9a300;
  color: #4a3a00;
  font: 14px/1.6 Arial, Helvetica, sans-serif;
}
.tamm-hz-missing p { margin: 0; }

/* When [tamm_home] is used the header floats over the hero, so the wrapper must
   not clip it. */
.tamm-hz--home { overflow: visible; }
.tamm-hz--home > .tamm-hdr--over { z-index: 61; }

/* --- grids respond to the space they actually have --- */
@container (max-width: 1220px) {
  .tamm-hz-cq .featured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 1040px) {
  .tamm-hz-cq .featured-grid,
  .tamm-hz-cq .archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tamm-hz-cq .community-grid { grid-template-columns: 1fr 1fr; }
  .tamm-hz-cq .community-tile:first-child { grid-column: span 2; }
}
@container (max-width: 780px) {
  .tamm-hz-cq .featured-grid,
  .tamm-hz-cq .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tamm-hz-cq .advisory-section { grid-template-columns: 1fr; gap: 30px; }
}
@container (max-width: 560px) {
  .tamm-hz-cq .featured-grid,
  .tamm-hz-cq .archive-grid,
  .tamm-hz-cq .community-grid { grid-template-columns: 1fr; }
  .tamm-hz-cq .community-tile:first-child { grid-column: auto; }
  .tamm-hz-cq .dialog-actions { flex-wrap: wrap; }
}

/* The hero must not keep a desktop headline size in a narrow column. */
.tamm-hz--hero .hero h1,
.tamm-hz--home .hero h1 { font-size: clamp(34px, 5.2vw, 74px); }
.tamm-hz--hero .hero-content,
.tamm-hz--home .hero-content { padding-top: clamp(120px, 18vh, 210px); }

/* ============ header layout variants ============
   center  : menu on the left, logo in the middle, icons on the right (default)
   left    : logo first, menu beside it, icons on the right
   stacked : logo centred on the top row, menu centred underneath
   Pick one with layout="left" or layout="stacked" on [tamm_header]. */

/* --- logo image instead of the text wordmark --- */
#tamm-header .tamm-brand__img {
  display: block;
  width: auto;
  max-width: 210px;
  height: 54px;
  object-fit: contain;
}
#tamm-header.tamm-hdr--left .tamm-brand { padding: 0; }

/* --- layout: left --- */
#tamm-header.tamm-hdr--left .tamm-hdr__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 26px;
}
#tamm-header.tamm-hdr--left .tamm-side--left { display: contents; }
#tamm-header.tamm-hdr--left .tamm-brand { order: -1; }
#tamm-header.tamm-hdr--left .tamm-brand__sub::before,
#tamm-header.tamm-hdr--left .tamm-brand__sub::after { display: none; }
#tamm-header.tamm-hdr--left .tamm-menu { justify-content: flex-start; }

/* --- layout: stacked --- */
#tamm-header.tamm-hdr--stacked .tamm-hdr__inner {
  display: grid;
  /* minmax(0,1fr) keeps both side tracks equal, so the logo is exactly centred
     even when the column it sits in is narrower than the icon group. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "lead brand actions"
    "nav  nav   nav";
  align-items: center;
  row-gap: 4px;
  padding-block: 18px 12px;
}
#tamm-header.tamm-hdr--stacked .tamm-side--left { display: contents; }
#tamm-header.tamm-hdr--stacked .tamm-burger { grid-area: lead; justify-self: start; }
#tamm-header.tamm-hdr--stacked .tamm-nav--primary { grid-area: nav; justify-self: center; }
#tamm-header.tamm-hdr--stacked .tamm-brand { grid-area: brand; justify-self: center; }
#tamm-header.tamm-hdr--stacked .tamm-side--right { grid-area: actions; justify-self: end; }
#tamm-header.tamm-hdr--stacked .tamm-brand__name { font-size: 34px; }
#tamm-header.tamm-hdr--stacked .tamm-menu { justify-content: center; }
/* icons only on the top row in the stacked layout, as in the reference */
#tamm-header.tamm-hdr--stacked .tamm-langlabel { display: none; }

/* --- flag beside the language label --- */
#tamm-header .tamm-langflag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  flex: 0 0 18px;
}
#tamm-header .tamm-langflag svg { width: 100%; height: 100%; display: block; }
#tamm-header .tamm-langflag img { width: 100%; height: 100%; object-fit: cover; display: block; }
#tamm-header .tamm-langs .tamm-langflag { width: 17px; height: 17px; flex-basis: 17px; }

/* On small screens every layout falls back to the single bar with the drawer. */
@media (max-width: 1200px) {
  #tamm-header.tamm-hdr--left .tamm-hdr__inner,
  #tamm-header.tamm-hdr--stacked .tamm-hdr__inner {
    display: flex;
    flex-wrap: wrap;
    padding: 11px 18px;
    row-gap: 0;
  }
  #tamm-header.tamm-hdr--left .tamm-side--left,
  #tamm-header.tamm-hdr--stacked .tamm-side--left { display: flex; }
  #tamm-header.tamm-hdr--left .tamm-brand,
  #tamm-header.tamm-hdr--stacked .tamm-brand { order: 0; justify-self: auto; }
  #tamm-header.tamm-hdr--stacked .tamm-brand__name { font-size: 22px; }
}

/* The navigation wraps instead of bursting out of a narrow column. */
#tamm-header .tamm-menu { flex-wrap: wrap; }
#tamm-header .tamm-hdr__inner { flex-wrap: wrap; row-gap: 4px; }

/* The filter bar queries its own width. The theme already handles a narrow
   VIEWPORT well, so these rules only fire when the page is wide but the column
   the shortcode sits in is not - the exact case a builder creates. */
.tamm-hz .property-search { container-type: inline-size; }

@media (min-width: 1201px) {
  @container (max-width: 1040px) {
    .tamm-hz .search-bar { flex-wrap: wrap; row-gap: 8px; padding: 10px; }
    .tamm-hz .search-bar .filter-dropdown { flex: 1 1 60px; min-width: 0; }
    .tamm-hz .keyword-search { flex: 1 1 100%; margin: 0; min-height: 44px; }
    .tamm-hz .search-submit,
    .tamm-hz .more-filters { flex: 1 1 auto; min-width: 0; }
  }
  @container (max-width: 620px) {
    .tamm-hz .search-bar .filter-dropdown { flex: 0 0 50%; }
  }
}


/* Final layout corrections: keep exactly five featured cards in the desktop
   row when the section has the same usable width as the home-page reference. */
@container (min-width: 1041px) {
  .tamm-hz-cq .featured-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Remove the theme/page-builder top inset that was leaving a white strip above
   the home hero/header, while retaining full-bleed desktop width. */
.tamm-hz--home {
  margin-top: -12px !important;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Keep the global non-home header flush to the viewport edges too. */
.tamm-hz--header {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Use the supplied TAMM white logo at a larger, consistent size. */
#tamm-header .tamm-brand__img {
  width: auto !important;
  max-width: 255px !important;
  height: 76px !important;
  object-fit: contain;
}
@media (min-width: 1201px) and (max-width: 1460px) {
  #tamm-header .tamm-brand__img {
    max-width: 235px !important;
    height: 70px !important;
  }
}
@media (max-width: 1200px) {
  #tamm-header .tamm-brand__img {
    max-width: 205px !important;
    height: 60px !important;
  }
}

/* Match the reference Featured Opportunities layout: a centered, compact
   five-card row with the full card width used by the design reference. */
.tamm-hz #tamm-featured.featured-section {
  width: min(1440px, calc(100% - 80px)) !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.tamm-hz #tamm-featured .featured-grid {
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 20px;
}

.tamm-hz #tamm-featured .property-card {
  min-width: 0;
}

.tamm-hz #tamm-featured .card-visual,
.tamm-hz #tamm-featured .card-visual > a,
.tamm-hz #tamm-featured .card-visual img {
  width: 100%;
}

.tamm-hz #tamm-featured .card-visual img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1100px) {
  .tamm-hz #tamm-featured.featured-section {
    width: calc(100% - 40px) !important;
  }
  .tamm-hz #tamm-featured .featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .tamm-hz #tamm-featured.featured-section {
    width: calc(100% - 30px) !important;
  }
  .tamm-hz #tamm-featured .featured-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============ client colour: the theme navy, inside the filter and dialog ============
   The client approved #172A5B for the filter controls and the More Filters dialog.
   Nothing outside the filter changes. */
.tamm-hz { --tamm-blue: #172A5B; --tamm-blue-dark: #0f1d3f; }

.property-search .search-submit,
.property-search .apply-filters { background: var(--tamm-blue); border-color: var(--tamm-blue); }
.property-search .search-submit:hover,
.property-search .apply-filters:hover { background: var(--tamm-blue-dark); border-color: var(--tamm-blue-dark); }
.property-search .reset-filters { border-color: var(--tamm-blue); color: var(--tamm-blue); }
.property-search .reset-filters:hover { background: #eef2ff; }
.property-search .filter-done { color: var(--tamm-blue); }
.property-search .option-search .icon,
.property-search .keyword-search .icon { color: var(--tamm-blue); }
.property-search .filter-choice:has(input:checked),
.property-search .filter-panel .filter-choice:has(input:checked),
.property-search .delivery-list .filter-choice:has(input:checked) {
  background: var(--tamm-blue); border-color: var(--tamm-blue); color: #fff;
}
.property-search .filter-chip input:checked + span { background: var(--tamm-blue); border-color: var(--tamm-blue); color: #fff; }
.property-search .range-presets button.active,
.property-search .range-presets button:hover { background: var(--tamm-blue); border-color: var(--tamm-blue); color: #fff; }
.property-search #advanced-filters .dialog-top h2 .icon { color: var(--tamm-blue); }
.property-search .advanced-group h3 { color: var(--ink); }

/* ============ "More" expander on every long option list ============
   Sits at the foot of its own list, as a short "More" link with a chevron, then
   reads "Less" when the extra options are showing. */
.property-search .advanced-group { display: block; }
.property-search .advanced-group .filter-more {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin: 8px 0 0; padding: 2px 0; border: 0; background: none; box-shadow: none;
  cursor: pointer; font: 600 12px/1 var(--sans); color: var(--tamm-blue); letter-spacing: .02em;
}
.property-search .advanced-group .filter-more:hover { text-decoration: underline; }
.property-search .advanced-group .filter-more .icon { width: 14px; height: 14px; color: var(--tamm-blue); transition: transform .18s; }
.property-search .advanced-group .filter-more.is-open .icon { transform: rotate(-90deg); }
.property-search .advanced-group .filter-more[hidden] { display: none; }

/* ============ text colours a host theme must not override ============ */
.tamm-hz .hero h1,
.tamm-hz .hero h1 a,
.tamm-hz .hero-description,
.tamm-hz .hero-caption,
.tamm-hz .hero-whatsapp { color: #fff; }
.tamm-hz .hero .eyebrow { color: #dcd5c8; }
.tamm-hz .community-tile,
.tamm-hz .community-tile h3,
.tamm-hz .community-tile span { color: #fff; }
.tamm-hz .art-label { color: #fff; }
.tamm-hz .browse-cta { color: var(--ink); }
.tamm-hz .advisor-cta { color: #fff; }

/* ============================================================================
   TAMM 1.2.0 — Blueprint four-up property rows
   The featured row is forced to five columns for the archive-style use; the
   home page asks for the Blueprint's four cards, so these rules are the later,
   more specific layer and win wherever .tamm-cols-4 is present.
   ============================================================================ */
.tamm-hz #tamm-featured .featured-grid.tamm-cols-4,
.tamm-hz .tamm-hz-cq .featured-grid.tamm-cols-4 {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px;
}
.tamm-hz #tamm-featured .featured-grid.tamm-cols-4 .property-card:nth-child(n+4),
.tamm-hz .tamm-hz-cq .featured-grid.tamm-cols-4 .property-card:nth-child(n+4) { display: block !important; }
.tamm-hz #tamm-featured .featured-grid.tamm-cols-4 .card-content h3 { font-size: 22px; }
.tamm-hz #tamm-featured .featured-grid.tamm-cols-4 .card-content { padding: 20px; }

@container (max-width: 1040px) {
  .tamm-hz #tamm-featured .featured-grid.tamm-cols-4,
  .tamm-hz .tamm-hz-cq .featured-grid.tamm-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@container (max-width: 780px) {
  .tamm-hz #tamm-featured .featured-grid.tamm-cols-4,
  .tamm-hz .tamm-hz-cq .featured-grid.tamm-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@container (max-width: 560px) {
  .tamm-hz #tamm-featured .featured-grid.tamm-cols-4,
  .tamm-hz .tamm-hz-cq .featured-grid.tamm-cols-4 { grid-template-columns: 1fr !important; }
}