/**
 * Indiana Freemasons Brand Guidelines Stylesheet
 * Based on: INGL-BrandGuidelines-v0_02.pdf
 * Adapted from Scottish Rite NMJ "Not Just a Man. A Mason." Campaign
 * Version: 0.02 DRAFT | June 2020
 *
 * Organization: Grand Lodge of Indiana - Free & Accepted Masons
 * Council Oak Lodge #745 - South Bend, IN
 */

/* ===================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   =================================================================== */

:root {
  /* PRIMARY COLORS */
  --ingl-purple: #370C3E;           /* PANTONE 7659 C - Grand Lodge Primary */
  --lodge-blue: #343579;            /* PANTONE 2118 C - Lodge Primary */

  /* SECONDARY COLORS */
  --masonic-gold: #FFBB1C;          /* PANTONE 1235 C - Secondary */
  --masonic-maroon: #7D2248;        /* PMS 216 C - Secondary */

  /* NEUTRAL COLORS */
  --neutral-gray: #999999;          /* 40% Black */
  --neutral-white: #FFFFFF;         /* White */
  --neutral-black: #000000;         /* Black */

  /* TYPOGRAPHY */
  --font-brand: 'Charter', 'Charter BT', Georgia, serif;
  --font-secondary: 'Perpetua', Georgia, serif;
  --font-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* FONT WEIGHTS */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* SPACING */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
}

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

/* Brand Font - Charter Black */
.font-brand,
h1, h2, h3 {
  font-family: var(--font-brand);
  font-weight: var(--font-weight-black);
}

/* Secondary Font - Perpetua */
.font-secondary,
h4, h5, h6 {
  font-family: var(--font-secondary);
}

.font-secondary-regular {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-regular);
}

.font-secondary-bold {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-bold);
}

/* Body Font - Source Sans Pro */
body,
.font-body,
p, li, td, th, input, textarea, button {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
}

.font-body-semibold {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
}

/* Supporting Headlines */
.supporting-headline {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Main Headlines */
.headline {
  font-family: var(--font-brand);
  font-weight: var(--font-weight-black);
}

/* URL/Links */
.url-text {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-regular);
}

/* ===================================================================
   COLOR UTILITIES
   =================================================================== */

/* Background Colors - Primary */
.bg-ingl-purple { background-color: var(--ingl-purple); }
.bg-lodge-blue { background-color: var(--lodge-blue); }

/* Background Colors - Secondary */
.bg-masonic-gold { background-color: var(--masonic-gold); }
.bg-masonic-maroon { background-color: var(--masonic-maroon); }

/* Background Colors - Neutral */
.bg-neutral-gray { background-color: var(--neutral-gray); }
.bg-neutral-white { background-color: var(--neutral-white); }
.bg-neutral-black { background-color: var(--neutral-black); }

/* Text Colors - Primary */
.text-ingl-purple { color: var(--ingl-purple); }
.text-lodge-blue { color: var(--lodge-blue); }

/* Text Colors - Secondary */
.text-masonic-gold { color: var(--masonic-gold); }
.text-masonic-maroon { color: var(--masonic-maroon); }

/* Text Colors - Neutral */
.text-neutral-gray { color: var(--neutral-gray); }
.text-neutral-white { color: var(--neutral-white); }
.text-neutral-black { color: var(--neutral-black); }

/* Border Colors */
.border-ingl-purple { border-color: var(--ingl-purple); }
.border-lodge-blue { border-color: var(--lodge-blue); }
.border-masonic-gold { border-color: var(--masonic-gold); }
.border-masonic-maroon { border-color: var(--masonic-maroon); }

/* ===================================================================
   LOGO USAGE GUIDELINES
   =================================================================== */

/**
 * LOGO HIERARCHY:
 *
 * 1. INGL Seal & Logo (Arms)
 *    - Reserved for official communications to Freemasons
 *    - NOT for public-facing marketing materials
 *
 * 2. Indiana Public Mark (GL Square Logo)
 *    - USE THIS for public-facing content
 *    - Website, social media, materials viewed by non-Masons
 *    - Available variants: GL Square Logo, Mark & Slogan, Mark Only
 *
 * 3. S&C Standalone
 *    - For communications expected to remain within Indiana
 *
 * APPROVED COLOR COMBINATIONS:
 * - Blue (CMYK 99/89/00/07)
 * - Golden (CMYK 00/35/99/18)
 * - Maroon (CMYK 13/96/26/52)
 * - White Reverse (on dark backgrounds)
 *
 * LOGO RESTRICTIONS:
 * - Do NOT change colors to non-approved combinations
 * - Do NOT stretch, squish, or distort logos
 * - Do NOT rotate or flip logos
 * - Do NOT size logo elements separately
 * - ALWAYS scale logos proportionately as a unit
 * - Lodge seals must NOT be larger than campaign logo
 */

