/*
Theme Name: DOV — Varouxis Journalistic Organization
Theme URI: https://www.dov.gr/
Author: Δημοσιογραφικός Οργανισμός Βαρουξή
Description: Elementor-compatible εταιρικό WordPress theme για τον Δημοσιογραφικό Οργανισμό Βαρουξή.
Version: 3.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dov-varouxis
*/

    :root {
      --paper: #f3ede2;
      --paper-soft: #faf7f0;
      --ink: #171313;
      --burgundy: #68172b;
      --burgundy-dark: #4d1020;
      --gold: #b28b48;
      --gold-soft: #d6c092;
      --stone: #9f9589;
      --line: rgba(104, 23, 43, .18);
      --shadow: 0 24px 70px rgba(45, 19, 20, .12);
      --serif: "Cormorant Garamond", "GFS Didot", Georgia, serif;
      --sans: "Manrope", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper-soft);
      font-family: var(--sans);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    img { max-width: 100%; display: block; }
    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 100;
      padding: 10px 14px;
      color: white;
      background: var(--burgundy);
      transform: translateY(-160%);
      transition: transform .2s ease;
    }
    .skip-link:focus { transform: translateY(0); }
    .container { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
    .eyebrow {
      margin: 0 0 18px;
      color: var(--gold);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
    }
    .eyebrow::after {
      content: "";
      display: inline-block;
      width: 54px;
      height: 1px;
      margin-left: 14px;
      background: currentColor;
      vertical-align: middle;
    }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { font-family: var(--serif); font-weight: 600; }
    h2 {
      margin-bottom: 22px;
      color: var(--burgundy);
      font-size: clamp(2.8rem, 5vw, 4.75rem);
      line-height: .98;
      letter-spacing: -.035em;
    }
    .section-lead {
      max-width: 720px;
      color: #504846;
      font-size: 1.05rem;
      line-height: 1.8;
    }

    /* Navigation */
    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 50;
      border-bottom: 1px solid transparent;
      transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .site-header.scrolled {
      background: rgba(250, 247, 240, .93);
      border-color: var(--line);
      box-shadow: 0 8px 30px rgba(45, 19, 20, .06);
      backdrop-filter: blur(16px);
    }
    .nav {
      height: 96px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand { display: inline-flex; align-items: center; gap: 18px; min-width: 320px; }
    .brand-mark {
      display: grid;
      place-items: center;
      width: 44px;
      height: 54px;
      border: 1px solid var(--gold);
      color: var(--burgundy);
      font-family: var(--serif);
      font-size: 1.15rem;
      line-height: 1;
    }
    .brand-copy strong {
      display: block;
      color: var(--burgundy);
      font-family: var(--serif);
      font-size: 1.42rem;
      font-weight: 600;
      letter-spacing: .045em;
      line-height: 1;
    }
    .brand-copy span {
      display: block;
      margin-top: 6px;
      color: #5d5451;
      font-size: .55rem;
      font-weight: 600;
      letter-spacing: .17em;
      text-transform: uppercase;
    }
    .nav-links { display: flex; align-items: center; gap: 28px; }
    .nav-links a {
      position: relative;
      padding-block: 12px;
      font-size: .79rem;
      font-weight: 600;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: 5px;
      height: 1px;
      background: var(--gold);
      transition: right .25s ease;
    }
    .nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }
    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      color: var(--burgundy);
      background: transparent;
      cursor: pointer;
    }

    /* Hero */
    .hero {
      min-height: 900px;
      padding-top: 96px;
      background: var(--paper);
    }
    .hero-grid {
      min-height: 704px;
      display: grid;
      grid-template-columns: 48% 52%;
    }
    .hero-visual {
      position: relative;
      min-height: 704px;
      overflow: hidden;
      background: #090807;
    }
    .hero-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 61% center;
      filter: sepia(.12) contrast(1.05);
      transform: scale(1.015);
      animation: settle 1.4s cubic-bezier(.2,.7,.2,1) both;
    }
    .hero-visual::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(104,23,43,.48), transparent 38%),
        linear-gradient(180deg, transparent 55%, rgba(10,8,8,.36));
      mix-blend-mode: color;
      pointer-events: none;
    }
    .hero-visual::after {
      content: "";
      position: absolute;
      z-index: 2;
      inset: 0 -1px 0 auto;
      width: 22%;
      background: linear-gradient(90deg, transparent, var(--paper));
      pointer-events: none;
    }
    .archive-note {
      position: absolute;
      z-index: 3;
      left: 42px;
      bottom: 38px;
      max-width: 280px;
      padding: 16px 18px;
      border-left: 2px solid var(--gold);
      color: rgba(255,255,255,.86);
      background: rgba(15,10,10,.56);
      backdrop-filter: blur(8px);
      font-size: .71rem;
      line-height: 1.65;
      letter-spacing: .04em;
    }
    .archive-note strong {
      display: block;
      margin-bottom: 5px;
      color: white;
      font-family: var(--serif);
      font-size: 1.1rem;
      letter-spacing: .08em;
    }
    .hero-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 64px clamp(44px, 6vw, 96px) 48px;
    }
    .hero h1 {
      max-width: 720px;
      margin: 0 0 26px;
      color: var(--burgundy);
      font-size: clamp(3.55rem, 5.5vw, 6.4rem);
      line-height: .88;
      letter-spacing: -.05em;
    }
    .hero-intro {
      max-width: 640px;
      margin-bottom: 32px;
      color: #423b39;
      font-size: clamp(1rem, 1.3vw, 1.2rem);
      line-height: 1.72;
    }
    .actions { display: flex; flex-wrap: wrap; gap: 16px; }
    .button {
      min-height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      padding: 14px 24px;
      border: 1px solid var(--burgundy);
      font-size: .82rem;
      font-weight: 600;
      transition: color .25s ease, background .25s ease, transform .25s ease;
    }
    .button span { transition: transform .25s ease; }
    .button:hover span { transform: translateX(5px); }
    .button.primary { color: white; background: var(--burgundy); }
    .button.primary:hover { background: var(--burgundy-dark); transform: translateY(-2px); }
    .button.secondary { color: var(--burgundy); background: transparent; }
    .button.secondary:hover { color: white; background: var(--burgundy); transform: translateY(-2px); }
    .proof {
      min-height: 100px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
      border-top: 1px solid var(--gold-soft);
      border-bottom: 1px solid var(--gold-soft);
      background: rgba(255,255,255,.28);
    }
    .proof-item {
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 18px 28px;
      border-right: 1px solid var(--gold-soft);
      text-align: center;
    }
    .proof-item:last-child { border-right: 0; }
    .proof-item strong {
      color: var(--burgundy);
      font-family: var(--serif);
      font-size: 2.2rem;
      font-weight: 600;
    }
    .proof-item span { color: #544b47; font-size: .79rem; line-height: 1.45; }

    /* Overview */
    .overview { padding: 132px 0; }
    .overview-grid {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: clamp(48px, 8vw, 120px);
      align-items: start;
    }
    .overview-quote {
      position: sticky;
      top: 135px;
      padding: 36px 0 34px 34px;
      border-left: 1px solid var(--gold);
      color: var(--burgundy);
      font-family: var(--serif);
      font-size: clamp(2rem, 3.2vw, 3.35rem);
      line-height: 1.04;
    }
    .overview-copy p { color: #514946; font-size: 1.02rem; line-height: 1.9; }
    .overview-copy p:first-of-type::first-letter {
      float: left;
      margin: 4px 9px 0 0;
      color: var(--burgundy);
      font-family: var(--serif);
      font-size: 4.6rem;
      line-height: .72;
    }

    /* Pillars */
    .pillars {
      padding: 120px 0 132px;
      color: #f8f3ea;
      background: #171313;
    }
    .pillars h2 { color: #f8f3ea; }
    .pillars .section-lead { color: #bdb4aa; }
    .pillar-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      margin-top: 70px;
      border: 1px solid rgba(214,192,146,.24);
      background: rgba(214,192,146,.18);
    }
    .pillar {
      position: relative;
      min-height: 330px;
      padding: 42px 36px;
      background: #171313;
      overflow: hidden;
      transition: background .35s ease;
    }
    .pillar::after {
      content: "";
      position: absolute;
      right: -50px;
      bottom: -80px;
      width: 190px;
      height: 190px;
      border: 1px solid rgba(178,139,72,.18);
      border-radius: 50%;
      transition: transform .45s ease, border-color .35s ease;
    }
    .pillar:hover { background: #201819; }
    .pillar:hover::after { transform: scale(1.25); border-color: rgba(178,139,72,.48); }
    .pillar-no {
      display: block;
      margin-bottom: 52px;
      color: var(--gold);
      font-family: var(--serif);
      font-size: 1.4rem;
    }
    .pillar h3 {
      margin-bottom: 18px;
      color: white;
      font-size: 2rem;
      line-height: 1;
    }
    .pillar p { color: #bdb4aa; font-size: .88rem; line-height: 1.75; }
    .pillar-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 22px;
    }
    .pillar-tags span {
      padding: 6px 9px;
      border: 1px solid rgba(214,192,146,.2);
      color: #cfc3b3;
      font-size: .62rem;
    }

    /* Brands */
    .brands { padding: 130px 0; background: var(--paper); }
    .brands-head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: end;
    }
    .brands-wall {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      margin-top: 70px;
    }
    .brand-card {
      min-height: 142px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 22px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.28);
      transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
    }
    .brand-card:hover {
      transform: translateY(-5px);
      background: white;
      box-shadow: var(--shadow);
    }
    .brand-card small { color: var(--gold); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
    .brand-card strong {
      color: var(--burgundy);
      font-family: var(--serif);
      font-size: 1.32rem;
      line-height: 1.05;
    }

    /* Signature forums */
    .forums { padding: 120px 0; }
    .forum-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 22px;
      margin-top: 60px;
    }
    .forum-card {
      position: relative;
      min-height: 420px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 44px;
      color: white;
      background:
        linear-gradient(180deg, transparent 15%, rgba(20,12,13,.9)),
        radial-gradient(circle at 78% 16%, rgba(178,139,72,.42), transparent 31%),
        #3e1521;
      overflow: hidden;
    }
    .forum-card.secondary {
      background:
        linear-gradient(180deg, transparent 15%, rgba(20,12,13,.92)),
        radial-gradient(circle at 20% 18%, rgba(141,111,49,.45), transparent 31%),
        #2c241a;
    }
    .forum-card::before {
      content: "";
      position: absolute;
      inset: 28px;
      border: 1px solid rgba(255,255,255,.18);
      pointer-events: none;
    }
    .forum-card > * { position: relative; z-index: 1; }
    .forum-card h3 { margin-bottom: 14px; color: white; font-size: clamp(2.7rem, 4vw, 4.8rem); line-height: .9; }
    .forum-card p { max-width: 580px; margin-bottom: 0; color: rgba(255,255,255,.72); font-size: .9rem; line-height: 1.7; }

    /* Timeline */
    .timeline { padding: 120px 0; background: #ede4d7; }
    .timeline-track {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 42px 0;
      margin-top: 70px;
    }
    .moment {
      position: relative;
      padding: 42px 30px 0 0;
      border-top: 1px solid var(--gold);
    }
    .moment::before {
      content: "";
      position: absolute;
      top: -6px;
      left: 0;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--burgundy);
    }
    .moment time {
      display: block;
      margin-bottom: 16px;
      color: var(--burgundy);
      font-family: var(--serif);
      font-size: 2.5rem;
    }
    .moment h3 { margin-bottom: 10px; font-size: 1.4rem; }
    .moment p { color: #5b514d; font-size: .78rem; line-height: 1.7; }

    /* CTA */
    .contact {
      position: relative;
      padding: 140px 0;
      color: white;
      background: var(--burgundy);
      overflow: hidden;
    }
    .contact::after {
      content: "VJO";
      position: absolute;
      right: -4vw;
      bottom: -7vw;
      color: rgba(255,255,255,.035);
      font-family: var(--serif);
      font-size: 30vw;
      line-height: .7;
      pointer-events: none;
    }
    .contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; }
    .contact h2 { max-width: 850px; color: white; }
    .contact p { max-width: 670px; color: rgba(255,255,255,.72); line-height: 1.8; }
    .contact .button { border-color: var(--gold-soft); color: white; background: transparent; }
    .contact .button:hover { color: var(--burgundy); background: var(--paper); }
    .contact-details { display: grid; gap: 18px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.22); }
    .contact-details a, .contact-details span { color: rgba(255,255,255,.82); font-size: .82rem; line-height: 1.7; }

    footer { padding: 34px 0; color: #847a74; background: #171313; font-size: .68rem; }
    .footer-inner { display: flex; justify-content: space-between; gap: 24px; }

    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    @keyframes settle { from { transform: scale(1.045); opacity: .5; } to { transform: scale(1.015); opacity: 1; } }

    @media (max-width: 1080px) {
      .nav-links { gap: 17px; }
      .brand { min-width: 260px; }
      .brand-copy strong { font-size: 1.18rem; }
      .hero-grid { grid-template-columns: 44% 56%; }
      .hero h1 { font-size: clamp(3.4rem, 7vw, 5.7rem); }
      .pillar-grid { grid-template-columns: repeat(2, 1fr); }
      .brands-wall { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 820px) {
      .container { width: min(100% - 32px, 1240px); }
      .nav { height: 82px; }
      .brand { min-width: auto; }
      .brand-copy span { display: none; }
      .menu-toggle { display: grid; place-items: center; }
      .nav-links {
        position: fixed;
        inset: 82px 0 auto;
        display: grid;
        gap: 0;
        padding: 18px 24px 28px;
        border-bottom: 1px solid var(--line);
        background: var(--paper-soft);
        transform: translateY(-130%);
        transition: transform .3s ease;
      }
      .nav-links.open { transform: translateY(0); }
      .nav-links a { padding: 16px 0; border-bottom: 1px solid var(--line); }
      .hero { padding-top: 82px; }
      .hero-grid { grid-template-columns: 1fr; }
      .hero-visual { min-height: 460px; order: 2; }
      .hero-visual::after { display: none; }
      .hero-copy { min-height: 650px; padding: 70px 24px 54px; order: 1; }
      .proof { grid-template-columns: 1fr; }
      .proof-item { border-right: 0; border-bottom: 1px solid var(--gold-soft); }
      .proof-item:last-child { border-bottom: 0; }
      .overview-grid, .brands-head, .forum-grid, .contact-grid { grid-template-columns: 1fr; }
      .overview-quote { position: static; }
      .brands-wall { grid-template-columns: repeat(2, 1fr); }
      .timeline-track { grid-template-columns: 1fr 1fr; row-gap: 40px; }
    }
    @media (max-width: 560px) {
      .brand-mark { width: 38px; height: 46px; }
      .brand-copy strong { font-size: 1rem; }
      .hero-copy { min-height: 610px; }
      .hero h1 { font-size: 3.4rem; }
      .actions { display: grid; }
      .pillar-grid, .brands-wall, .timeline-track { grid-template-columns: 1fr; }
      .forum-card { min-height: 370px; padding: 34px; }
      .footer-inner { flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

/* Elementor compatibility */
.elementor-page .site-main, .elementor-location-single { margin: 0; padding: 0; }
.elementor-widget-html .hero, .elementor-widget-html .overview { width: 100%; }
.nav-links { list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 0; padding: 0; }
.site-main > .elementor { width: 100%; }
.elementor-section.elementor-section-stretched > .elementor-container { max-width: none; }
.elementor-widget-html, .elementor-widget-html > .elementor-widget-container { width: 100%; }
.elementor-widget-html { margin-bottom: 0 !important; }
.elementor-widget { margin-bottom: 0; }
.elementor-element.hero-grid, .elementor-element.proof, .elementor-element.overview-grid,
.elementor-element.pillar-grid, .elementor-element.brands-head, .elementor-element.brands-wall,
.elementor-element.forum-grid, .elementor-element.timeline-track, .elementor-element.contact-grid {
  display: grid !important;
}
.elementor-element.actions { display: flex !important; flex-direction: row; flex-wrap: wrap; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual .elementor-widget-image, .hero-visual .elementor-widget-container { height: 100%; }
.proof-number .elementor-heading-title, .moment-time .elementor-heading-title { color: var(--burgundy); font-family: var(--serif); }
.brand-small p { color: var(--gold); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
.brand-name .elementor-heading-title { color: var(--burgundy); font-family: var(--serif); font-size: 1.32rem; }
.button .elementor-button { min-height: 56px; padding: 14px 24px; border: 1px solid var(--burgundy); border-radius: 0; background: transparent; color: var(--burgundy); }
.button.primary .elementor-button { color: white; background: var(--burgundy); }

/*
 * Elementor editor parity.
 * The public page keeps the original 3.0 styling. These rules only prevent
 * Elementor's canvas from hiding reveal elements or replacing theme typography.
 */
body.elementor-editor-active .reveal,
body.elementor-editor-preview .reveal,
.elementor-edit-area .reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
body.elementor-editor-active .elementor-heading-title,
body.elementor-editor-preview .elementor-heading-title,
.elementor-edit-area .elementor-heading-title {
  font-family: var(--serif) !important;
  color: var(--burgundy) !important;
}
body.elementor-editor-active .pillars .elementor-heading-title,
body.elementor-editor-preview .pillars .elementor-heading-title,
.elementor-edit-area .pillars .elementor-heading-title,
body.elementor-editor-active .forum-card .elementor-heading-title,
body.elementor-editor-preview .forum-card .elementor-heading-title,
.elementor-edit-area .forum-card .elementor-heading-title,
body.elementor-editor-active .contact .elementor-heading-title,
body.elementor-editor-preview .contact .elementor-heading-title,
.elementor-edit-area .contact .elementor-heading-title {
  color: #fff !important;
}
body.elementor-editor-active .hero-title .elementor-heading-title,
body.elementor-editor-preview .hero-title .elementor-heading-title,
.elementor-edit-area .hero-title .elementor-heading-title {
  color: var(--burgundy) !important;
}
body.elementor-editor-active .pillar-grid,
body.elementor-editor-active .brands-wall,
body.elementor-editor-active .forum-grid,
body.elementor-editor-active .timeline-track,
body.elementor-editor-preview .pillar-grid,
body.elementor-editor-preview .brands-wall,
body.elementor-editor-preview .forum-grid,
body.elementor-editor-preview .timeline-track,
.elementor-edit-area .pillar-grid,
.elementor-edit-area .brands-wall,
.elementor-edit-area .forum-grid,
.elementor-edit-area .timeline-track {
  visibility: visible !important;
  opacity: 1 !important;
}