/* ==========================================================================
   Harcourts Dapto | Albion Park | Shellharbour
   Brand Stylesheet — single source of truth
   --------------------------------------------------------------------------
   Every Atlas-generated page links this file.
   Never override these tokens inline. If a new pattern is needed, add it
   here as a class first, then use the class on the page.

   Brand reference: Harcourts International Brand Standards
   Primary: Harcourts Blue #001f49 | Accent: Harcourts Cyan #00adef
   Typography: Source Sans Pro
   ========================================================================== */

/* ---------- Fonts (self-host in /assets/fonts) ----------------------------- */
/* Primary: Source Sans 3 (formerly Source Sans Pro) */
/* Secondary: Harcourts Script — licensed font, self-hosted from assets/fonts/ */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200;300;400;600;700&display=swap');

@font-face {
  font-family: 'HarcourtsScript';
  src: url('./assets/fonts/HarcourtsScript.woff') format('woff'),
       url('./assets/fonts/HarcourtsScript.ttf')  format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens -------------------------------------------------- */
:root {
  /* Brand colours — primary */
  --h-blue:        #001f49;   /* Harcourts Blue — dominant */
  --h-blue-90:     #0a2a55;
  --h-blue-80:     #1a3a65;
  --h-blue-20:     #cdd4de;
  --h-blue-10:     #e6e9ee;

  /* Brand colours — accent (use sparingly, never majority) */
  --h-cyan:        #00adef;   /* Harcourts Cyan — accents only */
  --h-cyan-90:     #0098d1;

  /* Neutrals */
  --h-black:       #000000;
  --h-charcoal:    #1a1a1a;
  --h-ink:         #2a2a2a;   /* body text */
  --h-grey-70:     #4a4a4a;
  --h-grey-50:     #8a8a8a;
  --h-grey-30:     #c4c4c4;
  --h-grey-10:     #ececec;
  --h-paper:       #f7f7f5;   /* off-white page bg */
  --h-white:       #ffffff;

  /* Status (used sparingly, never compete with brand) */
  --h-success:     #008752;
  --h-warning:     #fbb040;
  --h-error:       #d11242;

  /* Typography */
  --h-font-sans:    'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --h-font-display: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  --h-font-script:  'HarcourtsScript', cursive;  /* Secondary — personality/single words only */

  --h-fs-xs:       0.75rem;   /* 12 */
  --h-fs-sm:       0.875rem;  /* 14 */
  --h-fs-base:     1rem;      /* 16 */
  --h-fs-lg:       1.125rem;  /* 18 */
  --h-fs-xl:       1.375rem;  /* 22 */
  --h-fs-2xl:      1.75rem;   /* 28 */
  --h-fs-3xl:      2.25rem;   /* 36 */
  --h-fs-4xl:      3rem;      /* 48 */
  --h-fs-5xl:      4rem;      /* 64 */

  --h-fw-light:    300;
  --h-fw-regular:  400;
  --h-fw-semibold: 600;
  --h-fw-bold:     700;

  --h-lh-tight:    1.15;
  --h-lh-snug:     1.35;
  --h-lh-base:     1.6;

  --h-tracking-tight: -0.025em;  /* -25 per brand spec, used for headings */
  --h-tracking-body:  -0.01em;   /* -10 per brand spec, used for body */
  --h-tracking-wide:  0.08em;

  /* Spacing scale (4px base) */
  --h-s-1:  0.25rem;
  --h-s-2:  0.5rem;
  --h-s-3:  0.75rem;
  --h-s-4:  1rem;
  --h-s-5:  1.5rem;
  --h-s-6:  2rem;
  --h-s-8:  3rem;
  --h-s-10: 4rem;
  --h-s-12: 6rem;
  --h-s-16: 8rem;

  /* Layout */
  --h-container:   1200px;
  --h-container-narrow: 880px;

  /* Radius — Harcourts is restrained; keep small */
  --h-radius-sm:   2px;
  --h-radius:      4px;
  --h-radius-lg:   8px;

  /* Borders */
  --h-border:      1px solid var(--h-grey-10);
  --h-border-strong: 1px solid var(--h-grey-30);

  /* Shadows — subtle only */
  --h-shadow-sm:   0 1px 2px rgba(0, 31, 73, 0.06);
  --h-shadow:      0 2px 8px rgba(0, 31, 73, 0.08);
  --h-shadow-lg:   0 12px 32px rgba(0, 31, 73, 0.12);

  /* Motion */
  --h-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --h-duration:    180ms;
}

/* ---------- Reset / base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--h-font-sans);
  font-size: var(--h-fs-base);
  font-weight: var(--h-fw-regular);
  line-height: var(--h-lh-base);
  color: var(--h-ink);
  background: var(--h-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
  color: var(--h-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--h-duration) var(--h-ease);
}
a:hover { color: var(--h-cyan); }

/* ---------- Typography classes -------------------------------------------- */
.h-display {
  font-family: var(--h-font-display);
  font-weight: var(--h-fw-light);
  font-size: var(--h-fs-5xl);
  line-height: var(--h-lh-tight);
  letter-spacing: var(--h-tracking-tight);
  color: var(--h-blue);
  margin: 0 0 var(--h-s-5);
}

.h-h1 {
  font-weight: var(--h-fw-semibold);
  font-size: var(--h-fs-3xl);
  line-height: var(--h-lh-tight);
  color: var(--h-blue);
  margin: 0 0 var(--h-s-4);
}

.h-h2 {
  font-weight: var(--h-fw-semibold);
  font-size: var(--h-fs-2xl);
  line-height: var(--h-lh-snug);
  color: var(--h-blue);
  margin: 0 0 var(--h-s-3);
}

.h-h3 {
  font-weight: var(--h-fw-semibold);
  font-size: var(--h-fs-xl);
  line-height: var(--h-lh-snug);
  color: var(--h-blue);
  margin: 0 0 var(--h-s-3);
}

.h-eyebrow {
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  color: var(--h-cyan);
  margin: 0 0 var(--h-s-2);
}

.h-lead {
  font-size: var(--h-fs-lg);
  font-weight: var(--h-fw-light);
  line-height: var(--h-lh-snug);
  color: var(--h-grey-70);
}

.h-muted { color: var(--h-grey-50); }
.h-meta  { font-size: var(--h-fs-sm); color: var(--h-grey-50); }

/* ---------- Signature brand patterns -------------------------------------- */

/* The Harcourts Script — secondary font for personality, single words only.
   Never use for body, headings, or buttons. Reserved for accent words like
   "Welcome", "Home", "Sold" used as personal/emotional callouts. */
.h-script {
  font-family: var(--h-font-script);
  font-weight: 400;
  font-style: italic;
}

/* The cyan underline — Harcourts' signature headline treatment.
   Apply to the LAST word of a headline (wrap that word in <span class="h-underline">).
   Height = ~50% of cap height, sits ~50% from top, cyan colour. */
.h-underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.h-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.42em;
  background: var(--h-cyan);
  z-index: -1;
}