.logo-container {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.logo-container img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Logo sizing constraints */
.lodge-seal {
  max-width: 150px;
}

.campaign-logo {
  min-width: 150px;
}

/* ===================================================================
   CAMPAIGN BRANDING - "Not Just a Man. A Mason."
   =================================================================== */

.campaign-slogan {
  font-family: var(--font-secondary);
  font-style: italic;
  font-weight: var(--font-weight-bold);
  font-size: 1.25rem;
}

.campaign-slogan::after {
  content: '™';
  font-size: 0.75em;
  vertical-align: super;
  margin-left: 0.1em;
}

/* ===================================================================
   GRAPHIC ELEMENTS
   =================================================================== */

/**
 * Alternative Square & Compass Graphic
 * - Can be used as watermark or supporting element
 * - Available in Blue, Golden, and Gray
 * - Use semi-transparent for watermark effect
 */

.watermark-sc {
  opacity: 0.1;
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.graphic-element-sc {
  opacity: 0.25;
  mix-blend-mode: multiply;
}

/* ===================================================================
   BUTTON STYLES - BRAND STANDARD
   =================================================================== */

/**
 * BUTTON HIERARCHY (Indiana Freemasons Brand):
 *
 * 1. PRIMARY (btn-primary, btn-brand-primary)
 *    - Lodge Blue background (#343579) + white text
 *    - Use for: Primary CTAs, main actions, submit buttons
 *
 * 2. SECONDARY (btn-secondary, btn-brand-secondary)
 *    - Masonic Gold background (#FFBB1C) + dark text
 *    - Use for: Secondary actions, alternate CTAs
 *
 * 3. OUTLINE (btn-outline-primary, btn-brand-outline)
 *    - Blue border + blue text, transparent background
 *    - Use for: Tertiary actions, cancel buttons, ghost buttons
 *
 * NOTE: Bootstrap's default .btn-primary is overridden in site.css
 *       Use .btn-brand-primary for guaranteed brand-compliant blue buttons
 */

/* Brand Primary Button - Lodge Blue (Guaranteed) */
.btn-brand-primary {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  background-color: var(--lodge-blue);
  color: var(--neutral-white);
  border: 2px solid var(--lodge-blue);
  padding: 0.75rem 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.btn-brand-primary:hover,
.btn-brand-primary:focus,
.btn-brand-primary:focus-visible {
  background-color: #2a2b5f;
  border-color: #2a2b5f;
  color: var(--neutral-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(52, 53, 121, 0.3);
}

/* Brand Secondary Button - Masonic Gold (Guaranteed) */
.btn-brand-secondary {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  background-color: var(--masonic-gold);
  color: var(--neutral-black);
  border: 2px solid var(--masonic-gold);
  padding: 0.75rem 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.btn-brand-secondary:hover,
.btn-brand-secondary:focus,
.btn-brand-secondary:focus-visible {
  background-color: #FFA500;
  border-color: #FFA500;
  color: var(--neutral-black);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 187, 28, 0.3);
}

/* Brand Outline Button - Blue Border (Guaranteed) */
.btn-brand-outline {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  background-color: transparent;
  color: var(--lodge-blue);
  border: 2px solid var(--lodge-blue);
  padding: 0.75rem 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.btn-brand-outline:hover,
.btn-brand-outline:focus,
.btn-brand-outline:focus-visible {
  background-color: var(--lodge-blue);
  color: var(--neutral-white);
  border-color: var(--lodge-blue);
}

/* ===================================================================
   LAYOUT COMPONENTS
   =================================================================== */

/* Header styling */
.header-primary {
  background-color: var(--lodge-blue);
  color: var(--neutral-white);
  padding: var(--spacing-lg) var(--spacing-md);
}

.header-secondary {
  background-color: var(--neutral-white);
  color: var(--lodge-blue);
  border-bottom: 3px solid var(--masonic-gold);
  padding: var(--spacing-md);
}

/* Footer styling */
.footer-primary {
  background-color: var(--neutral-black);
  color: var(--neutral-white);
  padding: var(--spacing-xl) var(--spacing-md);
}

/* Navigation */
.nav-primary {
  background-color: var(--lodge-blue);
}

.nav-primary a {
  color: var(--neutral-white);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-primary a:hover {
  color: var(--masonic-gold);
}

/* Dropdown Menu Styling */
.nav-primary .dropdown-menu {
  background-color: var(--lodge-blue);
  border: none;
  border-radius: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  margin-top: 0;
  padding: 0.5rem 0;
}

.nav-primary .dropdown-item {
  color: var(--neutral-white);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
}

.nav-primary .dropdown-item:hover,
.nav-primary .dropdown-item:focus {
  background-color: rgba(255, 187, 28, 0.1);
  color: var(--masonic-gold);
}

.nav-primary .dropdown-toggle::after {
  margin-left: 0.5em;
}

/* ===================================================================
   CARD COMPONENTS
   =================================================================== */

.card-masonic {
  background-color: var(--neutral-white);
  border: 1px solid var(--neutral-gray);
  border-radius: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: var(--spacing-lg);
}

.card-masonic-header {
  font-family: var(--font-brand);
  font-weight: var(--font-weight-black);
  color: var(--lodge-blue);
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
}

.card-masonic-body {
  font-family: var(--font-body);
  color: var(--neutral-black);
  line-height: 1.6;
}

/* ===================================================================
   ADVERTISING TEMPLATE GUIDELINES
   =================================================================== */

/**
 * LANDSCAPE FORMAT ELEMENTS:
 * - Photography (customizable)
 * - Square & Compass Graphic (fixed)
 * - Supporting Headline (customizable - Perpetua Regular / All Caps)
 * - Headline (customizable - Charter Black)
 * - Lodge Seal/Logo (fixed - must not be larger than campaign logo)
 * - Campaign Logo (fixed)
 * - URL (customizable - Perpetua Regular)
 *
 * PORTRAIT FORMAT ELEMENTS:
 * - Same elements as landscape, different layout
 *
 * CLEAR SPACE REQUIREMENTS:
 * - Space between supporting headline and headline = height of lowercase letters
 * - Yellow guidelines = safe area from edges for print
 * - Elements in Magenta = fixed, do not alter
 * - Elements in Cyan = customizable
 */

.ad-template {
  position: relative;
  overflow: hidden;
}

.ad-supporting-headline {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  margin-bottom: var(--spacing-sm);
}

.ad-headline {
  font-family: var(--font-brand);
  font-weight: var(--font-weight-black);
  font-size: 3rem;
  line-height: 1.2;
  color: var(--neutral-white);
}

.ad-url {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-regular);
  font-size: 1rem;
  color: var(--neutral-white);
}

.ad-lodge-info {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

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

@media (max-width: 768px) {
  .ad-headline {
    font-size: 2rem;
  }

  .headline {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .ad-headline {
    font-size: 1.5rem;
  }

  .headline {
    font-size: 1.5rem;
  }
}

/* ===================================================================
   ACCESSIBILITY
   =================================================================== */

/* Ensure sufficient color contrast */
.text-on-blue {
  color: var(--neutral-white);
  background-color: var(--lodge-blue);
}

.text-on-gold {
  color: var(--neutral-black);
  background-color: var(--masonic-gold);
}

.text-on-maroon {
  color: var(--neutral-white);
  background-color: var(--masonic-maroon);
}

/* Focus states for keyboard navigation - Two-tone approach for visibility on all backgrounds */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid var(--lodge-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--masonic-gold);
}

/* ===================================================================
   PRINT STYLES
   =================================================================== */

/**
 * FILE FORMATS:
 * - VECTOR (preferred for print): .ai, .eps
 * - RASTER (web/broadcast): .psd, .jpg, .gif, .png, .tif
 * - Vector maintains quality when scaling
 */

@media print {
  .bg-lodge-blue {
    background-color: var(--lodge-blue) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .bg-masonic-gold {
    background-color: var(--masonic-gold) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .bg-ingl-purple {
    background-color: var(--ingl-purple) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}