/*
 Theme Name:   Infamous Child
 Template:     Divi
 Version:      1.0
 Description:  Infamous Tuesday child theme
*/

/*
 * GEEN @import van Divi's style.css hier.
 * Op onze custom page templates dequeuen we Divi's CSS volledig via functions.php.
 * Op Divi-pagina's (zoals /contact) blijft Divi's CSS normaal laden via wp_head().
 * Onze child stylesheet wordt alleen geladen op onze custom templates.
 */

/* ═══════════════════════════════════════════════════
   GLOBAL — gedeeld door alle custom page templates
═══════════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
  --black:       #060605;
  --off-white:   #eeebe3;
  --warm-gray:   #7e7b75;
  --accent:      #e2ce47;
  --accent-rgb:  226,206,71;
  --mid:         #0f0f0e;
  --border:      rgba(238,235,227,.07);
}

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

html { scroll-behavior: auto; }

body {
  background: var(--black) !important;
  color: var(--off-white);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
  cursor: none !important;
}

/* ── Custom Cursor ── */
#cur {
  position: fixed; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s;
}
#ring {
  position: fixed; width: 32px; height: 32px;
  border: 1px solid rgba(var(--accent-rgb), .4);
  border-radius: 50%; pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, border-color .3s;
}

/* ── Navigation ── */
.main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px;
  background: rgba(6,6,5,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(238,235,227,.08);
}

@media (min-width: 768px) {
  .main-nav { padding: 28px 60px; }
}

.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: .14em;
  color: var(--off-white);
  text-decoration: none;
  opacity: 0;
  animation: navIn 1.2s .4s cubic-bezier(.16,1,.3,1) forwards;
}
.logo b { color: var(--accent); font-weight: 400; }

.nav-r {
  display: flex;
  gap: 24px;
  list-style: none;
  align-items: center;
  opacity: 0;
  animation: navIn 1.2s .6s cubic-bezier(.16,1,.3,1) forwards;
}

@media (min-width: 768px) { .nav-r { gap: 36px; } }

.nav-r a {
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--warm-gray);
  text-decoration: none;
  transition: color .3s;
}
.nav-r a:hover,
.nav-r a.active { color: var(--off-white); }

.nav-cta {
  color: var(--black) !important;
  background: var(--accent);
  padding: 9px 16px;
  transition: opacity .2s !important;
}
.nav-cta:hover { opacity: .85; }

@media (max-width: 600px) {
  .nav-r li:not(:last-child):not(:nth-last-child(2)) { display: none; }
}

@keyframes navIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 26px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fc {
  font-size: 10px;
  color: rgba(200,196,188,.24);
  letter-spacing: .06em;
}
.fl { display: flex; gap: 28px; }
.fl a {
  font-size: 10px;
  color: rgba(200,196,188,.24);
  text-decoration: none;
  transition: color .2s;
}
.fl a:hover { color: var(--warm-gray); }

@media (max-width: 640px) {
  .site-footer { flex-direction: column; gap: 16px; padding: 24px; }
}