/*
 * eARThPeace-theme / theme.css
 * Clean consolidated version — replaces all FIX-1 through FIX-14 blocks.
 * No redundant rules. No superseded values. Same visual output.
 * Generated: 2026-06-06
 */

/* ── FONTS (self-hosted, no CDN) ─────────────────────────────── */
@font-face { font-family:'Merienda'; src:url('../fonts/merienda-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Merienda'; src:url('../fonts/merienda-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Raleway'; src:url('../fonts/raleway-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Raleway'; src:url('../fonts/raleway-semibold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Dancing Script'; src:url('../fonts/dancingscript-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  --color-abyss:        #0D2420;
  --color-deep-forest:  #122E28;
  --color-forest-floor: #173C35;
  --color-canopy:       #1D4A42;
  --color-moss:         #245C52;
  --color-parchment:    #E8D5A3;
  --color-ochre:        #D4A853;
  --color-amber-cave:   #C4883E;
  --color-red-clay:     #A67B5B;
  --color-cave-sage:    #7A9B6E;
  --font-heading: 'Merienda', Georgia, serif;
  --font-body:    'Raleway', 'Segoe UI', sans-serif;
  --font-quote:   'Dancing Script', cursive;
  --content-max:  1280px;
  --pad-h:        2.5rem;
  --pad-v:        3rem;
  --card-radius:  6px;
  --btn-radius:   4px;
}

/* ── BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, input, button, select, textarea {
  font-family: 'Raleway', 'Segoe UI', sans-serif !important;
}
body {
  margin: 0; padding: 0;
  background: var(--color-abyss)
    url('/user/pages/00.assets/eARThPeaceBG-256-OMA-pihalta.png')
    repeat fixed left top !important;
  background-size: auto !important;
  color: var(--color-parchment);
  font-size: 1.15rem;
  line-height: 1.75;
}

/* ── LAYOUT — override future2021 flex wrapper ───────────────── */
/*
 * Parent future2021 rules that require override (cannot be avoided):
 *   #wrapper { display:flex; flex-direction:row-reverse; padding:4.5em }
 *   #main { min-width:70% }  <- from flex child context
 *   #header { position:fixed; height:3.5em }
 */
#wrapper {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
}
#main {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  background: transparent !important;
  color: var(--color-parchment);
  padding-top: 3.5em; /* clears fixed #header */
}

.ep-main { width: 100%; display: block; }

/* ── CONTENT COLUMN (1280px centred) ────────────────────────── */
.content-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad-h);
  box-sizing: border-box;
  width: 100%;
}
.ep-sections {
  max-width: var(--content-max);
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  display: block;
  float: none !important;
}

/* ── TYPOGRAPHY ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Merienda', Georgia, serif !important;
  color: var(--color-ochre);
  line-height: 1.25;
  margin: 0 0 0.75em;
}
#main p, #main li, #main td,
.ep-main p, .ep-main li,
.section-content p, .section-content li, .section-content span {
  font-family: 'Raleway', 'Segoe UI', sans-serif !important;
  color: var(--color-parchment);
}
#main h1, #main h2, #main h3,
.ep-main h1, .ep-main h2, .ep-main h3,
.section-content h1, .section-content h2, .section-content h3 {
  font-family: 'Merienda', Georgia, serif !important;
  color: var(--color-ochre);
}
a { color: var(--color-amber-cave); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--color-red-clay); }
blockquote, blockquote * {
  font-family: 'Dancing Script', cursive !important;
  color: var(--color-cave-sage);
  border-left: 3px solid var(--color-moss);
  padding: 0.5em 1em;
  margin: 1.5em 0;
  font-size: 1.15rem;
  background: rgba(36,92,82,0.25);
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
}
#main article img {
  max-width: 100%; height: auto; display: block;
  margin: 1.5rem auto; border-radius: var(--card-radius);
}
#site-footer img { width: auto !important; max-width: none; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
/* All buttons: amber fill + white text. No transparent variant. */
.button, a.button,
.section-content .button, .section-content a.button,
#main .button, #main a.button,
.button.primary, a.button.primary {
  display: inline-block;
  padding: 0.55em 1.4em;
  background: var(--color-amber-cave) !important;
  color: #ffffff !important;
  border: 1px solid var(--color-amber-cave) !important;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-decoration: none;
}
.button:hover, a.button:hover,
.section-content .button:hover,
#main .button:hover {
  background: var(--color-ochre) !important;
  border-color: var(--color-ochre) !important;
  color: #ffffff !important;
  text-decoration: none;
}

