/* Fonts are loaded in _Layout.cshtml with font-display: swap for better performance */

:root {
  /* Color Palette */
  --color-primary: #1A2A44;
  --color-secondary: #006D77;
  --color-accent: #F4B1A3;
  --color-text: #333333;
  --color-muted: #F5F5F5;
  
  /* Breakpoints */
  --bp-xs: 375px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  
  /* Typography Scale */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.5rem;     /* 24px */
  --font-size-xl: 2rem;       /* 32px */
  --font-size-xxl: 3rem;      /* 48px */
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Spacing Scale (8px base unit) */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-xxl: 4rem;    /* 64px */
}

html {
  height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--color-text);
  background-color: var(--color-muted);
  font-family: 'Open Sans', sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: var(--color-primary);
  line-height: var(--line-height-tight);
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

h1 { font-size: var(--font-size-xxl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p {
  margin-bottom: var(--space-sm);
}

a {
  color: var(--color-secondary);
  text-decoration: underline;
}

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

/* Skip Navigation Link for Accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-muted);
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Enhanced Focus Indicators */
*:focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Focus visible for keyboard navigation */
*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--color-muted);
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--color-accent);
}

.theme-bg-primary { background-color: var(--color-primary) !important; }
.theme-bg-secondary { background-color: var(--color-secondary) !important; }
.theme-bg-accent { background-color: var(--color-accent) !important; }
.theme-bg-muted { background-color: var(--color-muted) !important; }

.theme-text { color: var(--color-text) !important; }
.theme-text-primary { color: var(--color-primary) !important; }
.theme-text-secondary { color: var(--color-secondary) !important; }
.theme-text-accent { color: var(--color-accent) !important; }
.theme-text-muted { color: var(--color-muted) !important; }

.card {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-muted);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.content-section {
  background-color: var(--color-muted);
  border: 1px solid var(--color-secondary);
  padding: var(--space-lg);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: var(--space-md);
}

.btn-accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
  padding: var(--space-xs) var(--space-sm);
  transition: opacity 0.2s ease, transform 0.2s ease;
  /* Ensure minimum touch target size for mobile accessibility */
  min-height: 44px;
  min-width: 44px;
}

.btn-accent:hover {
  background-color: var(--color-accent);
  opacity: 0.9;
  color: var(--color-primary);
  transform: translateY(-2px);
}

.btn-accent:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-accent:active {
  transform: translateY(0);
}

.text-accent { color: var(--color-accent) !important; }

.group-highlight {
  background-color: rgba(244, 177, 163, 0.2);
}

.timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.timeline-card {
  position: relative;
  flex: 1 1 100%;
  max-width: 600px;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline-card.is-visible {
  opacity: 1;
  transform: none;
}

.timeline-card.highlight .card {
  border: 2px solid var(--color-accent);
  box-shadow: 0 4px 12px rgba(244, 177, 163, 0.3);
}

.timeline-card.highlight .card-title {
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .timeline-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn-accent {
    transition: none;
  }
  .card {
    transition: none;
  }
  .quick-links-grid .card {
    transition: none;
  }
}

/* Responsive Typography */
@media (max-width: calc(var(--bp-sm) - 1px)) {
  h1 { font-size: var(--font-size-xl); }      /* 32px on mobile */
  h2 { font-size: var(--font-size-lg); }      /* 24px on mobile */
  h3 { font-size: var(--font-size-md); }      /* 18px on mobile */
}

@media (min-width: var(--bp-lg)) {
  body { font-size: var(--font-size-md); }    /* 18px on large screens */
}

@media (min-width: var(--bp-sm)) {
  .timeline {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .timeline-card {
    flex: 1 1 calc(50% - 2rem);
    max-width: calc(50% - 2rem);
  }
  .timeline-arrow {
    display: none;
  }
}

@media (min-width: var(--bp-md)) {
  .timeline-card {
    flex: 1 1 calc(33.333% - 2rem);
    max-width: calc(33.333% - 2rem);
  }
}

@media (min-width: var(--bp-lg)) {
  .timeline-card {
    flex: 1 1 calc(25% - 2rem);
    max-width: calc(25% - 2rem);
  }
}

/* Generic parallax hero section */
.parallax-hero {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

@media (max-width: calc(var(--bp-sm) - 1px)) {
  .parallax-hero {
    background-attachment: scroll;
  }
}

/* Home page hero */
#hero {
  background-color: var(--color-primary);
}

/* Venue page */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 42, 68, 0.5);
  color: var(--color-muted);
  text-align: center;
  padding: 0 1rem;
}

