/* ─────────────────────────────────────────────────────────────
   The Good House — global stylesheet
   
   Improvements:
   - Removed blanket !important overrides (fragile & hard to debug)
   - Tailwind amber utilities mapped via CSS custom properties at
     component level instead of global selectors where possible
   - Added :focus-visible ring for keyboard accessibility
   - Added reduced-motion support
   - Added print baseline
───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600&display=swap');

/* ── Brand tokens ──────────────────────────────────────────── */
:root {
  --gh-bg:          #050b16;  /* deep navy — logo background  */
  --gh-bg-soft:     #0b1724;  /* slightly lighter navy        */
  --gh-gold:        #f4b63a;  /* primary brand gold           */
  --gh-gold-soft:   #f7c96b;  /* lighter gold accent          */
  --gh-gold-dark:   #d89a22;  /* deeper gold for hover states */
  --gh-text-main:   #f9fafb;  /* primary light text           */
  --gh-text-muted:  #9ca3af;  /* secondary / muted text       */

  /* Spacing rhythm — handy for consistent section padding */
  --section-py: 5rem;         /* py-20 equivalent             */
}

/* ── Base ──────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', system-ui, sans-serif;
  background-color: #ffffff;
  color: #111827;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ── Accessibility: focus ring ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gh-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Property card hover ───────────────────────────────────── */
.property-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.property-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ── Hero overlay ──────────────────────────────────────────── */
.hero-overlay {
  background: linear-gradient(
    to right,
    rgba(5, 11, 22, 0.88),
    rgba(5, 11, 22, 0.55)
  );
}

/* ── Restaurant accent ─────────────────────────────────────── */
.restaurant-special {
  border-left: 4px solid var(--gh-gold);
}

/* ── Brand utility classes ─────────────────────────────────── */
/*
  Use these instead of overriding Tailwind's amber classes globally.
  Apply them directly in your markup for brand-coloured elements.
  
  e.g.  <button class="btn-brand"> instead of <button class="bg-amber-600">
*/

.bg-brand-gold {
  background-color: var(--gh-gold);
}

.bg-brand-gold-dark {
  background-color: var(--gh-gold-dark);
}

.text-brand-gold {
  color: var(--gh-gold);
}

.border-brand-gold {
  border-color: var(--gh-gold);
}

.bg-brand-navy {
  background-color: var(--gh-bg);
}

.text-brand-muted {
  color: var(--gh-text-muted);
}

/* ── Shared button component ───────────────────────────────── */
.btn-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.75rem;
  border-radius: 0.5rem;
  border: none;
  background: linear-gradient(135deg, var(--gh-gold), var(--gh-gold-dark));
  color: var(--gh-bg);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  white-space: nowrap;
}

.btn-brand:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 8px 20px rgba(244, 182, 58, 0.35);
}

.btn-brand:active {
  transform: translateY(0);
}

/* ── Outline button variant ────────────────────────────────── */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.75rem;
  border-radius: 0.5rem;
  border: 2px solid currentColor;
  background: transparent;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

/* ── Section layout helper ─────────────────────────────────── */
.section-py {
  padding-top:    var(--section-py);
  padding-bottom: var(--section-py);
}

/* ── Print baseline ────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }

  body {
    color: #000;
    background: #fff;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
    color: #555;
  }
}