/*
 * Highlands Fellowship — Brand CSS Foundation
 * Load this file in your Rock custom theme (theme.css or via _theme.less import)
 * Requires: Google Fonts — Roboto Slab (400, 500, 700)
 *
 * Usage:
 *   1. Add @import for this file in your Rock theme stylesheet
 *   2. Reference variables via var(--hf-*) in hf-components.css and templates
 *   3. Dark mode triggers on [data-bs-theme="dark"] (Bootstrap 5 / Rock v17+)
 *      and also responds to prefers-color-scheme: dark as a fallback
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&display=swap');

/* ============================================================
   LIGHT MODE — Default
   ============================================================ */
:root,
[data-bs-theme="light"] {

  /* --- Brand Colors --- */
  --hf-navy:           #0d1d41;
  --hf-navy-dark:      #091629;
  --hf-navy-mid:       #132850;
  --hf-navy-light:     #1e3d78;
  --hf-teal:           #56b6b2;
  --hf-teal-dark:      #3d9490;
  --hf-teal-mid:       #6dc5c1;
  --hf-teal-light:     #a8dedd;
  --hf-yellow:         #f4b334;
  --hf-yellow-dark:    #d49a1a;
  --hf-yellow-light:   #fad06e;
  --hf-orange:         #da5e14;
  --hf-olive:          #77843c;
  --hf-cream:          #f2dab2;

  /* --- Neutral Scale --- */
  --hf-white:          #ffffff;
  --hf-off-white:      #fafafa;
  --hf-gray-light:     #e3e3e3;
  --hf-gray-mid:       #8a8a8a;
  --hf-gray-dark:      #3d3d3d;
  --hf-near-black:     #1a1a1a;

  /* --- Semantic Surface Variables (light mode) --- */
  --hf-bg:             #ffffff;
  --hf-bg-alt:         #fafafa;
  --hf-bg-subtle:      #f4f4f4;
  --hf-surface:        #ffffff;
  --hf-surface-raised: #ffffff;
  --hf-border:         #e3e3e3;
  --hf-border-strong:  #c8c8c8;
  --hf-divider:        #e3e3e3;

  /* --- Text --- */
  --hf-text:           #3d3d3d;
  --hf-text-heading:   #0d1d41;
  --hf-text-muted:     #8a8a8a;
  --hf-text-inverse:   #ffffff;
  --hf-text-on-teal:   #ffffff;
  --hf-text-on-yellow: #0d1d41;
  --hf-link:           #0d1d41;
  --hf-link-hover:     #56b6b2;

  /* --- Card --- */
  --hf-card-bg:        #ffffff;
  --hf-card-border:    #e3e3e3;
  --hf-card-shadow:    0 2px 12px rgba(13, 29, 65, 0.08);
  --hf-card-shadow-hover: 0 6px 24px rgba(13, 29, 65, 0.14);

  /* --- Buttons --- */
  --hf-btn-primary-bg:       #0d1d41;
  --hf-btn-primary-text:     #ffffff;
  --hf-btn-primary-hover-bg: #1e3d78;
  --hf-btn-secondary-bg:     #56b6b2;
  --hf-btn-secondary-text:   #ffffff;
  --hf-btn-secondary-hover:  #3d9490;
  --hf-btn-outline-border:   #0d1d41;
  --hf-btn-outline-text:     #0d1d41;

  /* --- Form / Input --- */
  --hf-input-bg:       #ffffff;
  --hf-input-border:   #e3e3e3;
  --hf-input-focus:    #56b6b2;
  --hf-input-text:     #3d3d3d;

  /* --- Badge --- */
  --hf-badge-bg:       #e3e3e3;
  --hf-badge-text:     #0d1d41;

  /* --- Overlay (photo treatment per brand guide) --- */
  --hf-overlay-color:  rgba(13, 29, 65, 0.6); /* Navy at 60%, multiply */

  /* --- Vision Gradient --- */
  --hf-gradient:       linear-gradient(135deg, #56b6b2 0%, #f4b334 100%);

  /* --- Border Radius (from brand kit) --- */
  --hf-radius-none:    0px;
  --hf-radius-sm:      4px;
  --hf-radius:         8px;
  --hf-radius-lg:      16px;
  --hf-radius-full:    9999px;

  /* --- Typography --- */
  --hf-font:           'Roboto Slab', Georgia, serif;
  --hf-font-size-xs:   0.75rem;     /* 12px */
  --hf-font-size-sm:   0.875rem;    /* 14px */
  --hf-font-size-base: 1rem;        /* 16px */
  --hf-font-size-lg:   1.125rem;    /* 18px — body heading */
  --hf-font-size-xl:   1.5rem;      /* 24px */
  --hf-font-size-2xl:  1.875rem;    /* 30px — large heading */
  --hf-font-size-3xl:  2.5rem;      /* 40px */
  --hf-font-size-4xl:  3.5rem;      /* 56px */
  --hf-font-weight-normal:  400;
  --hf-font-weight-medium:  500;
  --hf-font-weight-bold:    700;
  --hf-line-height:    1.6;
  --hf-line-height-tight: 1.2;

  /* --- Spacing Scale --- */
  --hf-space-1:  0.25rem;
  --hf-space-2:  0.5rem;
  --hf-space-3:  0.75rem;
  --hf-space-4:  1rem;
  --hf-space-6:  1.5rem;
  --hf-space-8:  2rem;
  --hf-space-10: 2.5rem;
  --hf-space-12: 3rem;
  --hf-space-16: 4rem;
  --hf-space-20: 5rem;
  --hf-space-24: 6rem;

  /* --- Transitions --- */
  --hf-transition:       all 0.25s ease;
  --hf-transition-fast:  all 0.15s ease;
  --hf-transition-slow:  all 0.4s ease;

  /* --- Z-Index Scale --- */
  --hf-z-base:    0;
  --hf-z-raised:  10;
  --hf-z-overlay: 100;
  --hf-z-modal:   200;
  --hf-z-nav:     300;
}


/* ============================================================
   DARK MODE — [data-bs-theme="dark"] (Rock v17+ / Bootstrap 5)
   ============================================================ */
[data-bs-theme="dark"],
:root[data-theme="dark"] {

  --hf-bg:             #091629;
  --hf-bg-alt:         #0d1d41;
  --hf-bg-subtle:      #132850;
  --hf-surface:        #0d1d41;
  --hf-surface-raised: #132850;
  --hf-border:         #1e3d78;
  --hf-border-strong:  #2a4f8a;
  --hf-divider:        #1e3d78;

  --hf-text:           #f2dab2;
  --hf-text-heading:   #ffffff;
  --hf-text-muted:     #a8dedd;
  --hf-text-inverse:   #0d1d41;
  --hf-link:           #a8dedd;
  --hf-link-hover:     #56b6b2;

  --hf-card-bg:        #0d1d41;
  --hf-card-border:    #1e3d78;
  --hf-card-shadow:    0 2px 16px rgba(0, 0, 0, 0.4);
  --hf-card-shadow-hover: 0 6px 28px rgba(0, 0, 0, 0.6);

  --hf-btn-primary-bg:       #56b6b2;
  --hf-btn-primary-text:     #0d1d41;
  --hf-btn-primary-hover-bg: #3d9490;
  --hf-btn-secondary-bg:     #f4b334;
  --hf-btn-secondary-text:   #0d1d41;
  --hf-btn-secondary-hover:  #d49a1a;
  --hf-btn-outline-border:   #56b6b2;
  --hf-btn-outline-text:     #56b6b2;

  --hf-input-bg:       #132850;
  --hf-input-border:   #1e3d78;
  --hf-input-focus:    #56b6b2;
  --hf-input-text:     #f2dab2;

  --hf-badge-bg:       #1e3d78;
  --hf-badge-text:     #a8dedd;
}

/* prefers-color-scheme fallback (no JS theme toggle) */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]):not([data-theme="light"]) {

    --hf-bg:             #091629;
    --hf-bg-alt:         #0d1d41;
    --hf-bg-subtle:      #132850;
    --hf-surface:        #0d1d41;
    --hf-surface-raised: #132850;
    --hf-border:         #1e3d78;
    --hf-border-strong:  #2a4f8a;
    --hf-divider:        #1e3d78;

    --hf-text:           #f2dab2;
    --hf-text-heading:   #ffffff;
    --hf-text-muted:     #a8dedd;
    --hf-text-inverse:   #0d1d41;
    --hf-link:           #a8dedd;
    --hf-link-hover:     #56b6b2;

    --hf-card-bg:        #0d1d41;
    --hf-card-border:    #1e3d78;
    --hf-card-shadow:    0 2px 16px rgba(0, 0, 0, 0.4);
    --hf-card-shadow-hover: 0 6px 28px rgba(0, 0, 0, 0.6);

    --hf-btn-primary-bg:       #56b6b2;
    --hf-btn-primary-text:     #0d1d41;
    --hf-btn-primary-hover-bg: #3d9490;
    --hf-btn-secondary-bg:     #f4b334;
    --hf-btn-secondary-text:   #0d1d41;
    --hf-btn-secondary-hover:  #d49a1a;
    --hf-btn-outline-border:   #56b6b2;
    --hf-btn-outline-text:     #56b6b2;

    --hf-input-bg:       #132850;
    --hf-input-border:   #1e3d78;
    --hf-input-focus:    #56b6b2;
    --hf-input-text:     #f2dab2;

    --hf-badge-bg:       #1e3d78;
    --hf-badge-text:     #a8dedd;
  }
}