.amenity-card img {
  width: 2rem;
  height: 2rem;
}

.quick-link-icon {
  width: 2rem;
  height: 2rem;
}

.quick-links-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.quick-links-grid .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.quick-links-grid .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.quick-links-grid .card:hover .quick-link-icon {
  filter: brightness(1.2);
}

@media (min-width: var(--bp-xs)) {
  .quick-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: var(--bp-sm)) {
  .quick-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: var(--bp-md)) {
  .quick-links-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: var(--bp-lg)) {
  .quick-links-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Ensure timeline images maintain aspect ratio without oversizing */
.timeline-img {
  display: block;
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.timeline-arrow {
  width: var(--space-md);
  height: var(--space-md);
  display: block;
  margin: var(--space-xs) auto;
}

.timeline-card.highlight .card {
  border: 3px solid var(--color-accent);
}

/* LogOn page */
.logon-wrapper {
  min-height: 60vh;
}

.logon-card {
  max-width: 400px;
  width: 100%;
}

/* Home page photo carousel */
#photoCarousel {
  max-height: 400px;
  overflow: hidden;
}

#photoCarousel .carousel-item {
  justify-content: center;
  align-items: center;
  height: 100%;
}

#photoCarousel .carousel-item.active {
  display: flex;
}

#photoCarousel .carousel-item img {
  max-height: 400px;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* Admin guest list responsive table */
.guest-table {
  width: 100%;
}

@media (max-width: calc(var(--bp-sm) - 1px)) {
  .guest-table thead {
    display: none;
  }
  .guest-table,
  .guest-table tbody,
  .guest-table tr,
  .guest-table td {
    display: block;
    width: 100%;
  }
  .guest-table tr {
    margin-bottom: 1rem;
    border: 1px solid var(--color-secondary);
    border-radius: 4px;
    background-color: var(--color-muted);
  }
  .guest-table td {
    display: flex;
    padding: 0.5rem;
    /* Ensure touch-friendly spacing on mobile */
    min-height: 44px;
    align-items: center;
  }
  .guest-table td::before {
    content: attr(data-label);
    font-weight: 700;
    width: 40%;
    flex-shrink: 0;
    position: sticky;
    left: 0;
    background-color: var(--color-muted);
  }
  .guest-table td button {
    /* Ensure buttons in mobile tables are touch-friendly */
    min-height: 44px;
    min-width: 44px;
  }
}

/* ========================================
   Phase 3: Responsive Design Excellence
   ======================================== */

/* Mobile Touch Targets - Ensure all interactive elements are accessible */
.btn,
.nav-link,
.form-check-input,
.form-select,
.carousel-control-prev,
.carousel-control-next {
  min-height: 44px;
  min-width: 44px;
}

/* Form inputs optimized for mobile */
.form-control,
.form-select {
  min-height: 44px;
  font-size: var(--font-size-base);
}

