/* ============================================================
   Herodeals – Page Styles (style.css)
   Page-specific layout and component overrides.
   Requires: tokens.css  components.css
   ============================================================ */

/* ── RESET & BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color:       var(--color-text);
  line-height: 1.6;

  /* Rich dark base */
  background-color: var(--color-bg);

  /*
    Layered radial gradients simulate light refracting through
    stacked dark glass panels – cold blue on the edges,
    warm amber brand-glow in the centre.
  */
  background-image:
    /* Top-right cold glass reflection */
    radial-gradient(ellipse 700px 500px at 92% -8%,
      rgba(90, 110, 220, 0.09)  0%, transparent 65%),
    /* Bottom-left cool depth */
    radial-gradient(ellipse 600px 500px at -8% 108%,
      rgba(60, 80, 190, 0.07)   0%, transparent 65%),
    /* Centre warm brand glow */
    radial-gradient(ellipse 1100px 600px at 50% 48%,
      rgba(232, 160, 32, 0.05)  0%, transparent 68%),
    /* Far bottom-right subtle purple tint */
    radial-gradient(ellipse 500px 400px at 105% 95%,
      rgba(150, 80, 220, 0.04)  0%, transparent 70%);
}

/* ── NAVIGATION ─────────────────────────────────────────────── */

nav.site-nav {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         100;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 var(--page-gutter);
  height:          var(--nav-height);
  /* Stronger glass for nav – deep tinted, frosted */
  background:      rgba(7, 9, 15, 0.65);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border-bottom:   1px solid rgba(255, 255, 255, 0.07);
  /* Subtle glass edge highlight on nav bottom */
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 4px 30px rgba(0, 0, 0, 0.4);
}

.logo {
  display:         flex;
  align-items:     center;
  text-decoration: none;
}

.logo img {
  height:          50px;
  width:           auto;
  object-fit:      contain;
  display:         block;
}

.nav-menu {
  list-style: none;
  display:    flex;
  gap:        var(--sp-8);
}

.nav-menu a {
  text-decoration: none;
  color:           var(--color-muted);
  font-size:       var(--text-sm);
  font-weight:     var(--fw-medium);
  transition:      color var(--t-base);
}

.nav-menu a:hover { color: var(--color-text); }

/* Specificity fix for buttons inside the navigation menu */
.nav-menu a.btn--primary {
  color: var(--color-bg);
}
.nav-menu a.btn--primary:hover {
  color: var(--color-bg);
}
.nav-menu a.btn {
  font-weight: var(--fw-bold);
}

/* Hamburger button */
.nav-hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           40px;
  height:          40px;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         4px;
  border-radius:   var(--radius-md);
  transition:      background var(--t-base);
}

.nav-hamburger:hover { background: rgba(255, 255, 255, 0.06); }

.nav-hamburger span {
  display:          block;
  width:            22px;
  height:           2px;
  background:       var(--color-text);
  border-radius:    2px;
  transition:       transform var(--t-slow), opacity var(--t-slow);
  transform-origin: center;
}

.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO ───────────────────────────────────────────────────── */

.hero {
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         120px var(--page-gutter) var(--sp-24);
  position:        relative;
  overflow:        hidden;
}

/* Radial glow behind hero content */
.hero::before {
  content:        '';
  position:       absolute;
  top:            -200px;
  left:           50%;
  transform:      translateX(-50%);
  width:          800px;
  height:         800px;
  background:     radial-gradient(circle, rgba(232, 160, 32, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero h1 {
  font-size:      clamp(2.4rem, 5vw, 4rem);
  font-weight:    var(--fw-black);
  line-height:    1.15;
  letter-spacing: -1px;
  max-width:      780px;
  margin-bottom:  var(--sp-5);
}

.hero h1 span { color: var(--color-accent); }

.hero p {
  font-size:     var(--text-lg);
  color:         var(--color-muted);
  max-width:     560px;
  margin-bottom: var(--sp-10);
  line-height:   1.7;
}

/* ── USP SECTION ─────────────────────────────────────────────── */

.usp-card {
  padding: var(--sp-7);
}

.usp-icon {
  font-size:     1.8rem;
  margin-bottom: var(--sp-4);
}

.usp-card h3 {
  font-size:     var(--text-base);
  font-weight:   var(--fw-bold);
  margin-bottom: var(--sp-2);
}

.usp-card p {
  font-size:  var(--text-sm);
  color:      var(--color-muted);
  line-height: 1.6;
}

/* ── ABOUT SECTION ───────────────────────────────────────────── */

.about-visual {
  padding: var(--sp-10);
}

.about-row-text {
  font-size: var(--text-sm);
  color:     var(--color-muted);
}

.about-row-text strong {
  color:        var(--color-text);
  display:      block;
  font-size:    0.95rem;
  font-weight:  var(--fw-bold);
  margin-bottom: var(--sp-1);
}

/* ── CHANNELS SECTION ────────────────────────────────────────── */

.channel-card {
  padding:        var(--sp-10);
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-6);
}

.channel-header {
  display:     flex;
  align-items: center;
  gap:         var(--sp-4);
}

.channel-header-text h3 {
  font-size:   1.2rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.channel-desc {
  font-size:  var(--text-sm);
  color:      var(--color-muted);
  line-height: 1.7;
}

/* ── CATEGORIES SECTION ──────────────────────────────────────── */

.cat-card {
  padding: 2rem var(--sp-6);
}

.cat-icon {
  font-size:     2.2rem;
  margin-bottom: var(--sp-3);
}

.cat-card h3 {
  font-size:     0.95rem;
  font-weight:   var(--fw-bold);
  margin-bottom: var(--sp-1);
}

.cat-card p {
  font-size: var(--text-xs);
  color:     var(--color-muted);
}

/* ── CONTACT SECTION ─────────────────────────────────────────── */

.contact-info {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-6);
}

.contact-item {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-4);
}

.contact-item-text {
  font-size: var(--text-sm);
  color:     var(--color-muted);
}

.contact-item-text strong {
  color:         var(--color-text);
  display:       block;
  margin-bottom: var(--sp-1);
  font-weight:   var(--fw-bold);
}

.contact-item-text a {
  color:           var(--color-accent);
  text-decoration: none;
  transition:      color var(--t-base);
}

.contact-item-text a:hover { color: var(--color-accent-h); }

/* ── FORM CONTROLS ───────────────────────────────────────────── */

form {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-4);
}

