/* ==========================================================================
   MARKUS MEDIA WEBSITE - MAIN STYLESHEET
   ========================================================================== 
   
   TABLE OF CONTENTS:
   1. Fonts
   2. CSS Variables (Color System, Typography, Layout)
   3. Base Styles & Resets
   4. Layout & Typography
   5. Accessibility
   6. Header & Navigation
   7. Buttons (CTA)
   8. Sections (Hero, Mission, Services, Portfolio, etc.)
   9. Cards (Base Styles)
   10. Blog Section
   11. Blog Post Article Styles
   12. Contact Section
   13. Footer
   14. Legal Pages
   15. Google Business Reviews
   16. Form Messages
   17. SEO Link Enhancements
   18. Internal Links
   19. Responsive Styles (Media Queries)
   20. Print Styles
   21. Reduced Motion Preferences
   
   ========================================================================== */

/* ==========================================================================
   Fonts (Bunny CDN loaded via index.html; fallback to system)
   ========================================================================== */
/* Local @font-face removed to avoid 404s; use Inter + Poppins from Bunny. */

/* ==========================================================================
     CSS Variables (--custom-properties)
     ========================================================================== */

:root {
  /* Color System */
  --color-primary: #77E789;
  --color-primary-hover: #85EB95; /* Lighter shade for hover states */
  --color-primary-active: #69DD79; /* Darker shade for active/pressed states */
  --color-secondary: #8030ff;
  --color-dark: #121212;
  --color-light: #1e1e1e;
  --color-gray-light: #e8eaec;
  --color-gray-medium: #b8babe; /* AAA contrast on #121212 (≥7:1) */
  --color-gray-dark: #333333;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-focus: #4dc9ff;

  /* Semantic State Colors */
  --color-success: #4caf50; /* Green for success messages */
  --color-error: #f44336; /* Red for error messages */
  --color-warning: #ff9800; /* Orange for warnings (if needed) */
  --color-info: #2196f3; /* Blue for info messages (if needed) */

  /* Legacy Aliases (for backward compatibility) */
  --primary: var(--color-primary);
  --secondary: var(--color-secondary);
  --dark: var(--color-dark);
  --light: var(--color-light);
  --gray: var(--color-gray-light);
  --gray-medium: var(--color-gray-medium);
  --gray-dark: var(--color-gray-dark);
  --white: var(--color-white);
  --black: var(--color-black);
  --primary-color: var(--color-dark); /* Used in inline styles */
  --text-color: var(--text-primary); /* Alias for text-primary */
  --text-muted: var(--text-secondary);

  /* Semantic Colors */
  --text-primary: var(--color-gray-light);
  --text-secondary: var(--color-gray-medium);
  --text-heading: var(--color-white);
  --text-subtle: var(--color-gray-medium);
  --link-color: var(--color-primary);
  --link-hover: var(--color-white);
  --background-main: var(--color-dark);
  --background-surface: var(--color-light);
  --border-color: rgba(255, 255, 255, 0.1);

  /* Accessibility */
  --focus-outline-color: var(--color-focus);
  --focus-outline-width: 3px;
  --focus-outline-offset: 2px;

  /* Typography (locally hosted via next/font) */
  --font-heading: var(--font-poppins), sans-serif;
  --font-body: var(--font-public-sans), sans-serif;
  --base-font-size: 16px;
  --line-height-body: 1.7;
  --line-height-heading: 1.3;
  --letter-spacing-body: 0.01em;
  --paragraph-spacing: 1.5rem;

  /* Layout */
  --container-max-width: 1400px;
  --container-padding: 0 2rem;
  --section-padding-vertical: 120px;
  --grid-gap: 40px;
  --card-padding: 40px;

  /* Borders & Shadows */
  --border-radius: 4px;
  --card-border-radius: 4px;
  --card-border: 1px solid var(--border-color);
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  --card-shadow-hover: 0 8px 12px rgba(0, 0, 0, 0.25);
  --button-shadow: 0 4px 12px var(--primary-glow);

  /* Transitions */
  --transition-duration: 0.3s;
  --transition-speed: 0.3s; /* Alias for consistency with existing code */
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* Component-specific */
  --card-bg: rgba(30, 30, 30, 0.6);
  --card-bg-hover: rgba(30, 30, 30, 0.8);
  --card-bg-inner: rgba(20, 20, 20, 0.8);

  /* Primary tint/glow (backgrounds, shadows — not for border strokes) */
  --primary-tint: rgba(119, 231, 137, 0.1);
  --primary-tint-strong: rgba(119, 231, 137, 0.12);
  --primary-glow: rgba(119, 231, 137, 0.2);
  /* Accent colors for mission/value icons */
  --color-accent-alt: #6366f1;
  --color-accent-tertiary: #f59e0b;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-dark) 0%, #1a3a3a 100%);
  --gradient-accent: linear-gradient(120deg, var(--primary-tint) 0%, rgba(155, 77, 255, 0.1) 100%);
  --gradient-text: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

/* ==========================================================================
     Base Styles & Resets
     ========================================================================== */

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

html {
  scroll-behavior: auto;
  font-size: var(--base-font-size);
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
  text-rendering: optimizeLegibility; /* Optional: Improve kerning/ligatures */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--background-main);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: var(--container-padding);
  width: 100%;
  position: relative; /* For absolutely positioned children like sparkles */
  z-index: 2; /* Above background effects */
  box-sizing: border-box;
}

