/* Define Local Header Font */
@font-face {
  font-family: "LocalHeaderFont";
  /* Correct relative path from /scripts/css/ to /scripts/font/ */
  src: url("../font/font.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* Brand Colors & Variables */
:root {
  --bg-orange: #e44e01;
  --text-black: #000000;
  --nav-footer-bg: rgba(0, 0, 0, 0.1);
}

/* Custom Typography Class */
.brand-font {
  /* Uses your local font first, falling back to Abril Fatface and serif */
  font-family: "LocalHeaderFont", "Abril Fatface", serif;
  letter-spacing: 0.5px;
}

body {
  background-color: var(--bg-orange);
  color: var(--text-black);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Header & Logo styling */
.site-header {
  padding: 20px 0;
  text-align: center;
}

.site-logo {
  max-height: 80px;
  width: auto;
}

/* Custom Navigation contrast against orange */
.custom-nav {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.custom-nav .nav-link {
  color: var(--text-black) !important;
  font-weight: 900;
}

.custom-nav .nav-link:hover {
  text-decoration: underline;
}

/* Header Background Image Style */
.header-bg {
  /* Responsive background settings */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;

  /* Mobile height */
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop height adjustment (768px and wider) */
@media (min-width: 768px) {
  .header-bg {
    min-height: 400px; /* Gives the background image plenty of room to show */
  }
}

/* Semi-dark overlay using ::before to keep text legible */
.header-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Header title styling with 3D text shadow */
.site-header h1 {
  font-size: 2rem; /* Mobile font size */
  position: relative;
  z-index: 10;
  color: #ffffff !important;
  text-align: center;
  line-height: 1.1;

  /* Multi-layered 3D text shadow effect */
  text-shadow:
    1px 1px 0px #000,
    2px 2px 0px #000,
    3px 3px 0px #000,
    4px 4px 0px #000,
    5px 5px 0px #000,
    6px 6px 10px rgba(0, 0, 0, 0.8);
}

/* Desktop screen size adjustment (768px and wider) */
@media (min-width: 768px) {
  .site-header h1 {
    font-size: 5rem; /* Desktop font size */

    /* Deeper 3D extrusion suited for larger text on desktop */
    text-shadow:
      1px 1px 0px #000,
      2px 2px 0px #000,
      3px 3px 0px #000,
      4px 4px 0px #000,
      5px 5px 0px #000,
      6px 6px 0px #000,
      7px 7px 0px #000,
      8px 8px 0px #000,
      9px 9px 15px rgba(0, 0, 0, 0.8);
  }
}

/* Footer styling */
footer {
  background-color: var(--nav-footer-bg, rgba(0, 0, 0, 0.1));
  padding: 30px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

/* Ensure telephone and email links in footer match main body text */
footer a {
  color: var(--text-black);
  transition: opacity 0.2s ease;
}

footer a:hover {
  color: var(--text-black);
  opacity: 0.8;
  text-decoration: underline !important;
}

/* Neon Pink Flashing/Glowing Nav Link ("Work Here") */
.nav-link-glowing {
  color: #ffffff !important; /* Base crisp white text so the glow stands out */
  font-weight: 900;
  transition: all 0.2s ease;

  /* Intermittent glowing animation */
  animation: neonTextGlow 2.5s infinite ease-in-out;
}

.nav-link-glowing:hover {
  color: #ffb3da !important;
  text-shadow:
    0 0 5px #ff007f,
    0 0 10px #ff007f,
    0 0 20px #ff007f,
    0 0 40px #ff007f,
    0 0 80px #ff007f !important;
  transform: scale(1.05); /* Slight grow on hover */
}

/* Keyframes for flickering neon pulse and slight color shift */
@keyframes neonTextGlow {
  0%,
  100% {
    /* Subtle neon pink halo */
    text-shadow:
      0 0 2px #ff007f,
      0 0 5px #ff007f,
      0 0 10px #ff007f;
  }
  45% {
    /* Maximum vibrant neon spread with hot-pink tint */
    text-shadow:
      0 0 4px #fff,
      0 0 8px #ff007f,
      0 0 15px #ff007f,
      0 0 25px #ff007f,
      0 0 40px #ff1493;
  }
  50% {
    /* Quick "flicker" drop off to mimic a real neon sign */
    text-shadow: 0 0 1px #ff007f;
  }
  55% {
    /* Surge back up to hot magenta/deep pink */
    text-shadow:
      0 0 4px #fff,
      0 0 10px #ff007f,
      0 0 20px #ff007f,
      0 0 35px #e60073;
  }
}

/* Gallery Thumbnail Styling */
.gallery-img {
  width: 100%;
  height: 180px; /* Uniform height across all photos */
  object-fit: cover; /* Fills container, keeping proportions */
  object-position: center; /* Crops outwards from the center */
  cursor: pointer;

  /* Added Border Styling */
  border: 3px solid #000000; /* Solid black border */
  border-radius: 8px; /* Slightly rounded corners */

  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    border-color 0.2s ease;
}

.gallery-img:hover {
  opacity: 0.9;
  transform: scale(1.02);
  border-color: #ffffff; /* Subtle color shift on hover */
}

/* White Glowing & Twinkling Neon Stars */
.star-twinkle {
  color: #ffffff;
  display: inline-block;
  font-size: 1.5rem;
  animation: whiteStarGlow 2s infinite ease-in-out;
}

/* Offset timing so stars don't all flash at the exact same fraction of a second */
.star-delay-1 {
  animation-delay: 0.3s;
}
.star-delay-2 {
  animation-delay: 0.7s;
}
.star-delay-3 {
  animation-delay: 1.1s;
}

@keyframes whiteStarGlow {
  0%,
  100% {
    /* Soft white halo */
    text-shadow:
      0 0 2px #ffffff,
      0 0 6px #ffffff,
      0 0 12px rgba(255, 255, 255, 0.8);
    transform: scale(1);
  }
  45% {
    /* Full intensity neon flare */
    text-shadow:
      0 0 4px #ffffff,
      0 0 10px #ffffff,
      0 0 20px #ffffff,
      0 0 30px #ffffff,
      0 0 45px #ffffff;
    transform: scale(1.15);
  }
  50% {
    /* Brief flicker drop-off */
    text-shadow: 0 0 1px #ffffff;
    transform: scale(0.95);
  }
  55% {
    /* Flashes back bright */
    text-shadow:
      0 0 4px #ffffff,
      0 0 12px #ffffff,
      0 0 25px #ffffff,
      0 0 35px #ffffff;
    transform: scale(1.1);
  }
}

/* Header Logo Link Styles */
.header-logo-link {
  color: inherit; /* Inherits the current font color */
  text-decoration: none; /* Removes the standard link underline */
  transition: color 0.3s ease; /* Smooth color fade on hover */
}

.header-logo-link:hover,
.header-logo-link:focus {
  color: #ff8c00; /* Vibrant orange on hover/focus */
  text-decoration: none;
}