/* ── HEADER + NAV ────────────────────────────────────────────── */
#header {
  background-color: var(--color-canopy) !important;
  border-bottom: 1px solid var(--color-moss);
}
#header > *, #header .inner, #header .container {
  background-color: transparent !important;
}
#header a, #header nav, #header nav a,
#header .logo a, #header h1, #header h2, #header .site-name {
  font-family: 'Merienda', Georgia, serif !important;
  letter-spacing: 0.04em;
}
/* Dropdown submenus */
#header nav li ul, #header nav ul ul,
#header nav li.has-sub ul, #header nav li.has-dropdown ul,
#header nav .sub-nav, #header li > ul {
  background: var(--color-deep-forest) !important;
  border: 1px solid var(--color-moss) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
}
#header nav li ul a, #header nav ul ul a, #header li > ul a {
  color: var(--color-parchment) !important;
  font-family: 'Merienda', Georgia, serif !important;
  background: transparent !important;
}
#header nav li ul a:hover, #header li > ul a:hover {
  background: var(--color-canopy) !important;
  color: var(--color-ochre) !important;
}

/* ── ARTICLE PAGES — override parent .post rules ─────────────── */
/*
 * Parent future2021 rules that require override:
 *   .post { background:#ffffff; padding:3em; border:solid 1px }
 *   .post > header { left:-3em; width:calc(100%+6em) }
 */
.ep-main article.post {
  background: rgba(23, 60, 53, 0.75) !important;
  border: none !important;
  padding: var(--pad-v) var(--pad-h) !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}
.ep-main article.post > header {
  position: static !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  margin: 0 0 1.5rem 0 !important;
  display: block !important;
  border-bottom: 1px solid var(--color-moss);
  padding: 0 0 1rem 0;
}
.ep-main article.post h1,
.ep-main article.post .post-title {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  margin: 0 0 0.5rem;
}
.post-hero { width: 100%; margin-bottom: var(--pad-v); }
.post-hero img {
  width: 100% !important; max-width: 100% !important;
  height: auto; display: block; border-radius: var(--card-radius);
}
.ep-main .post-content,
.ep-main .post-content p,
.ep-main .post-content li {
  font-family: 'Raleway', 'Segoe UI', sans-serif !important;
  color: var(--color-parchment);
}

/* ── MODULAR SECTIONS ────────────────────────────────────────── */
section#text { background-image: none; padding: 0; }
.ep-section {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: visible;
}
.ep-section.has-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.ep-section.has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 8, 0.60);
  z-index: 0;
}
.section-content {
  position: relative;
  z-index: 1;
  padding: var(--pad-v) var(--pad-h);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  text-align: center;
  background: transparent;
}
/* Showcase section (dev ref) */
.ep-section.showcase {
  background: var(--color-deep-forest);
  min-height: auto !important;
}
.ep-section.showcase .section-content {
  text-align: left !important;
  max-width: 960px;
}
.ep-section.showcase table { width:100%; border-collapse:collapse; margin:0 auto 2rem; }
.ep-section.showcase td, .ep-section.showcase th { vertical-align:middle; }

/* ── OFFCANVAS MENU (#menu) ──────────────────────────────────── */
section#menu { background: var(--color-deep-forest) !important; }
section#menu .inner, section#menu > div, section#menu > section,
section#menu > nav, section#menu .menu-wrap, section#menu .sidebar-content {
  background: var(--color-deep-forest) !important;
}
section#menu svg, section#menu img, section#menu i, section#menu .icon {
  background: transparent !important;
}
section#menu a, section#menu li, section#menu ul li a, section#menu > nav a {
  font-family: 'Merienda', Georgia, serif !important;
  color: var(--color-parchment) !important;
}
section#menu h1, section#menu h2, section#menu h3, section#menu h4 {
  font-family: 'Merienda', Georgia, serif !important;
  color: var(--color-ochre) !important;
}
section#menu a:hover { color: var(--color-ochre) !important; }
a.close-menu, #menu .close { color: var(--color-parchment) !important; }

