/* =============================================
   HEADER + LOGO (Mobile‑first, Capability-aware)
   Works with HTML:
   <header>
     <div class="logo"><a href="/"><img class="logo-img" ...><span class="logo-text"><span>R</span>azouk</span></a></div>
     <div id="menu" class="fas fa-bars"></div>
     <nav class="navbar">…</nav>
   </header>
   ============================================= */

:root {
  --accent-blue: #667eea;   /* matches site */
  --accent-purple: #764ba2; /* matches site */
  --accent-gold: #ffd700;
  --header-bg: #ffffff;
  --header-shadow: 0 1px 4px rgba(146, 161, 176, 0.3);
  --header-height: 6.5rem;
}

/* Header bar */
header {
  position: fixed;
  inset: 0 0 auto 0; /* top:0; left:0; right:0 */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 1.7rem 10%;
  background: var(--header-bg);
  box-shadow: var(--header-shadow);
  -webkit-backdrop-filter: saturate(120%) blur(0px);
  backdrop-filter: saturate(120%) blur(0px);
}

/* Logo cluster */
header .logo {
  font-size: 3rem;
  font-weight: 800;
  font-family: "Clicker Script", cursive;
  text-transform: none !important;
}

header .logo a {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: #0e2431;
  padding: 1.5rem 2rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Text logo */
header .logo a .logo-text {
  font-size: 3rem; /* base mobile size; scales up with breakpoints */
  line-height: 1;
  font-weight: 800;
  color: #0e2431;
  white-space: nowrap;
}
header .logo a .logo-text span { /* first letter accent */
  color: var(--accent-blue);
}
header .logo a:hover .logo-text {
  color: #fc8c05; /* legacy hover kept */
}

/* Image‑based logo */
header .logo a .logo-img {
  width: 44px;  /* mobile-first size */
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-blue);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

/* Hover effect (scale + subtle tilt + glow) */
header .logo a .logo-img:hover {
  transform: scale(1.08) rotate(4deg);
  box-shadow:
    0 0 18px rgba(102, 126, 234, 0.45),
    0 0 28px rgba(118, 75, 162, 0.35);
  filter: saturate(1.15);
}

/* Burger (visibility is controlled elsewhere; ensure pointer) */
#menu { cursor: pointer; }

/* =============================================
   MOBILE‑FIRST CORE BREAKPOINTS
   ============================================= */

/***** Tiny phones *****/
@media (min-width: 360px) {
  header .logo a { padding: 1.4rem 1.6rem; }
}

/***** Phones *****/
@media (min-width: 480px) {
  header { padding-inline: 8%; }
  header .logo a .logo-img { width: 46px; height: 46px; }
}

/***** Large phones / small phablets *****/
@media (min-width: 600px) {
  header { padding-inline: 7%; }
  header .logo a .logo-text { font-size: 3.2rem; }
}

/***** Tablets (portrait) *****/
@media (min-width: 768px) {
  header { padding: 1.6rem 6%; }
  header .logo a { padding: 1.2rem 1.6rem; }
  header .logo a .logo-img { width: 48px; height: 48px; }
  header .logo a .logo-text { font-size: 3.4rem; }
}

/***** Tablets (landscape) / small laptops *****/
@media (min-width: 900px) {
  header { padding-inline: 5.5%; }
}

/***** Laptops (HD‑ready) *****/
@media (min-width: 1024px) {
  header { padding-inline: 5%; }
  header .logo a .logo-img { width: 50px; height: 50px; }
  header .logo a .logo-text { font-size: 3.6rem; }
}

/***** Standard laptops *****/
@media (min-width: 1280px) {
  header { padding-inline: 4.5%; }
  header .logo a .logo-text { font-size: 3.8rem; }
}

/***** Large laptops / desktops *****/
@media (min-width: 1440px) {
  header { padding-inline: 4%; }
  header .logo a .logo-text { font-size: 4rem; }
}

/***** Full HD desktops *****/
@media (min-width: 1920px) {
  header { padding-inline: 12vw; }
}

/***** iMac / 2K–4K canvases *****/
@media (min-width: 2560px) {
  header { padding-inline: min(18vw, 420px); }
  header .logo a .logo-img { width: 56px; height: 56px; }
  /* guard against overly wide content lines */
}

/* =============================================
   CAPABILITY & PREFERENCE QUERIES
   ============================================= */

/* Touch‑first: bigger targets, less hover reliance */
@media (hover: none) and (pointer: coarse) {
  header .logo a { padding: 1.6rem 2rem; }
  header .logo a .logo-img { width: 50px; height: 50px; }
}

/* High‑density (retina) assets */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  header .logo a .logo-img { image-rendering: -webkit-optimize-contrast; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  header, header .logo a .logo-img, header .logo a .logo-text { transition-duration: 0.001ms !important; }
}

/* Prefer more contrast */
@media (prefers-contrast: more) {
  header { box-shadow: 0 1px 0 rgba(0,0,0,0.25); }
  header .logo a .logo-img { border-color: var(--accent-gold); }
}

/* =============================================
   ORIENTATION HELPERS
   ============================================= */

/* Tablet portrait behaviors */
@media (min-width: 768px) and (orientation: portrait) {
  header { height: calc(var(--header-height) + 0.5rem); }
  header .logo a { padding-block: 1.6rem; }
}

/* Small devices in landscape (avoid cramped navs) */
@media (max-width: 900px) and (orientation: landscape) {
  header { padding-inline: 4%; }
}

/* =============================================
   OPTIONAL: Frosted header variant (if you later enable transparency)
   ============================================= */
.header--frosted {
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}