/* Better mobile checkbox and radio button targets */
.form-check {
  padding-left: 2rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.form-check-input {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -2rem;
  flex-shrink: 0;
}

.form-check-label {
  padding-left: 0.5rem;
  cursor: pointer;
}

/* Mobile: Optimize form layout for better usability */
@media (max-width: calc(var(--bp-sm) - 1px)) {
  /* Stack form elements vertically on mobile */
  .row.g-3 > [class*="col-"] {
    margin-bottom: var(--space-sm);
  }
  
  /* Increase form control spacing */
  .form-control,
  .form-select {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 0.75rem;
  }
  
  /* Make buttons full width on mobile for easier tapping */
  .btn-accent,
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  
  /* Optimize button groups on mobile */
  .d-flex.justify-content-between {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .d-flex.justify-content-between > * {
    width: 100%;
  }
  
  /* Ensure navbar toggler is touch-friendly */
  .navbar-toggler {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
  }
  
  /* Improve mobile carousel controls */
  .carousel-control-prev,
  .carousel-control-next {
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(26, 42, 68, 0.5);
    border-radius: 50%;
  }
  
  .carousel-control-prev {
    left: 10px;
  }
  
  .carousel-control-next {
    right: 10px;
  }
  
  /* Optimize content sections for mobile */
  .content-section {
    padding: var(--space-md);
    margin-left: var(--space-xs);
    margin-right: var(--space-xs);
  }
  
  /* Improve mobile card spacing */
  .card {
    margin-bottom: var(--space-sm);
  }
  
  /* Better mobile navigation */
  .navbar-nav {
    padding-top: var(--space-sm);
  }
  
  .nav-item {
    padding: 0 !important;
  }
  
  .nav-link {
    padding: var(--space-sm) var(--space-md);
    display: block;
  }
}

/* Tablet Optimization: 768px - 1023px */
@media (min-width: var(--bp-sm)) and (max-width: calc(var(--bp-md) - 1px)) {
  /* Optimize grid layouts for tablet */
  .quick-links-grid {
    gap: var(--space-md);
  }
  
  /* Ensure comfortable reading width on tablets */
  .content-section {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Two-column form layout on tablet */
  .row.g-3 > .col-md-4,
  .row.g-3 > .col-md-3 {
    flex: 0 0 auto;
    width: 50%;
  }
  
  /* Optimize timeline for tablet */
  .timeline-card {
    flex: 1 1 calc(50% - 2rem);
    max-width: calc(50% - 2rem);
  }
}

/* Desktop Enhancements: 1024px and up */
@media (min-width: var(--bp-md)) {
  /* Utilize larger screen real estate */
  .container {
    max-width: 1200px;
  }
  
  /* Prevent content from becoming too wide */
  .content-section {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Multi-column layouts for better desktop experience */
  .quick-links-grid {
    gap: var(--space-lg);
  }
  
  /* Enhanced hover interactions on desktop */
  .card:hover {
    transform: translateY(-4px);
  }
  
  .quick-links-grid .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }
  
  /* Better spacing for desktop forms */
  .form-control,
  .form-select {
    padding: 0.5rem 0.75rem;
  }
}

/* Large Desktop: 1280px and up */
@media (min-width: var(--bp-lg)) {
  /* Optimize for large screens */
  .container {
    max-width: 1280px;
  }
  
  /* Use full timeline card width on very large screens */
  .timeline-card {
    flex: 1 1 calc(25% - 2rem);
    max-width: calc(25% - 2rem);
  }
  
  /* Larger typography for better readability */
  body {
    font-size: var(--font-size-md);
  }
}

/* Tablet Portrait and Landscape Optimization */
@media (min-width: var(--bp-sm)) and (max-width: calc(var(--bp-md) - 1px)) and (orientation: landscape) {
  /* Optimize for landscape tablet viewing */
  .content-section {
    padding: var(--space-lg) var(--space-xl);
  }
  
  .navbar-nav {
    gap: var(--space-sm);
  }
}

/* Cross-Browser Compatibility: Vendor Prefixes */
.card,
.btn-accent,
.timeline-card,
.quick-links-grid .card {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.parallax-hero {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Ensure flexbox compatibility */
.timeline,
.quick-links-grid {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

/* Grid compatibility for older browsers */
@supports not (display: grid) {
  .quick-links-grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .quick-links-grid > * {
    flex: 1 1 calc(50% - var(--space-md));
  }
}

/* Print Styles for Better Documentation */
@media print {
  /* Hide navigation and footer when printing */
  header,
  footer,
  .skip-link,
  .navbar {
    display: none !important;
  }
  
  /* Optimize content for print */
  body {
    background-color: white;
    color: black;
    font-size: 12pt;
  }
  
  .content-section,
  .card {
    border: 1px solid #000;
    page-break-inside: avoid;
  }
  
  /* Ensure links are visible in print */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  /* Expand collapsed content */
  .collapse {
    display: block !important;
    height: auto !important;
  }
}

/* High DPI Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimize for retina displays */
  .timeline-img,
  .card img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Reduced Motion Compliance - Comprehensive */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .carousel-inner > .carousel-item {
    transition: none;
  }
}