/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ===== City Park web fonts (self-hosted, latin subset, 2026-08-26) =====
   Variable woff2 from Google Fonts, served from this theme so no request
   leaves the site. Fraunces here carries opsz+wght only — Google's CDN does
   not expose the SOFT/WONK axes used in the Paper concept. */
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-variable-latin.woff2') format('woff2-variations');
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-variable-latin.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* Site-wide typographic baseline for the City Park brand */
body{
  font-family:var(--cp-font-sans);
  font-size:var(--cp-body);
  line-height:var(--cp-lh-body);
  color:var(--base);
  background-color:var(--neutral);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--cp-font-display);
  font-weight:600;
  letter-spacing:var(--cp-track-tight);
  color:var(--base);
}


/* ===== City Park component overrides =====
   This stylesheet is enqueued with a dependency on bricks-frontend, so it
   loads last and settles cascade fights with Bricks/ACSS defaults that the
   global-class CSS cannot win on specificity alone. Keep this block small —
   anything that CAN live on a global class should. */

/* Button: assembled here at 0-2-0 because Bricks text-basic anchors pick up
   padding/appearance elsewhere. This rule only CONSUMES ACSS's --btn-* custom
   properties: geometry comes from the .btn global class, colour from the ACSS
   variant class (btn--secondary / btn--primary-dark / btn--outline) or btn-ghost.
   Nothing here hard-codes a colour or a size - that is the point. */
.brxe-text-basic.btn,
a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:var(--btn-justify-content,center);
  gap:.6em;
  font-family:var(--cp-font-sans);
  font-size:var(--btn-font-size);
  font-weight:var(--btn-font-weight);
  line-height:var(--btn-line-height);
  letter-spacing:var(--btn-letter-spacing);
  text-decoration:none;
  cursor:pointer;
  background:var(--btn-background,transparent);
  color:var(--btn-text-color,inherit);
  border-color:var(--btn-border-color,transparent);
  border-width:var(--btn-border-width);
  border-style:var(--btn-border-style);
  border-radius:var(--btn-radius);
  padding-block:var(--btn-padding-block);
  padding-inline:var(--btn-padding-inline);
  min-inline-size:var(--btn-min-width);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.brxe-text-basic.btn:hover,
a.btn:hover,
.brxe-text-basic.btn:focus-visible,
a.btn:focus-visible{
  background:var(--btn-background-hover,var(--btn-background,transparent));
  color:var(--btn-text-color-hover,var(--btn-text-color,inherit));
  border-color:var(--btn-border-color-hover,var(--btn-border-color,transparent));
}
.brxe-text-basic.btn:focus-visible,
a.btn:focus-visible{
  outline:2px solid var(--focus-color,var(--secondary));
  outline-offset:3px;
}

/* Brand lockup type: Bricks quotes _typography font-family values, which
   turns var(--cp-font-display) into a literal unusable family name. */
.site-header__name{ font-family:var(--cp-font-display); }
.site-header__tagline,
.site-header__phone,
.site-footer__label,
.site-footer__blurb{ font-family:var(--cp-font-sans); }

/* ===== Gravity Forms overrides =====
   GF 2.7+ ships a theme framework whose selectors beat plain global-class
   CSS — labels were rendering as Montserrat 16px. These live here because
   the child stylesheet loads after GF's, and are scoped to .gf-theme so
   nothing else on the site is affected. */