/* ==========================================================================
     Typography
     ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.5rem, 8vw, 3.5rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(2rem, 5vw, 3rem);
}

h3 {
  font-size: clamp(1.5rem, 4vw, 1.8rem);
}

h4 {
  font-size: clamp(1.2rem, 3vw, 1.3rem);
}

p {
  margin-bottom: var(--paragraph-spacing);
}

a {
  color: var(--link-color);
  text-decoration: underline;
  transition: color var(--transition-speed) ease;
}

a:hover,
a:focus-visible {
  text-decoration: none;
}

strong {
  font-weight: 600; /* Slightly bolder than normal */
}

ul,
ol {
  padding-left: 20px; /* Standard indentation */
}

li {
  margin-bottom: 0.5rem;
}

/* Readability: limit line length for long prose */
.reading-width {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
     Accessibility
     ========================================================================== */

/* Visually hide elements but keep them accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Consistent Focus Styles for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
details > summary:focus-visible,
iframe:focus-visible,
[tabindex]:not([tabindex='-1']):focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  border-radius: 2px; /* Optional: slight rounding */
  box-shadow: 0 0 0 var(--focus-outline-width) rgba(77, 201, 255, 0.4); /* Softer glow */
}

/* Remove default outline when :focus-visible is supported but not triggered (e.g., mouse click) */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
     Buttons (CTA)
     ========================================================================== */

.cta-button {
  /* Base styles using variables */
  --button-bg: var(--color-primary);
  --button-text: var(--color-dark);
  --button-border: transparent;
  --button-shadow-color: rgba(119, 231, 137, 0.2);
  --button-scale: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.4;
  min-height: 48px; /* Accessibility */
  min-width: 48px; /* Accessibility */
  position: relative;
  isolation: isolate; /* For pseudo-elements */
  cursor: pointer;
  border: 2px solid var(--button-border);
  background: linear-gradient(
    135deg,
    var(--button-bg) 0%,
    color-mix(in srgb, var(--button-bg) 85%, white) 100%
  );
  color: var(--button-text);
  box-shadow:
    0 4px 12px var(--button-shadow-color),
    0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(0) scale(var(--button-scale));
  transition: all var(--transition-speed) var(--transition-timing);
}

/* Gloss effect */
.cta-button::before {
  content: '';
  position: absolute;
  inset: -1px; /* Slightly outside */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
  z-index: -1;
}

/* Subtle border effect */
.cta-button::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  border-radius: inherit;
  z-index: -2;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
}

.cta-button:hover {
  --button-scale: 1.03;
  --button-shadow-color: rgba(119, 231, 137, 0.3);
  box-shadow:
    0 6px 12px var(--button-shadow-color),
    0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px) scale(var(--button-scale));
  color: var(--color-dark); /* Ensure text remains dark on hover */
}

.cta-button:hover::before,
.cta-button:hover::after {
  opacity: 1;
}

.cta-button:active {
  --button-scale: 0.98;
  --button-shadow-color: rgba(119, 231, 137, 0.2);
  transform: translateY(1px) scale(var(--button-scale));
  box-shadow:
    0 2px 4px var(--button-shadow-color),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Primary: green (default, explicit for hero) */
.cta-button.primary {
  --button-bg: var(--color-primary);
  --button-text: var(--color-dark);
  --button-border: transparent;
  --button-shadow-color: rgba(119, 231, 137, 0.2);
}

.cta-button.primary:hover {
  --button-shadow-color: rgba(119, 231, 137, 0.35);
}

/* Secondary: outline, purple accent */
.cta-button.secondary {
  --button-bg: transparent;
  --button-text: var(--color-secondary);
  --button-border: var(--border-color);
  --button-shadow-color: transparent;
  background: transparent;
}

.cta-button.secondary:hover {
  --button-bg: var(--color-secondary);
  --button-text: var(--color-white);
  --button-border: transparent;
  background: var(--button-bg);
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(128, 48, 255, 0.25);
}

/* Icon support */
.cta-button svg {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-speed) ease;
  fill: currentColor; /* Inherit color */
}

.cta-button:hover svg {
  transform: translateX(4px);
}

/* ==========================================================================
     Sections
     ========================================================================== */

section {
  padding: var(--section-padding-vertical) 0;
  position: relative; /* For pseudo-elements and sparkles */
  overflow: hidden; /* Contain background effects */
  z-index: 1; /* Base layer */
}

/* Default dark background for sections, can be overridden */
section:not(.hero):not(.sparkles-section) {
  background-color: var(--background-main);
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title .highlight {
  display: block;
  font-size: clamp(1.8rem, 4vw, 2.5rem); /* Slightly smaller than h2 */
  margin-bottom: 0.5rem;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* Fallback for browsers that don't support -webkit-text-fill-color */
  font-weight: 800;
}

.section-title .subtitle {
  display: block;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-primary);
  font-weight: normal;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.25rem;
}

/* ==========================================================================
     Cards (Base Style)
     ========================================================================== */

/* Apply this class to card-like elements for consistent styling */
.card-base {
  background: var(--card-bg);
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
  backdrop-filter: blur(10px);
  border: var(--card-border);
  transition:
    transform var(--transition-speed) ease,
    border-color var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease;
  height: 100%; /* For equal height in grids */
  display: flex; /* Enable flexbox for children */
  flex-direction: column; /* Default direction */
}

.card-base:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: var(--card-shadow-hover);
}