/* Redeploy trigger: verifying mobile nav fix is live */
/* responsive-fixes.css
   GLOBAL, defensive responsive layer.
   Goal: no text or image should ever overflow the viewport width,
   on phone, tablet or laptop. Works alongside existing styles —
   uses only safe, universal selectors and does not remove/override
   colors, fonts, or layout choices already in place.

   Note: carousel/grid item sizing is intentionally NOT handled here —
   that layout (including .masonry, .release-grid, .press-grid and
   .carousel-arrow) is fully owned and injected at runtime by
   assets/js/cms-loader.js (see its #cms-carousel-style block) to
   avoid conflicting overrides between two competing stylesheets.

   Load this LAST in <head>, after all other stylesheets, so it can
   act as a final safety net without being overridden by earlier rules.
*/

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  max-width: 100%;
}

h1 {
  font-size: clamp(1.75rem, 8vw, 4rem);
  line-height: 1.15;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

h2 {
  font-size: clamp(1.4rem, 5vw, 2.75rem);
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;
}

h3 {
  font-size: clamp(1.15rem, 3.5vw, 1.9rem);
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}

p, li, span, a, blockquote {
  overflow-wrap: break-word;
  word-break: break-word;
}

[style*="vw"] {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

img, video, svg, picture, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

section, header, footer, main, article, div {
  max-width: 100%;
}

@media (max-width: 375px) {
  h1 {
    font-size: clamp(1.5rem, 9vw, 3rem);
  }
}

/* --- Targeted hero title fix ---
   Overrides the inline <style> block's .hero h1 min-size (4.4rem)
   which was too large for narrow phones and caused "Φανουράκης"
   to overflow off-screen. Uses !important only here, scoped to
   this one selector, to safely win over the inline <style> block
   without touching index.html directly. */
.hero h1 {
  font-size: clamp(2.4rem, 11vw, 12.5rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.05em !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: clamp(2rem, 12vw, 4.2rem) !important;
    line-height: 0.95 !important;
  }
}

@media (max-width: 375px) {
  .hero h1 {
    font-size: clamp(1.8rem, 12.5vw, 3.6rem) !important;
  }
}

/* --- Sep 10 fixes: mobile nav overflow, about section contrast, linear arrow icons --- */

/* 1) Menu button cut off on mobile: logo image wasn't allowed to shrink
   (flex items default to min-width:auto), pushing .tools off-screen. */
@media (max-width: 480px) {
  .nav-in {
    gap: 8px;
  }
  .logo {
    min-width: 0;
    flex-shrink: 1;
  }
  .logo img {
    max-width: 130px !important;
    height: 44px !important;
  }
  .tools {
    flex-shrink: 0;
    gap: 4px;
  }
  .menu {
    padding: 6px 8px;
    font-size: 0.68rem;
    white-space: nowrap;
  }
}

/* 2) About section: force cream/white-beige text so it stays readable
   against the violet background. */
#about .eyebrow,
#about .section-title,
#about h2,
#about .about-text {
  color: #fff8ed !important;
}

/* 3) Render ↗ (and similar arrows) as plain text glyphs instead of
   colorful emoji-style icons on platforms that support it (iOS 17.4+,
   modern Chrome/Edge). Falls back harmlessly on older browsers. */
body {
  font-variant-emoji: text;
}