/*
Theme Name: St Peters Indooroopilly (BB Child)
Theme URI: https://www.stpeters.qld.edu.au
Description: Child theme of Beaver Builder Theme for St Peters Lutheran College — Indooroopilly Campus.
Author: Neoterik
Author URI: https://www.neoterik.com.au
Version: 1.0.0
template: bb-theme
*/

/* ============================================================
   St Peters — Design Tokens
   Custom modules and saved rows reference these via var(--stp-*)
   Source of truth: StPeters/website-concepts design system
   ============================================================ */
:root {
  /* Brand colours */
  --stp-maroon-700: #730D28;
  --stp-maroon-800: #5a0a1f;
  --stp-maroon-900: #3f0716;
  --stp-maroon-100: #f7e7eb;
  --stp-gold-100: #f3ede0;
  --stp-gold-200: #e7d9bf;
  --stp-gold-300: #d7bf97;
  --stp-gold-400: #c4a676;  /* lighter — eyebrows on dark bg, decorative accents, hover states */
  --stp-gold-500: #b8925f;  /* concept primary gold — CTA backgrounds, prominent eyebrows on light bg */
  --stp-gold-600: #aa7d53;  /* darker, for hover-on-light-bg variants */
  --stp-gold-700: #8d6546;

  /* Neutrals */
  --stp-cream: #f5f0e8;
  --stp-ink: #1a1a1a;
  --stp-ink-soft: #4a4a4a;
  --stp-line: #e6e1d8;

  /* Typography */
  --stp-font-heading: 'Neuton', Georgia, serif;
  --stp-font-body: 'Open Sans', -apple-system, system-ui, sans-serif;

  /* Layout */
  --stp-max: 1280px;
  --stp-radius: 0;

  /* Motion */
  --stp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stp-dur: 600ms;
  --stp-dur-fast: 280ms;
}

/* Reusable scroll-reveal animations (driven by js/scroll-animate.js
   IntersectionObserver — adds .is-visible when the element enters viewport) */
.stp-fade-up,
.stp-fade-left,
.stp-fade-right {
  opacity: 0;
  transition: opacity var(--stp-dur) var(--stp-ease),
              transform var(--stp-dur) var(--stp-ease);
}
.stp-fade-up    { transform: translateY(24px); }
.stp-fade-left  { transform: translateX(-24px); }
.stp-fade-right { transform: translateX(24px); }
.stp-fade-up.is-visible,
.stp-fade-left.is-visible,
.stp-fade-right.is-visible {
  opacity: 1;
  transform: none;
}
.stp-delay-100 { transition-delay: 100ms; }
.stp-delay-200 { transition-delay: 200ms; }
.stp-delay-300 { transition-delay: 300ms; }
.stp-delay-400 { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
  .stp-fade-up, .stp-fade-left, .stp-fade-right { opacity: 1; transform: none; transition: none; }
}

/* Headings — pull from BB Theme but lock weight + spacing */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--stp-font-heading);
  letter-spacing: 0.5px;
  color: var(--stp-maroon-700);
}
h1 { letter-spacing: 1px; }

/* Body links — gold underline on hover */
a { color: var(--stp-maroon-700); transition: color var(--stp-dur-fast) var(--stp-ease); }
a:hover { color: var(--stp-gold-500); }

/* Buttons — match React concept primary CTA */
.fl-button-wrap .fl-button,
.fl-button {
  font-family: var(--stp-font-body);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 14px;
  padding: 14px 28px;
  transition: background-color var(--stp-dur-fast) var(--stp-ease),
              color var(--stp-dur-fast) var(--stp-ease);
}

/* BB Theme sets html { font-size: 10px } in base.min.css for designer convenience
   (1rem = 10px). This breaks every rem-based size I've used (e.g. max-width: 42rem
   becomes 420px, not 672px). BB Theme's own typography is all px, so restoring root
   to standard 16px is safe and makes my rem values resolve as expected. */
html { font-size: 16px; }

/* BB Theme hardcodes .fl-row-fixed-width to 1100px in less/blocks.less.
   Concept uses Tailwind max-w-7xl = 1280px. Override globally to match. */
.fl-row-fixed-width,
.fl-page-content .container { max-width: 1280px; }

/* BB applies a default 20px margin to every .fl-module-content (per-module breathing room).
   Our STP section modules manage their own padding and need to bleed edge-to-edge, so
   zero the wrapper margin for any module in our namespace. The 2-col override below
   re-adds horizontal gap where needed (it's more specific so it wins). */
[class*="fl-module-stp-"] > .fl-module-content { margin: 0; }

/* Concept 2-col grids use gap-12 lg:gap-20 (48px → 80px). BB's default
   .fl-module-content margin of 20px gives only 40px between columns.
   Add extra inner margin so columns of an exact-2-col row get 48/80px gap.
   Scoped via :has() so 3-col / 4-col layouts are unaffected. */
.fl-col-group:has(> .fl-col:nth-child(2):last-child) > .fl-col:first-child .fl-module > .fl-module-content {
  margin-right: 24px; /* default 20 + 24 = 44 ≈ 48 with both sides */
}
.fl-col-group:has(> .fl-col:nth-child(2):last-child) > .fl-col:last-child .fl-module > .fl-module-content {
  margin-left: 24px;
}
@media (min-width: 1024px) {
  .fl-col-group:has(> .fl-col:nth-child(2):last-child) > .fl-col:first-child .fl-module > .fl-module-content {
    margin-right: 40px; /* desktop: 20 + 40 + 40 + 20 = 80 between contents */
  }
  .fl-col-group:has(> .fl-col:nth-child(2):last-child) > .fl-col:last-child .fl-module > .fl-module-content {
    margin-left: 40px;
  }
}