/* ── FOOTER ──────────────────────────────────────────────────── */
#site-footer {
  background: var(--color-deep-forest);
  border-top: 1px solid var(--color-moss);
  padding: 3rem 0 1.5rem;
  margin-top: 3rem;
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
.footer-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
  padding: 0 var(--pad-h);
}
.footer-col { text-align: center !important; }
.footer-col ul { list-style: none !important; padding: 0 !important; margin: 0; }
.footer-col li, .footer-col p, .footer-col a { text-align: center !important; }
.footer-col h4 {
  font-family: 'Merienda', Georgia, serif !important;
  color: var(--color-ochre);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1rem;
}
.footer-col a { color: var(--color-cave-sage); font-size: 0.9rem; }
.footer-col a:hover { color: var(--color-parchment); }
.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  padding: 1rem var(--pad-h) 0;
  border-top: 1px solid var(--color-moss);
  color: var(--color-cave-sage);
  font-size: 0.82rem;
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --pad-h: 1.75rem; --pad-v: 2.5rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  :root { --pad-h: 1.25rem; --pad-v: 2rem; }
  .ep-main article { padding: 1.5rem var(--pad-h); }
  .ep-section { min-height: 300px; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .section-content {
    text-align: center !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .ep-main .post-content,
  .ep-main .post-content p { text-align: left !important; }
  .content-wrap,
  .ep-main article {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (min-width: 481px) {
  .ep-sections, .ep-main, #site-footer {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    float: none !important;
  }
}

/* ── bold / strong colour fix ───────────────────────────────────────────────
   Parent theme future2021 sets strong/b to a grey that is unreadable on dark
   backgrounds. Override with ochre on all content areas.
   Added: 2026-06-07 */
.ep-main strong,
.ep-main b,
.section-content strong,
.section-content b,
.post-content strong,
.post-content b {
  color: var(--color-ochre);
}

/* ── anchor mark hide ────────────────────────────────────────────────────────
   Heading id attributes stay in DOM (SEO + page linking intact).
   The visible # symbol is suppressed site-wide. Added: 2026-06-07 */
.anchorjs-link,
.heading-anchor,
a.anchor,
a.headerlink,
h1 > a[href^="#"],
h2 > a[href^="#"],
h3 > a[href^="#"],
h4 > a[href^="#"] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FIX-15 — Spacing + transparency  2026-06-14
   ═══════════════════════════════════════════════════════════════════ */

/* 200 px breathing room above TonttuNet title — first home section only.
   When hero section (_acover) is added later this selector will need
   updating to target _intro1 directly (e.g. via section_class). */
.ep-sections .ep-section:first-child .section-content {
    padding-top: 200px;
}

/* Text column background — 10 % opacity (90 % transparent) on all pages.
   Replaces previous rgba(23,60,53,0.75) on article pages.              */
.ep-main article.post,
.ep-main article.post.default {
    background: rgba(23, 60, 53, 0.10) !important;
}

/* Home sections — same subtle background, matching article pages.       */
.ep-section .section-content {
    background: rgba(23, 60, 53, 0.10);
}


/* ═══════════════════════════════════════════════════════════════════
   FIX-16 — Column revert + text-level tint  2026-06-14
   Reverts FIX-15 column transparency; moves 10% tint to text elements.
   ═══════════════════════════════════════════════════════════════════ */

/* Article pages: column background back to ~80% opacity             */
.ep-main article.post,
.ep-main article.post.default {
    background: rgba(23, 60, 53, 0.80) !important;
}

/* Home sections: section-content back to transparent (FIX-14 state) */
.ep-section .section-content {
    background: transparent;
}

/* 10% dark green tint behind paragraph + list text — all pages      */
.post-content p,
.post-content li,
.section-content p,
.section-content li {
    background: rgba(13, 36, 32, 0.10);
}


/* FIX-17 — Text tint raised from 10% to 20%  2026-06-14 */
.post-content p,
.post-content li,
.section-content p,
.section-content li {
    background: rgba(13, 36, 32, 0.20);
}


/* _acover hero-cover: neutralise :first-child top padding  2026-06-14 */
.ep-section.hero-cover .section-content {
    padding-top: 0 !important;
}

/* _acover hero-cover: column box background — matches article pages  2026-06-14 */
.ep-section.hero-cover .section-content {
    background: rgba(23, 60, 53, 0.80);
}

/* _intro1 tonttunet-intro: restore top padding (moved from :first-child)  2026-06-14 */
.ep-section.tonttunet-intro .section-content {
    padding-top: 200px;
}

/* ---- 2026-06-14: one line of space above PsymBatik section ---- */
/* Separates _zpsymbatik from the _tonttustudio4 section directly above. */
/* ~1 line of body text; tune the value if you want a bigger/smaller gap. */
.ep-section.section-gap-top {
    margin-top: 1.75rem;
}

/* ---- 2026-06-14: TonttuTölli gallery iframe section ---- */
.ep-gallery-section {
    margin-top: 1.75rem;   /* one line of space above the gallery */
    width: 100%;
}
.ep-gallery-title {
    font-family: 'Merienda', Georgia, serif;
    color: var(--color-ochre);
    margin: 0 0 0.75rem;
}
.ep-gallery-frame {
    width: 100%;
    border: 0;
    display: block;
    min-height: 600px;     /* fallback until the gallery reports its height */
}

/* ---- 2026-06-14: TonttuTölli folder slider ---- */
.ep-gallery-section { margin-top: 1.75rem; width: 100%; }
.ep-gallery-title   { font-family: 'Merienda', Georgia, serif; color: var(--color-ochre); margin: 0 0 0.75rem; }
.ep-slider {
    position: relative;
    width: 100%;
    height: clamp(300px, 60vh, 700px);
    overflow: hidden;
    border-radius: 6px;
    background: var(--color-deep-forest);
}
.ep-slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1s ease;
}
.ep-slide.is-active { opacity: 1; }

/* ---- 2026-06-14: unify content + footer width with home sections ---- */
/* Article content box spans the full content column, like .ep-section does. */
.ep-main .content-wrap,
.ep-main article.post {
    max-width: var(--content-max);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Footer matches the same column width. */
#site-footer,
#site-footer .footer-grid {
    max-width: var(--content-max);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ---- 2026-06-15: gallery iframe ---- */
.ep-gallery-frame { width: 100%; border: 0; display: block; min-height: 600px; }

/* ═══════════════════════════════════════════════════════════════════
   PROMPT-1 fix 2026-06-15
   ─────────────────────────────────────────────────────────────────── */

/* PART A — mobile: full-viewport-width column boxes, horizontally centred.
   Root cause: parent #wrapper { padding:1.5em } at ≤736px shrinks the
   content box so #main / .ep-main end up narrower than the viewport;
   below 481px the (min-width:481px) auto-margin block does not fire,
   leaving .ep-sections uncentred.
   Fix: strip all horizontal padding/offset from wrapper chain at ≤736px,
   force each tier to 100% width and symmetric margins.              */
@media (max-width: 736px) {
  #wrapper, #main, .ep-main, .ep-sections {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    float: none !important;
  }
  .ep-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .section-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }
}

