/* visithawkhurst.org.uk — layered on top of Bootstrap 5.3 */

:root {
  --vh-green:       #1f5f3a;
  --vh-green-dark:  #143f27;
  --vh-accent:      #d9a441;
  --vh-accent-dark: #8a6420;
  --vh-ink:         #1e2622;
  --vh-muted:       #5b6763;
  --vh-paper:       #f5f7f4;
}

body {
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--vh-ink);
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; }

/* ── Brand colours ───────────────────────────────────────────────────────── */

.bg-green       { background-color: var(--vh-green) !important; }
.bg-green-dark  { background-color: var(--vh-green-dark) !important; }
.text-accent    { color: var(--vh-accent) !important; }
.text-accent-dark { color: var(--vh-accent-dark) !important; }

.btn-primary {
  --bs-btn-bg: var(--vh-green);
  --bs-btn-border-color: var(--vh-green);
  --bs-btn-hover-bg: var(--vh-green-dark);
  --bs-btn-hover-border-color: var(--vh-green-dark);
  --bs-btn-active-bg: var(--vh-green-dark);
  --bs-btn-active-border-color: var(--vh-green-dark);
}

.btn-accent {
  --bs-btn-color: #1e2622;
  --bs-btn-bg: var(--vh-accent);
  --bs-btn-border-color: var(--vh-accent);
  --bs-btn-hover-color: #1e2622;
  --bs-btn-hover-bg: #c4913a;
  --bs-btn-hover-border-color: #c4913a;
}

a { color: var(--vh-green); }
a:hover { color: var(--vh-green-dark); }

.navbar.bg-green .nav-link { color: rgba(255,255,255,.85); }
.navbar.bg-green .nav-link:hover, .navbar.bg-green .nav-link.active { color: #fff; }

/* ── Skip link ───────────────────────────────────────────────────────────── */

.vh-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1100;
  padding: .6rem 1rem; background: var(--vh-green); color: #fff; text-decoration: none;
}
.vh-skip-link:focus { left: 0; color: #fff; }

/* ── Home hero ───────────────────────────────────────────────────────────── */

.vh-hero {
  background: linear-gradient(135deg, #f1f6f0 0%, #e3ece2 100%);
  border-radius: .75rem;
  padding: 2.5rem;
  border-left: 6px solid var(--vh-accent);
}
@media (max-width: 575.98px) { .vh-hero { padding: 1.5rem; } }

.vh-section-card { border-top: 3px solid var(--vh-green); }
.vh-card-img { height: 150px; object-fit: cover; }
.vh-hero-img { max-height: 420px; width: 100%; object-fit: cover; }

.vh-tile { background: var(--vh-paper); border: 1px solid #dfe6e0; color: var(--vh-ink); }
.vh-tile:hover { background: #e8efe8; border-color: var(--vh-green); }

/* ── Article + recovered legacy content ──────────────────────────────────── */

.vh-article { font-size: 1.0625rem; line-height: 1.7; }
.vh-article h2 { margin-top: 2rem; margin-bottom: .75rem; font-size: 1.35rem; }
.vh-article h3 { margin-top: 1.5rem; margin-bottom: .5rem; font-size: 1.15rem; }
.vh-article p  { margin-bottom: 1.1rem; }

.legacy-content h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.legacy-content h4 { font-size: 1.05rem; margin-top: 1.25rem; }
.legacy-content h5 { font-size: .9rem; color: var(--vh-muted); font-weight: 600; }
.legacy-content hr { margin: 1.25rem 0; opacity: .15; }
.legacy-content img { max-width: 100%; height: auto; border-radius: .375rem; }
.legacy-content .row { margin-left: 0; margin-right: 0; }
.legacy-content .columns, .legacy-content [class*="medium-"], .legacy-content [class*="small-"], .legacy-content [class*="large-"] { width: auto; float: none; padding: 0; }
.legacy-content .hide-for-small img { max-width: 220px; margin: .25rem 0 .75rem; }
.legacy-content .accreditations img { max-width: 70px; display: inline-block; margin-right: .5rem; border-radius: 0; }
.legacy-content .listing-description { margin-bottom: .5rem; }
.legacy-content font { font-size: .85rem; color: var(--vh-muted); }
.legacy-content .day_wrapper, .legacy-content .day_title, .legacy-content .month_wrapper { display: none; }

.vh-details { width: auto; margin-bottom: 1rem; }
.vh-details td { border: 0; padding: .25rem .6rem .25rem 0; vertical-align: top; }
.vh-details td:first-child { color: var(--vh-green); width: 1.6rem; }
.vh-details td:first-child i { font-size: 1rem; }

.vh-intro { font-size: 1.05rem; line-height: 1.7; }

/* ── Note block ──────────────────────────────────────────────────────────── */

.vh-note {
  background: var(--vh-paper); border: 1px solid #e0e6e1; border-radius: .5rem;
  padding: 1.25rem 1.5rem; font-size: .925rem; color: var(--vh-muted);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

@media (min-width: 992px) { .vh-sidebar-sticky { position: sticky; top: 5rem; } }

/* ── A-Z listing ─────────────────────────────────────────────────────────── */

.vh-az li { padding-bottom: .25rem; border-bottom: 1px solid #f0f2f0; }
.vh-az-nav .btn { margin: 0 .15rem .3rem 0; min-width: 2.2rem; }

/* ── Advertising ─────────────────────────────────────────────────────────── */

.vh-ad { margin: 1.5rem 0; }
/* A slot that AdSense did not fill collapses to nothing rather than leaving a gap. */
.vh-ad .adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
/* Placeholder units (no real slot ID yet) reserve roughly the height a real unit would
   take, so the layout does not jump when live slots are configured. Invisible on purpose. */
.vh-ad-placeholder { min-height: 280px; margin: 1.5rem 0; }
@media (max-width: 767.98px) { .vh-ad-placeholder { min-height: 250px; } }

/* ── Contact form honeypot ───────────────────────────────────────────────── */

.vh-hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
  .navbar, footer, .vh-ad, .vh-ad-placeholder, aside, .breadcrumb { display: none !important; }
  .vh-article { font-size: 11pt; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}