.form-row { display: flex; gap: var(--sp-4); }
.form-row input { flex: 1; }

input,
textarea,
select {
  background:  var(--color-surface-2);
  border:      1px solid var(--color-border);
  border-radius: var(--radius-md);
  color:       var(--color-text);
  font-family: var(--font);
  font-size:   var(--text-sm);
  padding:     0.75rem var(--sp-4);
  width:       100%;
  outline:     none;
  transition:  border-color var(--t-base);
}

input:focus,
textarea:focus,
select:focus { border-color: var(--color-accent); }

textarea { resize: vertical; min-height: 130px; }

::placeholder { color: var(--color-muted); }

select option {
  background: var(--color-surface-2);
  color:      var(--color-text);
}

/* Form feedback message */
.form-message {
  display:       none;
  padding:       0.85rem var(--sp-4);
  border-radius: var(--radius-md);
  font-size:     var(--text-sm);
  font-weight:   var(--fw-semi);
  text-align:    center;
}

.form-message.success {
  display:      block;
  background:   var(--color-success-subtle);
  border:       1px solid var(--color-success-border);
  color:        var(--color-success);
}

.form-message.error {
  display:    block;
  background: var(--color-error-subtle);
  border:     1px solid var(--color-error-border);
  color:      var(--color-error);
}

/* ── FOOTER ──────────────────────────────────────────────────── */

footer {
  border-top:      1px solid var(--color-border);
  padding:         var(--sp-8) var(--page-gutter);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--sp-4);
}

footer .logo img { height: 40px; }

.footer-links {
  display:    flex;
  gap:        var(--sp-6);
  list-style: none;
}

.footer-links a {
  font-size:       var(--text-sm);
  color:           var(--color-muted);
  text-decoration: none;
  transition:      color var(--t-base);
}

.footer-links a:hover { color: var(--color-text); }

.footer-copy {
  font-size:    var(--text-xs);
  color:        var(--color-muted);
  width:        100%;
  text-align:   center;
  padding-top:  var(--sp-4);
  border-top:   1px solid var(--color-border);
  margin-top:   var(--sp-2);
}

/* ── COOKIE BANNER ───────────────────────────────────────────── */

#cookie-banner {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  z-index:         999;
  padding:         var(--sp-5) var(--page-gutter);
  background:      rgba(22, 26, 35, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top:      1px solid var(--color-border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-6);
  flex-wrap:       wrap;
  transform:       translateY(0);
  transition:      transform 0.4s ease, opacity 0.4s ease;
}

#cookie-banner.is-hidden {
  transform:      translateY(110%);
  opacity:        0;
  pointer-events: none;
}

.cookie-text {
  font-size:  var(--text-sm);
  color:      var(--color-muted);
  line-height: 1.6;
  flex:        1;
  min-width:   200px;
}

.cookie-text a {
  color:           var(--color-accent);
  text-decoration: none;
  font-weight:     var(--fw-semi);
}

.cookie-text a:hover {
  color:           var(--color-accent-h);
  text-decoration: underline;
}

.cookie-actions {
  display:     flex;
  gap:         var(--sp-3);
  align-items: center;
  flex-shrink: 0;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Nav – mobile dropdown */
  .nav-hamburger { display: flex; }

  .nav-menu {
    display:        none;
    flex-direction: column;
    position:       absolute;
    top:            var(--nav-height);
    left:           0;
    right:          0;
    background:     rgba(13, 15, 20, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom:  1px solid var(--color-border);
    padding:        var(--sp-4) var(--page-gutter);
    gap:            0;
  }

  .nav-menu.is-open { display: flex; }

  .nav-menu li { border-bottom: 1px solid var(--color-border); }
  .nav-menu li:last-child { border-bottom: none; }

  .nav-menu a {
    display:   block;
    padding:   0.9rem 0;
    font-size: var(--text-base);
  }

  /* Adjust btn--sm inside nav on mobile */
  .nav-menu .btn--sm {
    display:       inline-flex;
    margin:        var(--sp-2) 0 var(--sp-1);
    padding:       0.6rem 1.1rem;
    border-radius: var(--radius-md);
  }

  /* Layouts */
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--halves { grid-template-columns: 1fr; gap: var(--sp-10); }

  .grid--auto { grid-template-columns: 1fr; }

  /* Hero */
  .stat-group { gap: var(--sp-6); }

  /* Form */
  .form-row { flex-direction: column; }

  /* Footer */
  footer { flex-direction: column; align-items: flex-start; }

  /* Cookie Banner */
  #cookie-banner {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--sp-4);
  }

  .cookie-actions { width: 100%; }

  .cookie-actions .btn {
    flex:       1;
    text-align: center;
  }
}