/* The H mark — placeholder for the standalone H symbol.
   Drop the official SVG into assets/ and reference it where you'd use this class. */
.h-mark {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: var(--h-blue);
  color: var(--h-white);
  font-weight: var(--h-fw-bold);
  text-align: center;
  line-height: 1.5em;
  border-radius: var(--h-radius-sm);
}

/* ---------- Layout primitives --------------------------------------------- */
.h-container {
  width: 100%;
  max-width: var(--h-container);
  margin: 0 auto;
  padding: 0 var(--h-s-5);
}

.h-container--narrow { max-width: var(--h-container-narrow); }

.h-section {
  padding: var(--h-s-10) 0;
}

.h-section--tight { padding: var(--h-s-6) 0; }

.h-grid {
  display: grid;
  gap: var(--h-s-5);
}

.h-grid--2 { grid-template-columns: repeat(2, 1fr); }
.h-grid--3 { grid-template-columns: repeat(3, 1fr); }
.h-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .h-grid--2, .h-grid--3, .h-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Brand stripe (signature texture) ------------------------------ */
.h-stripe {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--h-blue) 0,
    var(--h-blue) 24px,
    var(--h-white) 24px,
    var(--h-white) 48px
  );
}

.h-stripe--thin { height: 3px; }
.h-stripe--vertical {
  width: 6px;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    var(--h-blue) 0,
    var(--h-blue) 24px,
    var(--h-white) 24px,
    var(--h-white) 48px
  );
}

