/* Woldingham Glebe Custom Bootstrap Theme
   ----------------------------------------------------
   Drop this file AFTER the standard Bootstrap 5 CSS.
   It overrides CSS variables and adds a few helpers.
*/

/* 1. Google Fonts -------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600&display=swap");

/* 2. Palette variables --------------------------------------------------- */
:root {
  --glebe-green:    #23685f;
  --glebe-coral:    #e06168;
  --glebe-peach:    #e4c5b7;
  --glebe-blue:     #7096b0;
  --glebe-charcoal: #121515;
  --glebe-light:    #fdfdfd;

  /* Bootstrap theme-colour mappings */
  --bs-primary:   var(--glebe-green);
  --bs-secondary: var(--glebe-coral);
  --bs-success:   #1c584e; /* darken glebe-green 10% */
  --bs-info:      var(--glebe-blue);
  --bs-warning:   var(--glebe-peach);
  --bs-danger:    var(--glebe-coral);
  --bs-light:     var(--glebe-light);
  --bs-dark:      var(--glebe-charcoal);

  /* Typography */
  --bs-font-sans-serif: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bs-font-serif: "Merriweather", Georgia, "Times New Roman", Times, serif;
  --bs-body-font-family: var(--bs-font-sans-serif);

  /* Borders & radii */
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 0.5rem;

  /* Shadows */
  --glebe-shadow-sm: 0 0.125rem 0.25rem rgba(18,21,21,0.075);
  --glebe-shadow:    0 0.5rem 1rem rgba(18,21,21,0.15);
}

/* 3. Global tweaks ------------------------------------------------------- */
body {
  background-color: var(--glebe-light);
  color: var(--glebe-charcoal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bs-font-serif);
  color: var(--glebe-green);
}

/* Links ------------------------------------------------------------------ */
a {
  color: var(--glebe-coral);
}
a:hover, a:focus {
  color: color-mix(in srgb, var(--glebe-coral) 90%, black);
}

/* Navbar ----------------------------------------------------------------- */
.navbar-dark,
.navbar {
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.navbar-dark .navbar-brand {
  color: var(--glebe-peach);
}
.navbar-dark .navbar-brand:hover {
  color: color-mix(in srgb, var(--glebe-peach) 95%, black);
}
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--glebe-peach);
}

/* Breadcrumb ------------------------------------------------------------- */
.breadcrumb {
  background-color: color-mix(in srgb, var(--glebe-green) 15%, white);
}
.breadcrumb .active {
  color: var(--glebe-green);
}

/* Buttons --------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--glebe-green);
  --bs-btn-border-color: var(--glebe-green);
  --bs-btn-hover-bg: color-mix(in srgb, var(--glebe-green) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--glebe-green) 85%, black);
}
.btn-secondary,
.btn-danger {
  --bs-btn-bg: var(--glebe-coral);
  --bs-btn-border-color: var(--glebe-coral);
  --bs-btn-hover-bg: color-mix(in srgb, var(--glebe-coral) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--glebe-coral) 85%, black);
}

/* Cards, alerts, etc. ---------------------------------------------------- */
.card, .alert {
  border-radius: var(--bs-border-radius);
  box-shadow: var(--glebe-shadow-sm);
}

/* 4. Helpers ------------------------------------------------------------- */
.hero {
  background: linear-gradient(135deg, rgba(35,104,95,0.85) 0%, rgba(224,97,104,0.85) 100%);
  color: var(--glebe-light);
  padding: 4rem 2rem;
  text-align: center;
}
.callout {
  background-color: color-mix(in srgb, var(--glebe-blue) 20%, white);
  border-left: 4px solid var(--glebe-blue);
  padding: 1.5rem;
  margin: 2rem 0;
}

/* Optional utility shadows ---------------------------------------------- */
.shadow-glebe-sm { box-shadow: var(--glebe-shadow-sm) !important; }
.shadow-glebe    { box-shadow: var(--glebe-shadow) !important; }