/*
Theme Name: Hellas Life — Atlantic
Template: mts_sociallyviral
Author: Hellas Life
Description: Editorial child theme modelled on The Atlantic's masthead and layout.
Version: 1.1
*/

:root {
  --ink: #000;
  --body: #121212;
  --muted: #6a6a6a;
  --rule: #d9d9d9;
  --rule-ink: #000;
  --blue: #0D5EAF;
  --blue-dark: #094a8a;
  --paper: #fff;
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #fff; }
html, body, .main-container, #wrapper, #page, .site, .site-content {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  max-width: none !important;
  box-shadow: none !important;
}
body {
  margin: 0;
  color: var(--body);
  font-family: var(--serif) !important;
  font-size: 19px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
p { margin: 0 0 1.1em; }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--serif) !important;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink) !important;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; background: #fff; padding: 8px 12px; z-index: 100; }

/* ==========================================================================
   Masthead — The Atlantic structure:
   [ left nav ]  [ giant serif letter + italic wordmark ]  [ right nav ]
   ========================================================================== */

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}

/* faint Greek flag/map behind the masthead */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://hellaslife.com/wp-content/uploads/2018/04/588px-Flag-map_of_Greece.svg_.png");
  background-repeat: no-repeat;
  background-position: 50% 46%;
  background-size: 340px auto;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

