/*
Theme Name: PEIBWA
Theme URI: https://lakedesign.co
Author: Lake Design
Author URI: https://lakedesign.co
Description: Custom WordPress theme for PEI Business Woman's Association
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peibwa
Tags: custom, block-theme, gutenberg
*/

/* 
=======================
Font Face Declarations
=======================
*/

@font-face {
	font-family: 'Muli';
	src: url('assets/fonts/Muli.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Muli';
	src: url('assets/fonts/Muli-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Muli';
	src: url('assets/fonts/Muli-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Muli';
	src: url('assets/fonts/Muli-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Muli';
	src: url('assets/fonts/Muli-ExtraLight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Muli';
	src: url('assets/fonts/Muli-ExtraLightItalic.ttf') format('truetype');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Muli';
	src: url('assets/fonts/Muli-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Muli';
	src: url('assets/fonts/Muli-Semi-BoldItalic.ttf') format('truetype');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Muli';
	src: url('assets/fonts/Muli-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Muli';
	src: url('assets/fonts/Muli-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* 
=======================
CSS Variables for Branding
=======================
PEIBWA Official Color Palette
*/

:root {
	/* Primary Colors */
	--color-primary: #093A80;
	--color-primary-dark: #062654;
	--color-primary-light: #9BBEF2;
	
	/* Secondary Colors */
	--color-secondary: #6F5EAE;
	--color-secondary-dark: #34285f;
	--color-secondary-light: #CABFE4;
	--color-secondary-lighter: #e4def1;
	
	/* Accent Colors */
	--color-accent: #115D6A;
	--color-accent-light: #A2D2DF;
	--color-lavender: #CABFE4;
	
	/* Neutral Colors */
	--color-white: #fff;
	--color-black: #272F38;
	--color-background: #F3EDE6;
	--color-gray-50: #FCF9F7;
	--color-gray-100: #f3f4f6;
	--color-gray-200: #e5e7eb;
	--color-gray-300: #d1d5db;
	--color-gray-400: #9ca3af;
	--color-gray-500: #6b7280;
	--color-gray-600: #4b5563;
	--color-gray-700: #374151;
	--color-gray-800: #272F38;
	--color-gray-900: #1a1f26;
	
	/* Typography - Muli */
	--font-primary: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--font-secondary: 'Muli', Georgia, 'Times New Roman', serif;
	--font-mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	
	/* Font Sizes */
	--font-size-xs: 0.75rem;     /* 12px */
	--font-size-sm: 0.875rem;    /* 14px */
	--font-size-base: 1rem;      /* 16px */
	--font-size-lg: 1.125rem;    /* 18px */
	--font-size-xl: 1.25rem;     /* 20px */
	--font-size-2xl: 1.5rem;     /* 24px */
	--font-size-3xl: 1.875rem;   /* 30px */
	--font-size-4xl: 2.25rem;    /* 36px */
	--font-size-5xl: 3rem;       /* 48px */
	--font-size-6xl: 3.75rem;    /* 60px */
	
	/* Spacing */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	--spacing-2xl: 4rem;
	--spacing-3xl: 6rem;
	
	/* Breakpoints (for reference in media queries) */
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1536px;
	
	/* Other */
	--border-radius: 0.375rem;
	--transition-speed: 0.3s;
	--max-width: 1280px;
}

/* 
=======================
Base Styles
=======================
*/

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--color-black);
	background-color: var(--color-background);
	padding: 0;
	font-weight: 300;
}

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

h1, h2, h3, h4, h5, h6 {
	color: var(--color-gray-900);
	margin-bottom: var(--spacing-sm);
	font-weight: 700;
	letter-spacing: -0.0375rem;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-speed);
}

a:hover {
	color: var(--color-primary-dark);
}

/* 
=======================
Layout Utilities
=======================
*/

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	overflow: visible;
}

.site-footer {
	padding: var(--spacing-lg) 0;
}

.site-main {
	min-height: 60vh;
}

/* 
=======================
WordPress Core Styles
=======================
*/

.alignleft {
	float: left;
	margin-right: var(--spacing-md);
	margin-bottom: var(--spacing-sm);
}

.alignright {
	float: right;
	margin-left: var(--spacing-md);
	margin-bottom: var(--spacing-sm);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: var(--font-size-sm);
	color: var(--color-gray-600);
	margin-top: var(--spacing-xs);
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-gray-100);
	border-radius: var(--border-radius);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: var(--color-primary);
	display: block;
	font-size: var(--font-size-sm);
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}