/* PART B — front-page eARThPeace heading: ~2 line-heights of top space.
   Scoped to .hero-cover so no other section heading is affected.
   The :first-child section-level padding was deliberately zeroed
   (.hero-cover .section-content { padding-top:0 }) — this puts the
   space on the HEADING element instead.                             */
.ep-section.hero-cover .section-content h1 {
  margin-top: 2.75rem;
}

/* ═══════════════════════════════════════════════════════════════════
   Article page alignment fix — 2026-06-16
   Root causes:
   1. .content-wrap has padding: 0 var(--pad-h) in addition to
      article.post own padding-h — text column ends up double-padded
      and narrower than .section-content on the front page.
   2. Parent future2021 shifts .post with:
        @media (max-width:980px) { .post { left:-3em; width:calc(100%+6em) } }
        @media (max-width:736px) { .post { left:-1.5em; width:calc(100%+3em) } }
      These rules were tuned for the parent's padded #wrapper. With
      our wrapper padding zeroed, the article shifts off-centre left.
   Fix: strip .content-wrap horizontal padding; lock .post to
   left:auto + width:100% with a more-specific selector + !important
   so parent media-query !important declarations cannot win.
   ═══════════════════════════════════════════════════════════════════ */

/* Remove .content-wrap side padding (article.post provides its own) */
.ep-main .content-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Neutralise parent .post left-offset + calc-width at all breakpoints */
.ep-main article.post {
  left: auto !important;
  width: 100% !important;
}