/* ---------- Buttons -------------------------------------------------------- */
.h-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--h-s-2);
  padding: var(--h-s-3) var(--h-s-5);
  font-family: var(--h-font-sans);
  font-size: var(--h-fs-base);
  font-weight: var(--h-fw-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--h-radius);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--h-duration) var(--h-ease);
  min-height: 44px;
}

.h-btn-primary {
  background: var(--h-blue);
  color: var(--h-white);
}
.h-btn-primary:hover {
  background: var(--h-blue-90);
  color: var(--h-white);
  transform: translateY(-1px);
  box-shadow: var(--h-shadow);
}

.h-btn-secondary {
  background: var(--h-white);
  color: var(--h-blue);
  border-color: var(--h-blue);
}
.h-btn-secondary:hover {
  background: var(--h-blue);
  color: var(--h-white);
}

.h-btn-ghost {
  background: transparent;
  color: var(--h-blue);
}
.h-btn-ghost:hover {
  background: var(--h-blue-10);
  color: var(--h-blue);
}

.h-btn-accent {
  background: var(--h-cyan);
  color: var(--h-white);
}
.h-btn-accent:hover {
  background: var(--h-cyan-90);
  color: var(--h-white);
}

.h-btn--sm { padding: var(--h-s-2) var(--h-s-4); font-size: var(--h-fs-sm); min-height: 36px; }
.h-btn--lg { padding: var(--h-s-4) var(--h-s-6); font-size: var(--h-fs-lg); min-height: 52px; }
.h-btn--block { width: 100%; }

/* ---------- Cards ---------------------------------------------------------- */
.h-card {
  background: var(--h-white);
  border: var(--h-border);
  border-radius: var(--h-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--h-duration) var(--h-ease),
              transform var(--h-duration) var(--h-ease);
}

.h-card:hover { box-shadow: var(--h-shadow-lg); transform: translateY(-2px); }

.h-card__media {
  aspect-ratio: 4 / 3;
  background: var(--h-grey-10);
  overflow: hidden;
}
.h-card__media img { width: 100%; height: 100%; object-fit: cover; }

.h-card__body  { padding: var(--h-s-5); }
.h-card__title { font-weight: var(--h-fw-semibold); color: var(--h-blue); margin: 0 0 var(--h-s-2); font-size: var(--h-fs-lg); }
.h-card__meta  { font-size: var(--h-fs-sm); color: var(--h-grey-50); margin: 0; }

/* ---------- Tile (property listing standard) ------------------------------ */
.h-tile {
  display: flex;
  flex-direction: column;
  background: var(--h-white);
  border-radius: var(--h-radius-lg);
  overflow: hidden;
  border: var(--h-border);
  transition: box-shadow var(--h-duration) var(--h-ease);
}
.h-tile:hover { box-shadow: var(--h-shadow-lg); }

.h-tile__image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--h-grey-10);
  overflow: hidden;
}
.h-tile__image img { width: 100%; height: 100%; object-fit: cover; }

.h-tile__badge {
  position: absolute;
  top: var(--h-s-3);
  left: var(--h-s-3);
  background: var(--h-blue);
  color: var(--h-white);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  padding: var(--h-s-1) var(--h-s-3);
  border-radius: var(--h-radius-sm);
}

.h-tile__body { padding: var(--h-s-5); flex: 1; display: flex; flex-direction: column; }

.h-tile__price {
  font-size: var(--h-fs-xl);
  font-weight: var(--h-fw-bold);
  color: var(--h-blue);
  margin: 0 0 var(--h-s-2);
}

.h-tile__address {
  font-size: var(--h-fs-base);
  color: var(--h-ink);
  margin: 0 0 var(--h-s-4);
  line-height: var(--h-lh-snug);
}

