/* /BHS/css/main.css */

/* ==============================
   ROOT / DESIGN VARIABLES
   ============================== */
:root{

  /* gold colour; Used mainly for hover / accent states */
  --gold: #d4af37;

  /* Darker gold for default links or less prominent accents */
  --gold-dark: #8a6228;

  /* Alias */
  --dark-gold: var(--gold-dark);

  /* Overall page background colour */
  --bg: #fbfbfb;

  /* Background colour for cards, panels, footer, etc. */
  --card: #fff;

  /* Fixed reference heights for layout spacing */
  --header-height: 4rem;    /* ≈ 64px when base font is 16px */
  --footer-height: 3rem;    /* ≈ 48px when base font is 16px */

  /* z-index values to control stacking order */
  --header-z: 1500;         /* ensures header stays on top */
  --panel-z: 1400;          /* panels below header */

  /* Root font size for the entire site
     All rem units scale from this */
  --base-font: 16px;        /* 1rem = 16px */

  /* Scale multipliers for specific UI elements */
  --logo-scale: 1.05;       /* slightly enlarges logos */
  --icon-scale: 1.05;       /* slightly enlarges icons */
  --nav-label-scale: 1;     /* neutral scale for nav labels */
  --panel-font-scale: 0.95; /* slightly smaller panel text */
  --footer-scale: 0.9;      /* footer text slightly smaller */

  /* Standard internal padding for card components */
  --card-pad: 20px;
}


/* minimal normalization — put first in main.css */
html { box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; font-size: 16px; -webkit-text-size-adjust: 100%; }
*, *:before, *:after { box-sizing: inherit; }
body { margin: 0; line-height: 1.45; color: #222; }
.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }


/* ==============================
   GLOBAL BOX SIZING & TYPE
   ============================== */

/* Sets the root font size
   and enables consistent box sizing */
html{
  font-size: var(--base-font); /* controls rem scaling */
  box-sizing: border-box;      /* width includes padding & border */
}

/* Ensures all elements and pseudo-elements
   inherit the same box sizing model */
*, *::before, *::after{
  box-sizing: inherit;
}

/* ==============================
   BASE LAYOUT
   ============================== */

/* Forces html and body to span the full viewport height
   Required for sticky footer layouts */
html, body{
  height: 100%;
}

body{
  min-height: 100vh;        /* ensures page is at least viewport height */

  display: flex;            /* enables flexbox layout */
  flex-direction: column;   /* stacks header, main, footer vertically */

  margin: 0;                /* removes default browser margin */

  /* System-first font stack for performance and consistency */
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;

  /* Improves font rendering on WebKit browsers (Chrome, Safari) */
  -webkit-font-smoothing: antialiased;

  /* Improves font rendering on macOS Firefox */
  -moz-osx-font-smoothing: grayscale;

  background: var(--bg);    /* applies site background colour */

  /* Default text colour for the site */
  color: #000;

  /* Prevents horizontal scrolling caused by overflow */
  overflow-x: hidden;

  font-size: 1rem;          /* equals --base-font */
  line-height: 1.45;        /* readable line spacing for body text */
}

/* Main content expands to fill remaining space
   This is what pushes the footer to the bottom */
main{
  flex: 1;
}

section{
  max-width:1200px;
  margin:20px auto;
  padding:0 18px;
}

/* ==============================
   CARD / PANEL WRAPPER
   ============================== */

/* Reusable card container used throughout the site */
.maincard{
  background: var(--card);        /* white card background */
  border-radius: 12px; 
  margin:20px auto;/* rounded corners */
  padding: var(--card-pad);       /* consistent internal spacing */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08); /* soft elevation shadow */
}

/* ==============================
   MICRO INTERACTION ANIMATION
   ============================== */

/* Small bounce effect for icons or buttons */
@keyframes micro-bounce{
  0%   { transform: scale(1); }    /* initial size */
  40%  { transform: scale(1.12); } /* slight enlarge */
  70%  { transform: scale(.98); }  /* subtle shrink */
  100% { transform: scale(1); }    /* return to normal */
}

/* Accessibility: disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  @keyframes micro-bounce{
    from{ transform:none; }
    to  { transform:none; }
  }
}

/* ==============================
   TYPOGRAPHY
   ============================== */

/* Primary page headings */
h1{
  font-size: clamp(1.75rem, 2.25vw + 0.5rem, 2.75rem); /* responsive scaling */
  line-height: 1.08;          /* tight heading spacing */
  margin: 0 0 0.6em;          /* spacing below heading */
}

h2{
  font-size: clamp(1.25rem, 1.8vw + 0.4rem, 1.95rem);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h3{
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 0.4em;
}

/* Base paragraph and list text size */
p, li{
  font-size: 1rem;
}

/* ------------------------------
   HEADER
   ------------------------------ */
header.site-header{
  position: sticky;
  top: 0;
  z-index: var(--header-z);
  background: var(--card);
  border-bottom: 1px solid #eee;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  min-height: var(--header-height);
}

.header-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr; /* logo + nav */
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  min-height: var(--header-height);
}
.header-inner > * { min-width: 0; }

/* ------------------------------
   LOGO / TAGLINE
   ------------------------------ */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--gold-dark);
  transition: color 200ms ease;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.logo > span {
  display: inline-block;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-weight: 600;
  font-size: 0.95rem;
  color: inherit;
}
.logo-img {
  display: block;
  max-width: 160px;
  height: auto;
  transition: filter 220ms ease, transform 220ms ease;
}
.logo:hover, .logo:active { color: var(--gold); }
.logo:focus-visible {
  color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.16);
  border-radius: 8px;
}
.logo:hover .logo-img,
.logo:active .logo-img,
.logo:focus-visible .logo-img {
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(12deg) brightness(0.95);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .logo-img, .logo { transition: none !important; animation: none !important; }
}
@media (max-width: 599px) {
  .logo-img { max-width: 120px; }
  .logo > span { font-size: 0.9rem; }
}
.header-inner > .logo{ min-width: 48px; }

/* ==============================
   FOOTER
   ============================== */

footer{
  position: static;          /* normal document flow (not fixed) */

  background: var(--card);   /* matches card styling */

  border-top: 1px solid #eee; /* visual separation from content */

  /* Shadow appears above footer to lift it visually */
  box-shadow: 0 -6px 18px rgba(0,0,0,0.08);

  min-height: var(--footer-height); /* consistent footer height */

  padding: 6px 12px;         /* internal spacing */

  display: flex;             /* flex container */
  align-items: center;       /* vertical centering */
  justify-content: center;   /* horizontal centering */
}

/* Inner footer container to control width and layout */
.footer-inner{
  width: 100%;               /* fill available width */
  max-width: 1200px;         /* prevents overly wide footer */

  display: flex;             /* horizontal layout */
  align-items: center;       /* vertical alignment */
  justify-content: space-between; /* distributes items */

  gap: 12px;                 /* spacing between items */

  padding: 0;                /* reset defaults */
  margin: 0;

  flex-wrap: nowrap;         /* keep footer items on one line */

  line-height: 1;            /* compact footer text */

  color: #555;               /* softer footer text colour */

  font-size: calc(var(--footer-scale) * 0.9rem); /* reduced text size */
}

/* Footer links */
footer a{
  color: var(--gold-dark);   /* default link colour */
  text-decoration: none;     /* no underline */
  transition: color .22s;    /* smooth hover animation */
}

/* Hover and keyboard focus styling */
footer a:hover,
footer a:focus-visible{
  color: var(--gold);        /* brighter gold for interaction */
}