.form-card .gf-theme .gform_wrapper .gfield_label,
.gf-theme .gform_wrapper .gfield_label{
  font-family:var(--cp-font-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:var(--cp-track-label);
  text-transform:uppercase;
  color:var(--base-semi-dark);
  margin-bottom:var(--cp-space-2xs);
  display:block;
}
.gf-theme .gform_wrapper .gfield_required{
  font-family:var(--cp-font-sans);
  font-style:normal;
  font-size:11px;
  letter-spacing:var(--cp-track-label);
  color:var(--secondary-dark);
  margin-left:.4em;
}
.gf-theme .gform_wrapper input[type=text],
.gf-theme .gform_wrapper input[type=email],
.gf-theme .gform_wrapper input[type=tel],
.gf-theme .gform_wrapper textarea{
  font-family:var(--cp-font-sans);
  font-size:var(--cp-body);
  color:var(--base);
  background:var(--neutral);
  border:1px solid var(--neutral-dark-trans-20);
  border-radius:var(--cp-radius-sm);
  padding:var(--space-xs) var(--space-xs);
  line-height:1.4;
}
.gf-theme .gform_wrapper textarea{ min-height:130px; }
.gf-theme .gform_wrapper .gform_button{
  font-family:var(--cp-font-sans);
  font-size:16px;
  font-weight:600;
  background:var(--primary-dark);
  color:var(--neutral);
  border:0;
  border-radius:var(--cp-radius-pill);
  padding:var(--space-s) var(--space-m);
}
.gf-theme .gform_wrapper .gform_button:hover{ background:var(--primary); }

/* GF styles the inner .gfield_required_text span italic. We only self-host
   upright Archivo, so italic fell back to a serif. Force it upright. */
.gf-theme .gform_wrapper.gravity-theme .gfield_required .gfield_required_text,
.gf-theme .gform_wrapper .gfield_required .gfield_required_text{
  font-family:var(--cp-font-sans);
  font-style:normal;
  font-weight:600;
  font-size:11px;
  letter-spacing:var(--cp-track-label);
  color:var(--secondary-dark);
}


/* Width utility. Single-dash on purpose so it does not match ACSS's
   [class*="btn--"] selector and pull in button styling by accident. */
.brxe-text-basic.btn-full,
a.btn-full{ width:100%; }


/* ---------------------------------------------------------------------------
   Micro spacing steps
   ACSS's space scale stops at --space-xs (13.5px). The approved design uses
   several smaller values (4-11px) for icon and label gaps, so these extend the
   scale downward at ACSS's OWN 1.5 ratio. Being calc() off --space-xs they
   still rescale from base-space in the ACSS dashboard - they are not a
   parallel spacing system. The cp- prefix marks them as project tokens, NOT
   native ACSS. See standards/design/acss.md.
   --------------------------------------------------------------------------- */
:root{
  --cp-space-2xs: calc(var(--space-xs) / 1.5);  /* ~9px */
  --cp-space-3xs: calc(var(--space-xs) / 2.25); /* ~6px */
}

/* ---------------------------------------------------------------------------
   cp-inline-link - an inline link inside prose.
   Bricks text elements take a global class on the ELEMENT, not on an <a> inside
   the copy, so inline links in body text had no treatment at all - they were
   distinguished by colour and weight alone, which fails WCAG 1.4.1. This gives
   them the same underline-and-shift as .room-card__pricelink.
   --------------------------------------------------------------------------- */
.cp-inline-link{
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color .18s ease;
}
.cp-inline-link:hover,
.cp-inline-link:focus-visible{ color: var(--secondary-dark); }
.cp-inline-link:focus-visible{ outline: 2px solid var(--secondary-semi-light); outline-offset: 2px; border-radius: 2px; }

/* ---------------------------------------------------------------------------
   Hero availability bar.
   The markup is rendered by inc/booking-form.php, NOT by Bricks, so these
   styles must live here. Bricks only emits a global class's CSS when a Bricks
   ELEMENT on the page carries that class - with the bar now a real <form>,
   there are no such elements and the six booking-bar* global classes stopped
   producing any output. They were retired on 2026-10-15; this is the only
   definition of the bar.
   --------------------------------------------------------------------------- */
.booking-bar{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:var(--cp-space-2xs);
  width:100%;
  max-width:var(--content-width);
  margin:0 auto;
  padding:0 var(--space-xs) 0 var(--space-m);
  min-height:88px;
  background:var(--neutral);
  border-radius:var(--cp-radius-md);
}
@media(max-width:991px){
  .booking-bar{ flex-wrap:wrap; padding:var(--space-s); gap:var(--space-xs); min-height:0; }
}

.booking-bar__field{
  display:flex;
  flex-direction:column;
  gap:var(--cp-space-3xs);
  flex:1 1 0;
  min-width:0;
  width:auto;
}
@media(max-width:991px){ .booking-bar__field{ flex:1 1 44%; } }

.booking-bar__label{
  font-family:var(--cp-font-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:var(--cp-track-label);
  text-transform:uppercase;
  color:var(--base-semi-dark);
  line-height:14px;
}

/* The real controls take the type the static values used to carry. */
.booking-bar__input,
.booking-bar__select{
  font-family:var(--cp-font-sans);
  font-size:17px;
  font-weight:500;
  color:var(--base);
  line-height:22px;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background-color:transparent;
  appearance:none;
  -webkit-appearance:none;
}
.booking-bar__input:focus-visible,
.booking-bar__select:focus-visible{
  outline:2px solid var(--secondary-semi-light);
  outline-offset:3px;
  border-radius:2px;
}
/* WebKit gives date inputs an intrinsic width and centres the value. */
.booking-bar__input::-webkit-date-and-time-value{ text-align:left; }
.booking-bar__input::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.55; }
.booking-bar__input::-webkit-calendar-picker-indicator:hover{ opacity:1; }

.booking-bar__select{
  cursor:pointer;
  padding-right:1.4em;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 10px) 60%, calc(100% - 6px) 60%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

.booking-bar__rule{
  width:1px;
  height:44px;
  flex:0 0 auto;
  background:var(--neutral-dark-trans-20);
}
@media(max-width:991px){ .booking-bar__rule{ display:none; } }

.booking-bar__cta{
  flex:0 0 auto;
  width:auto;
  min-width:246px;
  min-height:60px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:var(--cp-radius-sm);
  cursor:pointer;
  background:var(--primary-dark);
  color:var(--neutral);
  font-family:var(--cp-font-sans);
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  appearance:none;
  transition:background-color .18s ease;
}
.booking-bar__cta:hover,
.booking-bar__cta:focus-visible{ background:var(--primary); color:var(--neutral); }
.booking-bar__cta:focus-visible{ outline:2px solid var(--secondary-semi-light); outline-offset:3px; }
@media(max-width:991px){ .booking-bar__cta{ flex:1 1 100%; width:100%; } }

.cp-visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}