.header-grid {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 196px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* left nav */
.nav-left { display: flex; align-items: center; gap: 18px; }
.nav-left .nav-list { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nav-left a {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  color: #222;
  white-space: nowrap;
}
.nav-left a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.nav-left .icon-link { font-size: 17px; line-height: 1; padding: 4px 2px; }

/* centred brand */
.brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.brand-mark {
  font-family: "GFS Didot", Georgia, "Times New Roman", serif !important;
  font-weight: 400;
  font-size: 124px;
  line-height: 0.76;
  color: var(--blue);
  display: block;
  letter-spacing: -0.04em;
}
.brand-word {
  font-family: "GFS Didot", Georgia, "Times New Roman", serif !important;
  font-style: italic;
  font-weight: 400;
  font-size: 31px;
  color: #111;
  margin-top: 8px;
  letter-spacing: -0.01em;
}
.brand-tagline { display: none; }

/* right nav */
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.nav-right a {
  font-family: var(--sans);
  font-size: 14px;
  color: #222;
  white-space: nowrap;
}
.nav-right a:hover { color: var(--blue); }
.btn-subscribe {
  background: var(--blue);
  color: #fff !important;
  padding: 11px 20px;
  font-weight: 600 !important;
  border-radius: 2px;
  letter-spacing: 0.01em;
}
.btn-subscribe:hover { background: var(--blue-dark); color: #fff !important; text-decoration: none !important; }

/* ==========================================================================
   Top grid — two image stories + text rail, as on the Atlantic homepage
   ========================================================================== */

.top-grid {
  display: grid;
  grid-template-columns: 1fr 1.85fr 1fr;
  gap: 30px;
  padding: 30px 0 8px;
  align-items: start;
}
.top-grid .story img { margin-bottom: 14px; }
.top-grid .story h2 { font-size: 27px; line-height: 1.14; margin-bottom: 8px; }
.top-grid .story.mid h2 { font-size: 40px; line-height: 1.06; }
.top-grid .story .dek { margin-top: 8px; }

.rail { border-left: 0; }
.text-story { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }
.text-story:last-child { border-bottom: 0; }
.text-story h3 { font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
.text-story .byline { font-size: 11px; }

/* ==========================================================================
   Common editorial parts
   ========================================================================== */

.section-head {
  border-top: 2px solid var(--ink);
  margin: 46px 0 22px;
  padding-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.section-head h2, .section-head .label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.section-head a.more {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue);
}

.kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
  display: block;
}
.kicker a { color: var(--blue); }
.byline, .timestamp, .dek {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.byline { text-transform: uppercase; letter-spacing: 0.08em; }
.dek { font-family: var(--serif); font-size: 18px; line-height: 1.45; color: #333; letter-spacing: 0; margin-top: 10px; }

/* river */
.river { display: grid; gap: 0; }
.river-item {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.river-item h3 { font-size: 26px; line-height: 1.18; margin-bottom: 6px; }
.river-item .timestamp { margin-top: 8px; display: block; }
.river-item img { width: 240px; height: 160px; object-fit: cover; }

.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.card h3 { font-size: 22px; line-height: 1.22; margin-bottom: 6px; }
.card img { margin-bottom: 12px; }
.card .timestamp { display: block; margin-top: 8px; }

/* ==========================================================================
   Article
   ========================================================================== */

.article-head { max-width: 780px; margin: 44px auto 0; padding: 0 24px; }
.article-head h1 { font-size: 52px !important; line-height: 1.05; margin: 6px 0 14px; }
.article-head .dek { font-size: 21px; color: #333; }
.article-meta {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0 0; padding: 14px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.05em; color: var(--muted);
}
.article-meta .author { text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); font-weight: 700; }

.article-figure { max-width: 1000px; margin: 26px auto 0; padding: 0 24px; }
.article-figure figcaption { font-family: var(--sans); font-size: 11px; color: var(--muted); margin-top: 8px; }

.article-body { max-width: 700px; margin: 30px auto 0; padding: 0 24px; font-size: 20px; line-height: 1.7; }
.article-body p { margin: 0 0 1.3em; }
.article-body h2 { font-size: 28px; margin: 1.6em 0 0.6em; }
.article-body h3 { font-size: 23px; margin: 1.4em 0 0.5em; }
.article-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.article-body blockquote { margin: 1.8em 0; padding-left: 22px; border-left: 3px solid var(--blue); font-style: italic; font-size: 22px; }
.article-body ul, .article-body ol { margin: 0 0 1.3em 1.3em; list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.4em; }
.article-body img { margin: 1.6em 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 16px; }
.article-body th, .article-body td { border-bottom: 1px solid var(--rule); padding: 9px 10px; text-align: left; }
.article-body th { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }

.article-foot { max-width: 700px; margin: 34px auto 0; padding: 22px 24px 0; border-top: 1px solid var(--rule); }
.source-credit { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.source-credit a { color: var(--blue); text-decoration: underline; }

/* page-level buttons */
.hl-button {
  display: inline-block;
  background: var(--blue);
  color: #fff !important;
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  margin-top: 10px;
}
.hl-button:hover { background: var(--blue-dark); color: #fff !important; text-decoration: none; }
.page-note { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-top: 18px; }

.tag-row { max-width: 700px; margin: 18px auto 0; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-row a {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 6px 10px; color: var(--muted);
}
.tag-row a:hover { border-color: var(--ink); color: var(--ink); }
.related { margin: 50px auto 0; max-width: 1100px; padding: 0 24px 40px; }

/* archive */
.archive-head { border-bottom: 1px solid var(--rule-ink); padding: 42px 0 18px; margin-bottom: 8px; }
.archive-head h1 { font-size: 44px; }
.archive-head p { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 8px; }

/* footer */
.site-footer { border-top: 1px solid var(--rule-ink); margin-top: 50px; padding: 32px 0 40px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: baseline; gap: 12px; }
.footer-brand .brand-mark { font-size: 40px; line-height: 0.8; }
.footer-brand .brand-word { font-size: 22px; margin-top: 0; }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-nav a { font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.footer-legal {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 11px; color: var(--muted); letter-spacing: 0.03em;
}

/* pager */
.pager { display: flex; gap: 10px; justify-content: center; margin: 36px 0; }
.pager a, .pager span {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 9px 14px;
}
.pager .current, .pager a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .header-grid { min-height: 160px; }
  .brand-mark { font-size: 96px; }
  .brand-word { font-size: 26px; }
  .top-grid { grid-template-columns: 1fr 1.6fr; }
  .top-grid .rail { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .three-col { grid-template-columns: 1fr 1fr; }
  .article-head h1 { font-size: 42px; }
}

@media (max-width: 760px) {
  body { font-size: 18px; }
  .header-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px 16px 14px;
    gap: 12px;
    text-align: center;
  }
  .nav-left, .nav-right { justify-content: center; flex-wrap: wrap; gap: 14px; }
  .nav-left .nav-list { gap: 14px; justify-content: center; }
  .brand { order: -1; }
  .brand-mark { font-size: 84px; }
  .brand-word { font-size: 24px; margin-top: 2px; }
  .top-grid, .three-col { grid-template-columns: 1fr; gap: 26px; }
  .top-grid .rail { grid-template-columns: 1fr; }
  .river-item { grid-template-columns: 1fr 110px; gap: 14px; }
  .river-item img { width: 110px; height: 74px; }
  .river-item h3 { font-size: 19px; }
  .article-head h1 { font-size: 31px; }
  .article-body { font-size: 18px; }
}