/* =========================================
   GLOBAL STYLES (global.css)
   Requires: theme.css
========================================= */

/* Import shared component styles (carousel navigation arrows, etc.) */
@import url("/css/components/carousel.css");
@import url("/css/components/tooltip.css");

/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@400;500;600&font-display=swap");

/* Tabler Icons fallback (icons are normally loaded via CDN; this is a safety net) */
.ti {
  font-family: "tabler-icons" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  speak: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}

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

html {
  scroll-behavior: smooth;
}

/* --- Base Body Styling --- */
body {
  font-family: var(--font-body);
  background-color: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
}

/* --- Typography --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: var(--text-main);
}

img {
  width: auto;
  height: auto;
}

/* --- Buttons --- */
.btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}
.btn-primary:hover {
  background-color: #c92a37;
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: #111;
}
.btn-secondary:hover {
  background-color: #e58d14;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}
.btn-outline:hover {
  background-color: var(--color-accent);
  color: #111;
}

.break-str {
  font-size: 100%;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

/* --- Global Navbar --- */
.navbar {
  position: fixed;
  top: 0;
  max-width: 100vw;
  width: 100%;
  background-color: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xl);
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Light theme: keep the navbar dark so the nav links remain readable, but
   use a stronger contrast against the light page background. */
[data-theme="light"] .navbar {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .nav-links a {
  color: var(--text-main) !important;
}
[data-theme="light"] .nav-links a:hover {
  color: var(--color-primary) !important;
}
[data-theme="light"] .navbar .logo {
  color: var(--color-primary) !important;
}
[data-theme="light"] .menu-toggle .bar {
  background-color: var(--color-primary) !important;
}
[data-theme="light"] .nav-links a {
  color: var(--text-main) !important;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.logo img {
  height: 50px;
  width: auto;
  border-radius: 50%;
}

.navbar .logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 1px;
  flex-shrink: 1;
  min-width: 0;
}

.nav-links {
  display: flex;
  gap: var(--spacing-lg);
}

.nav-links a {
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  color: #f8f9fa;
  position: relative;
  padding: 4px 0;
}

.nav-links a:hover {
  color: var(--color-secondary);
}

/* Active page link in the navbar */
.nav-links a.active {
  color: var(--color-secondary) !important;
  font-weight: 700;
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--color-primary);
}

[data-theme="light"] .nav-links a.active {
  color: var(--color-primary) !important;
}

[data-theme="light"] .nav-links a.active::after {
  background: var(--color-primary) !important;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5) !important;
}

/* --- Global Footer --- */
.footer {
  background-color: #151b2b; /* Hardcoded dark theme color */
  color: #f8f9fa; /* Hardcoded light text */
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  border-top: 2px solid var(--color-primary);
  margin-top: var(--spacing-xl);
  position: relative;
}

/* Footer colors are intentionally fixed for both themes: the dark footer with
   light text is part of the site's brand identity and stays the same regardless
   of the active theme, so it never blends in with the page background. */

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.footer-logo {
  color: var(--color-primary);
  font-size: 1.25rem;
}

.footer-bottom {
  margin-top: var(--spacing-lg);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Utility Classes --- */
/* The layout requirement you mentioned: rows on PC, columns on Mobile */
.responsive-grid {
  display: flex;
  flex-direction: row; /* Row by default for larger screens */
  gap: var(--spacing-lg);
  width: 100%;
}

.responsive-grid > * {
  flex: 1; /* Makes children take equal width */
}

/* --- Hamburger Menu Base Styles --- */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  z-index: 1001; /* Keeps it above the sliding menu */
  padding: 6px;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  line-height: 1;
}

.menu-toggle .bar {
  width: 25px;
  height: 3px;
  background-color: var(--color-accent); /* Festive Gold */
  transition: all 0.3s ease-in-out;
  border-radius: 3px;
  display: block;
}

/* --- Tablet/Compact Navbar (<=1100px): collapse inline links + theme switch
   into a hamburger-driven dropdown panel --- */
@media (max-width: 1100px) {
  .navbar {
    padding: var(--spacing-md) var(--spacing-lg);
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
  }

  .logo p {
    font-size: 70%;
  }

  .menu-toggle {
    display: flex;
  }

  /* Hide the inline links/theme-switch and turn the panel into a
     full-width dropdown that slides down from the navbar. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--navbar-dropdown-bg); /* Theme-aware panel background */
    border-top: 1px solid var(--navbar-dropdown-border);
    backdrop-filter: blur(15px);
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl) 0;
    gap: var(--spacing-lg);
    border-bottom: 2px solid var(--color-primary);

    /* Hidden by default; slides in when .is-open is added by JS */
    transform: translateY(-150%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.4s ease,
      opacity 0.4s ease,
      visibility 0s linear 0.4s;
    z-index: 999;
  }

  /* When JavaScript adds the 'is-open' class, the menu slides in */
  .nav-links.is-open {
    transform: translateY(0);
    opacity: 0.99;
    visibility: visible;
    pointer-events: auto;
    transition:
      transform 0.4s ease,
      opacity 0.4s ease,
      visibility 0s linear 0s;
  }

  /* Animate Hamburger into an 'X' */
  .menu-toggle.is-active .bar:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-toggle.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* --- Mobile Responsiveness Adjustments (narrow phones only) --- */
@media (max-width: 768px) {
  /* Apply Column Layout for Mobile */
  .responsive-grid {
    flex-direction: column;
  }

  .break-str {
    font-size: 60%;
  }

  /* -----------------------------------
       9. FOOTER MOBILE FIXES
       ----------------------------------- */

  .footer {
    /* Adds a safety bumper of padding on the left and right */
    padding: var(--spacing-lg) 15px;
    overflow-x: hidden;
  }

  .footer p,
  .footer a,
  .footer span {
    /* Allows the email address and social links to break naturally */
    white-space: normal;
    overflow-wrap: break-word;

    /* 'break-word' is smarter than 'break-all' for footers.
           It only chops a word if it's longer than the whole screen (like an email). */
    word-break: break-word;

    /* Gives the text some breathing room when it stacks on multiple lines */
    line-height: 1.6;
  }
}

/* --- Navbar wordmark wrap (tablet and below) --- */
@media (max-width: 1200px) {
  .logo p {
    font-size: 70%;
    max-width: 13ch;
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* --- Desktop: prevent wordmark from wrapping at wide widths --- */
@media (min-width: 1201px) {
  .navbar .logo {
    white-space: nowrap;
  }
}

/* --- Emoji & Accessibility Utilities --- */
/* Visually hidden element but 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: 0;
}

/* Decorative emoji icons - hidden from screen readers */
.emoji-icon {
  display: inline-block;
  font-size: inherit;
  line-height: 1;
}

/* Warning emoji styling */
.emoji-warning {
  display: inline-block;
  margin: 0 0.25em;
  font-size: 1.1em;
  vertical-align: middle;
}

/* --- Back to Top Button --- */
.back-to-top {
  position: fixed;
  bottom: var(--spacing-xl);
  right: var(--spacing-xl);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-base);
  z-index: 1000;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #c92a37;
  transform: translateY(-4px);
  box-shadow: 0 6px 25px rgba(201, 42, 55, 0.5);
}

.back-to-top:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.back-to-top:focus:not(:focus-visible) {
  outline: none;
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Light theme adjustments */
[data-theme="light"] .back-to-top {
  background: var(--color-primary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .back-to-top:hover {
  background: #c92a37;
  box-shadow: 0 6px 25px rgba(201, 42, 55, 0.4);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .back-to-top {
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }
}