/* ============================================================
   BASE ELEMENT STYLES
   Apply to all .hf-component wrappers
   ============================================================ */
.hf-component,
.hf-component * {
  box-sizing: border-box;
}

.hf-component {
  font-family: var(--hf-font);
  font-weight: var(--hf-font-weight-medium);
  color: var(--hf-text);
  line-height: var(--hf-line-height);
  background-color: var(--hf-bg);
}

.hf-component h1,
.hf-component h2,
.hf-component h3,
.hf-component h4,
.hf-component h5,
.hf-component h6 {
  font-family: var(--hf-font);
  font-weight: var(--hf-font-weight-medium);
  color: var(--hf-text-heading);
  line-height: var(--hf-line-height-tight);
  margin-top: 0;
}

.hf-component a {
  color: var(--hf-link);
  text-decoration: none;
  transition: color var(--hf-transition-fast);
}

.hf-component a:hover {
  color: var(--hf-link-hover);
}

.hf-component img {
  max-width: 100%;
  height: auto;
  display: block;
}

.hf-component p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   SHARED UTILITY CLASSES
   ============================================================ */

/* Eyebrow label above headings */
.hf-eyebrow {
  display: block;
  font-family: var(--hf-font);
  font-size: var(--hf-font-size-xs);
  font-weight: var(--hf-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hf-teal);
  margin-bottom: var(--hf-space-2);
}

/* Photo treatment overlay (brand guide spec) */
.hf-photo-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  filter: saturate(0);
}

.hf-photo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #0d1d41;
  opacity: 0.6;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hf-photo-bg > * {
  position: relative;
  z-index: 1;
}

/* Vision Gradient accent line */
.hf-gradient-bar {
  height: 4px;
  background: var(--hf-gradient);
  border-radius: var(--hf-radius-full);
}

/* Section padding helpers */
.hf-section {
  padding: var(--hf-space-16) 0;
}

.hf-section-sm {
  padding: var(--hf-space-8) 0;
}

.hf-section-lg {
  padding: var(--hf-space-24) 0;
}

/* Container */
.hf-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--hf-space-6);
}

/* Divider */
.hf-divider {
  border: none;
  border-top: 1px solid var(--hf-divider);
  margin: var(--hf-space-8) 0;
}

/* Accent heading underline */
.hf-heading-accent {
  position: relative;
  padding-bottom: var(--hf-space-3);
}

.hf-heading-accent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--hf-teal);
  border-radius: var(--hf-radius-full);
}

.hf-heading-accent--center::after {
  left: 50%;
  transform: translateX(-50%);
}