/*
Theme Name: MGHSOGAO Ontario
Text Domain: mghsogao-ontario
Description: Custom WordPress theme for the Methodist Girls’ High School Old Girls Association Ontario, Canada Chapter, using the official purple, green and white brand palette.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

/* This file holds the WordPress theme header (above) plus truly global
 * rules only. Tailwind handles everything else.
 *
 * - Design tokens live in theme.css's @theme block.
 * - Prose + form styles live in presets.css.
 * - Layout, color, typography utilities come from Tailwind v4.
 *
 * Do NOT add component classes here (.btn-primary, .card, etc.). Use
 * Tailwind utilities in templates instead.
 */

html {
	scroll-behavior: smooth;
}

/* Draft-preview fallback styles. These keep the MGHSOGAO preview fully visible
 * even when the Tailwind browser runtime or a browser extension blocks CDN CSS. */
html, body { min-height: 100%; }
body {
	margin: 0;
	background: #fff !important;
	color: #222 !important;
	font-family: "Source Sans 3", Arial, sans-serif;
	visibility: visible !important;
	opacity: 1 !important;
	display: flex !important;
	flex-direction: column;
}
header, main, footer { visibility: visible !important; opacity: 1 !important; }
main { flex: 1 0 auto; display: block !important; }
header { background: rgba(255,255,255,.97); border-bottom: 1px solid #E3D9E7; position: sticky; top: 0; z-index: 999; }
footer { background: #37113D; color: #fff; margin-top: 4rem; }
.site-shell { width: min(1180px, calc(100% - 2rem)); margin-left: auto; margin-right: auto; }
h1,h2,h3,h4 { font-family: "Cormorant Garamond", Georgia, serif; }
a { text-decoration: none; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.items-center { align-items: center; }
.items-start { align-items: start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: .25rem; }
.gap-3 { gap: .75rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }
.p-9 { padding: 2.25rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.pb-8 { padding-bottom: 2rem; }
.rounded-full { border-radius: 9999px; }
.rounded-2xl { border-radius: 1rem; }
.text-primary { color: #7D298B; }
.text-secondary { color: #008C43; }
.text-muted { color: #666; }
.text-white { color: #fff; }
.bg-white { background: #fff; }
.bg-soft { background: #F4EFF7; }
.bg-primary { background: #7D298B; }
.bg-secondary { background: #008C43; }
.border { border: 1px solid #E3D9E7; }
.border-b { border-bottom: 1px solid #E3D9E7; }
.font-bold { font-weight: 700; }
.font-serif { font-family: "Cormorant Garamond", Georgia, serif; }
.text-sm { font-size: .875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.5rem; }
.text-5xl { font-size: 3.5rem; }
.leading-relaxed { line-height: 1.7; }
.leading-tight { line-height: 1.15; }
.uppercase { text-transform: uppercase; }
.eyebrow { letter-spacing:.18em; text-transform:uppercase; font-size:.75rem; font-weight:700; color:#008C43; }
.hero-title { font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(3.1rem,8vw,6.7rem); line-height:.88; font-weight:700; }
.section-title { font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(2.25rem,5vw,4rem); line-height:1; font-weight:700; }
.brand-rule { width:74px; height:4px; background:linear-gradient(90deg,#7D298B 0 68%,#008C43 68% 100%); border-radius:99px; }
.paper-card { background:#fff; border:1px solid #E3D9E7; box-shadow:0 18px 50px rgba(55,17,61,.07); }
.brand-button { display:inline-flex; align-items:center; justify-content:center; padding:.85rem 1.25rem; border-radius:999px; font-weight:700; }
.brand-button-primary { background:#7D298B; color:#fff; }
.brand-button-secondary { background:#008C43; color:#fff; }
.brand-button-ghost { border:1px solid #7D298B; color:#7D298B; background:#fff; }
.mghs-pattern { background-image:radial-gradient(circle at 20% 20%,rgba(211,197,255,.28) 0 2px,transparent 2px),linear-gradient(135deg,rgba(125,41,139,.04),rgba(0,140,67,.04)); background-size:28px 28px,auto; }
.heritage-panel { position:relative; overflow:hidden; }
.heritage-panel:before { content:"1880"; position:absolute; right:-.05em; bottom:-.22em; font-family:"Cormorant Garamond",serif; font-size:clamp(7rem,18vw,15rem); font-weight:700; color:rgba(125,41,139,.06); line-height:1; pointer-events:none; }
.nav-link { color:#3d3340; font-weight:600; }
.nav-link:hover { color:#7D298B; }
.footer-link { color:#e7ddea; }
.footer-link:hover { color:#fff; }
.min-h-\[74vh\] { min-height: 74vh; }
.min-h-\[420px\] { min-height: 420px; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.w-full { width: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
@media (min-width: 640px) {
	.sm\:block { display: block; }
	.sm\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1024px) {
	.lg\:flex { display: flex; }
	.lg\:hidden { display: none; }
	.lg\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.lg\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
	.lg\:grid-cols-\[1\.15fr_\.85fr\] { grid-template-columns: 1.15fr .85fr; }
	.lg\:grid-cols-\[\.8fr_1\.2fr\] { grid-template-columns: .8fr 1.2fr; }
	.lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
	.lg\:p-12 { padding: 3rem; }
}