/* ---- 2026-06-16: centre TonttuTölli Gallery section title ---- */
/* Scoped to .ep-gallery-title (only the gallery heading in default.html.twig) */
.ep-gallery-title { text-align: center; }

/* ---- 2026-06-16: TonttuTölli contact form section ---- */
/* Background matches article.post (rgba(23,60,53,0.80) from FIX-16).
   Panel spans the same column width as the content-wrap; form fields
   are centred at 640px inside it. One line gap above (~1.5rem). */
.ep-form-section {
  background: rgba(23, 60, 53, 0.80);
  max-width: var(--content-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
  padding: var(--pad-v) var(--pad-h);
  box-sizing: border-box;
}
.ep-form-section form {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.ep-form-title { text-align: center; }

/* ---- 2026-06-16: gallery title panel + form→gallery gap ---- */

/* CHANGE 1: .ep-gallery-title gets the same tinted-panel background
   as the text column boxes (rgba(23,60,53,0.80) from FIX-16).
   Vertical padding sized for a single headline line; horizontal
   matches the section padding token. text-align:center stays from
   the earlier rule. */
.ep-gallery-title {
  background: rgba(23, 60, 53, 0.80);
  padding: 0.85rem var(--pad-h);
  margin: 0 0 0.75rem;
}

/* CHANGE 2: 2-line gap between form section and gallery.
   .ep-gallery-section already contributes margin-top:1.75rem;
   adding 1.25rem here brings total gap to exactly 3rem (~2 lines). */
.ep-form-section { margin-bottom: 1.25rem; }

/* ── FIX: form field labels — readable, Raleway, lighter weight (2026-06-24) ── */
.ep-main form label,
.ep-main .form-field label,
.ep-main form .form-group label {
  color: var(--color-parchment) !important;   /* #E8D5A3 — body text colour */
  font-family: var(--font-body) !important;    /* Raleway */
  font-weight: 400 !important;                 /* regular = thinner than bold */
}

/* ── FIX: form + table text — theme font, palette colour, readable (2026-06-24) ── */

/* Labels: Name / E-mail / Subject / Message */
.ep-main form label,
.ep-main .form-field label {
  color: var(--color-parchment) !important;   /* #E8D5A3 body-text colour */
  font-family: var(--font-body) !important;    /* Raleway */
  font-weight: 400 !important;                 /* regular = thinner than default */
}

/* Input boxes, textarea, select — dark-field treatment so typed text is legible */
.ep-main form input,
.ep-main form textarea,
.ep-main form select {
  color: var(--color-parchment) !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  background-color: var(--color-deep-forest);  /* #122E28 dark field */
  border: 1px solid var(--color-moss);         /* #245C52 */
  border-radius: var(--btn-radius);
}

/* Placeholder text inside the boxes — readable but dimmer than typed text */
.ep-main form ::placeholder {
  color: var(--color-parchment) !important;
  opacity: 0.7;
}

/* Tables ("sheets") — same font + palette text colour */
.ep-main table,
.ep-main th,
.ep-main td {
  color: var(--color-parchment) !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
}

/* Blockquote / pull-quote — ~10% larger (size only; keep Dancing Script + colour) */
.ep-main blockquote,
.ep-main blockquote * {
  font-size: 1.1em !important;
}

/* ---- FIX: blockquote / pull-quote font (Dancing Script) ---- */
.ep-main blockquote,
.section-content blockquote,
.post-content blockquote {
  font-family: var(--font-quote), 'Dancing Script', cursive !important;
  font-size: 1.6rem;
  line-height: 1.4;
}