.h-tile__features {
  display: flex;
  gap: var(--h-s-4);
  padding-top: var(--h-s-3);
  border-top: var(--h-border);
  margin-top: auto;
  font-size: var(--h-fs-sm);
  color: var(--h-grey-70);
}

.h-tile__features span {
  display: inline-flex;
  align-items: center;
  gap: var(--h-s-1);
  font-weight: var(--h-fw-semibold);
}

/* ---------- Header / nav --------------------------------------------------- */
.h-header {
  background: var(--h-white);
  border-bottom: var(--h-border);
}

.h-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--h-s-4) 0;
}

.h-header__logo {
  font-family: var(--h-font-display);
  font-weight: var(--h-fw-bold);
  font-size: var(--h-fs-xl);
  color: var(--h-blue);
  text-decoration: none;
  letter-spacing: var(--h-tracking-tight);
}

.h-nav { display: flex; gap: var(--h-s-5); }
.h-nav a {
  color: var(--h-ink);
  text-decoration: none;
  font-weight: var(--h-fw-semibold);
  font-size: var(--h-fs-sm);
  letter-spacing: 0.02em;
}
.h-nav a:hover { color: var(--h-cyan); }

/* ---------- Footer --------------------------------------------------------- */
.h-footer {
  background: var(--h-blue);
  color: var(--h-white);
  padding: var(--h-s-8) 0 var(--h-s-5);
  margin-top: var(--h-s-12);
}
.h-footer a { color: var(--h-white); }
.h-footer__meta {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: var(--h-s-6);
  padding-top: var(--h-s-4);
  font-size: var(--h-fs-sm);
  opacity: 0.8;
}

/* ---------- Forms ---------------------------------------------------------- */
.h-label {
  display: block;
  font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-semibold);
  color: var(--h-blue);
  margin-bottom: var(--h-s-1);
}

.h-input, .h-textarea, .h-select {
  width: 100%;
  padding: var(--h-s-3) var(--h-s-4);
  font-family: var(--h-font-sans);
  font-size: var(--h-fs-base);
  color: var(--h-ink);
  background: var(--h-white);
  border: var(--h-border-strong);
  border-radius: var(--h-radius);
  transition: border-color var(--h-duration) var(--h-ease);
}

.h-input:focus, .h-textarea:focus, .h-select:focus {
  outline: none;
  border-color: var(--h-cyan);
  box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

.h-textarea { min-height: 120px; resize: vertical; }

/* ---------- Badges / pills ------------------------------------------------- */
.h-badge {
  display: inline-block;
  padding: var(--h-s-1) var(--h-s-3);
  font-size: var(--h-fs-xs);
  font-weight: var(--h-fw-semibold);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--h-radius-sm);
  background: var(--h-blue-10);
  color: var(--h-blue);
}
.h-badge--accent  { background: var(--h-cyan); color: var(--h-white); }
.h-badge--solid   { background: var(--h-blue); color: var(--h-white); }
.h-badge--success { background: var(--h-success); color: var(--h-white); }
.h-badge--warning { background: var(--h-warning); color: var(--h-charcoal); }

/* ---------- Tables --------------------------------------------------------- */
.h-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--h-fs-sm);
}
.h-table th {
  text-align: left;
  background: var(--h-blue);
  color: var(--h-white);
  font-weight: var(--h-fw-semibold);
  padding: var(--h-s-3) var(--h-s-4);
}
.h-table td {
  padding: var(--h-s-3) var(--h-s-4);
  border-bottom: var(--h-border);
}
.h-table tr:hover td { background: var(--h-blue-10); }

/* ---------- Utility -------------------------------------------------------- */
.h-divider { border: 0; border-top: var(--h-border); margin: var(--h-s-6) 0; }
.h-mt-0 { margin-top: 0; }
.h-text-center { text-align: center; }
.h-on-blue { background: var(--h-blue); color: var(--h-white); }
.h-on-blue .h-h1, .h-on-blue .h-h2, .h-on-blue .h-h3 { color: var(--h-white); }

/* ---------- Print ---------------------------------------------------------- */
@media print {
  body { background: var(--h-white); }
  .h-btn, .h-header__nav { display: none; }
}