/* Fonts */
@font-face {
  font-family: "FiraGO";
  src: url("fonts/FiraGO Regular Font from Facebook.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Themestia";
  src: url("fonts/Themestia Font.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archium";
  src: url("fonts/Archium Font.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand Colors */
  --brand-ink: #2C3134; /* Primary Deep */
  --brand-sage: #5E7154; /* Primary Sage */
  --brand-terracotta: #C24027; /* Primary Terracotta */
  --brand-amber: #DDAA27; /* Primary Amber */

  --brand-cream: #EBEADE; /* Secondary Cream */
  --brand-olive: #A6B970; /* Secondary Olive */
  --brand-spice: #DC6126; /* Secondary Spice */
  --brand-honey: #FED27C; /* Secondary Honey */

  --bg-overlay: rgba(194, 64, 39, 0.0);
  --text-primary: var(--brand-cream);
  --text-secondary: #fff4d6;
  --accent: var(--brand-amber);
  --max-width: 72rem;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body { overflow: hidden; }

body {
  margin: 0;
  color: var(--text-primary);
  background: var(--brand-terracotta);
  font-family: FiraGO, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Background hero */
.hero {
  position: relative;
  min-height: 100dvh;
  background: url("img/Diliskari-background.jpg") center/cover no-repeat;
}

/* No overlay: keep background crisp per request */

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
  width: min(90%, var(--max-width));
  padding: 0 1.25rem;
}

/* Animate inner elements so transforms don't override centering */
.content > * { animation: fadeUp 900ms ease-out both; }

.headline {
  margin: 0 0 .5rem;
  font-family: Themestia, FiraGO, serif; /* DM Themestia - Georgian - Titles */
  font-size: clamp(2.2rem, 6vw, 5rem);
  letter-spacing: 0.02em;
  color: var(--brand-honey);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  white-space: nowrap; /* keep Georgian headline on one line */
  word-break: keep-all;
}

.tagline {
  margin: 0 auto;
  max-width: 40ch;
  color: var(--brand-cream);
  opacity: 0.95;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-family: Archium, FiraGO, serif;
}

/* Motto/small quotes use DM Archium look */
.motto {
  font-family: Archium, FiraGO, serif;
  letter-spacing: 0.01em;
}

/* Footer */
.site-footer {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(.5rem + env(safe-area-inset-bottom, 0px)) 1.25rem .5rem;
  width: 100%;
  max-width: var(--max-width);
  background: transparent;
  border: none;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.social {
  display: flex;
  gap: .75rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.social-link:hover { transform: translateY(-2px); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.social-link:active { transform: translateY(0); }

.social-link svg { fill: var(--text-primary); }

.site-footer small { color: #fff4df; opacity: .85; }

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Accessibility prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .content { animation: none; }
  .social-link { transition: none; }
}

/* Small devices tweaks */
@media (max-width: 480px) {
  .site-footer { flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
  .headline { font-size: clamp(1.25rem, 7.2vw, 2rem); }
  /* Tighter spacing on phones: raise logo and move text a bit up */
  .brand-logo { top: clamp(12px, 12vh, 180px); width: clamp(140px, 32vw, 260px); }
  .content { transform: translate(-50%, -49%); }
  .tagline { font-size: clamp(.85rem, 3.6vw, 1rem); }
}

/* Ultra-small phones width */
@media (max-width: 360px) {
  .headline { font-size: clamp(1.05rem, 6.6vw, 1.6rem); }
  .tagline { font-size: clamp(.82rem, 3.4vw, .95rem); }
  .brand-logo { width: clamp(120px, 36vw, 220px); top: clamp(10px, 14vh, 170px); }
  .content { transform: translate(-50%, -50%); }
}

/* Short viewports (e.g., landscape phones) */
@media (max-height: 520px) {
  .brand-logo { top: clamp(10px, 9vh, 110px); width: clamp(60px, 14vw, 140px); }
  .headline { font-size: clamp(1.2rem, 5.5vw, 2rem); }
}

/* If still constrained on very small widths, use narrower FiraGO for both texts */
@media (max-width: 340px) {
  .headline { font-family: FiraGO, serif; letter-spacing: 0; }
  .tagline { font-family: FiraGO, serif; }
}

/* Laptops like 13" MacBook (short-ish viewport but wide width): move logo higher */
@media (min-width: 1024px) and (max-height: 820px) {
  .brand-logo { top: clamp(12px, 10vh, 160px); }
}

/* Wide but short windows (e.g., 1500x660): ensure clear gap between logo and text */
@media (min-width: 1400px) && (max-height: 700px) {
  .brand-logo { top: clamp(8px, 6vh, 100px); }
  .content { transform: translate(-50%, -44%); }
}

/* Top-centered logo positioned between top and centered text */
.brand-logo {
  position: absolute;
  top: clamp(20px, 14vh, 200px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(96px, 18vw, 200px);
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}



/* Final small-screen override (placed after base rule so it wins in cascade) */
@media (max-width: 480px) {
  .brand-logo { width: clamp(130px, 36vw, 280px); }
}