/* ==========================================================
   JORDANI KOGUDUS — kohandatud avalehe kujundus
   Disainitokenid:
   Sinine (logo põhi):  #1E3A5F
   Oranž (rist, aktsent): #F5821F
   Kreem (soe taust):    #FAF6F0
   Salvei (loodus/tiik): #6E8F6B
   Tint (tekst):         #22282E
   ========================================================== */

:root {
    --church-navy: #1E3A5F;
    --church-navy-dark: #12253C;
    --church-orange: #F5821F;
    --church-cream: #FAF6F0;
    --church-sage: #6E8F6B;
    --church-ink: #22282E;
    --church-font-display: 'Fraunces', Georgia, serif;
    --church-font-body: 'Work Sans', -apple-system, sans-serif;
}

/* Sujuv kerimine, kui klikitakse ankurlingil (nt #teenistused, #uudised) */
html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

body.archive, body.single, body.page {
    margin: 0;
    padding: 0;
}

body.archive #masthead,
body.single #masthead,
body.page #masthead,
body.archive .site-header,
body.single .site-header,
body.page .site-header {
    margin-top: 0 !important;
    border-top: none !important;
}
/* v10.3: Astra enda vaikimisi reegel (".ast-primary-header-bar.main-header-bar")
   lisab 10px "margin-top", mis paljastas läbipaistva päise taga oleva
   tausta õhukese valge ribana. Nullime selle spetsiifiliselt. */
body.archive .ast-primary-header-bar.main-header-bar,
body.single .ast-primary-header-bar.main-header-bar,
body.page .ast-primary-header-bar.main-header-bar {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* ==========================================================
   GLOBAALNE STIIL — kehtib KÕIGIL lehtedel (mitte ainult avalehel),
   nt uudiste arhiiv, kategooriad, üksikpostitused. Sama disainikeel,
   mis avalehel: Fraunces pealkirjadele, Work Sans tekstile, sinine/oranž.
   ========================================================== */

body {
    font-family: var(--church-font-body);
    color: var(--church-ink);
    background: var(--church-cream);
    overflow-x: hidden; /* väldib 100vw hero-triki tekitatud horisontaalset libisemist */
    overflow-y: visible; /* väldib overflow-x:hidden kõrvalmõju, mis lõikaks hero foto üleulatuva osa */
}

/* Mõned Astra kihid (#page, #content) määravad oma valge tausta,
   mis kattis body enda kreemika tausta — katame need ka üle.
   NB: ".site" klass eemaldatud — see tekitas kreemika riba päise
   kohale, kuna ".site" ümbritseb ka päist ennast avalehel. */
#page,
#content,
.site-content {
    background: var(--church-cream) !important;
}

/* Font kehtib laialt, aga VÄRVI ei suru me bare h1-h5 peale, kuna see
   rikkus avalehe hero-pealkirja (mis peab jääma valgeks), olles
   !important ja seega tugevam kui .church-hero__title enda värv. */
h1, h2, h3, h4, h5 {
    font-family: var(--church-font-display) !important;
}

.page-title, .entry-title,
.ast-archive-title, .archive-title {
    font-family: var(--church-font-display) !important;
    color: var(--church-navy) !important;
}

a {
    color: var(--church-navy);
}
a:hover {
    color: var(--church-orange);
}
/*Logo allapoole*/
.ast-site-identity {
	margin-top: 10px;
}	

/* Uudiste/postituste "loe rohkem" nupud ja sarnased lingid.
   NB: Astra puhul on klass "read-more" tegelikult ümbritseval <p>
   elemendil, mitte lingil endal — seega vajame "a" järelkäijana. */
.ast-button,
.more-link,
a.read-more,
a.ast-button,
.wp-block-post-excerpt__more-link,
.wp-block-query .wp-block-post-excerpt__more-link,
a.wp-element-button,
.wp-block-button__link,
p.read-more a,
.ast-read-more-container a {
    background: var(--church-orange) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none !important;
    display: inline-block;
    font-weight: 600;
}
.ast-button:hover,
.more-link:hover,
a.read-more:hover,
.wp-block-post-excerpt__more-link:hover,
a.wp-element-button:hover,
p.read-more a:hover,
.ast-read-more-container a:hover {
    background: #d96e0f !important;
    color: #fff !important;
}

/* Arhiivi/kategooria lehe pealkirja-plokk (nt "Koguduse uudised") —
   vaheta helesinine taust kreemika vastu, sama mis avalehel */
.ast-archive-description {
    background-color: var(--church-cream) !important;
    margin-top: 230px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 100px !important;
    position: relative;
    z-index: 5; /* peab olema kõrgem kui .church-archive-hero (z-index:1) */
}

/* Üksiku postituse pealkiri/meta jäävad muidu foto alumise serva peale
   kattuma — anname sama moodi ruumi ja tõstame stacking'u kõrgemale.
   NB: eraldatud "single" (postitus) ja "page" (nt Kontakt) reeglid,
   et saaksid neid tulevikus SÕLTUMATULT kohandada, ilma et see mõjutaks
   .entry-title klassi, mida kasutatakse KA kategooria postituste
   loendis (seal ei tohi seda muuta!). */
body.single .entry-header {
    margin-top: -20px !important; /* <-- MUUDA SEDA ARVU, kui soovid üksiku postituse pealkirja kõrgust muuta */
    position: relative;
    z-index: 5;
    width: 100%;
    flex-basis: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-left: 60px;
    padding-right: 60px;
    text-align: center;
}

/* NB: need kaks jäävad ilma oma marginaalita, kuna .entry-header on
   nende SEES — kui kõigile kolmele anda sama marginaal, "liidetakse"
   need kokku ja tekst nihkub palju rohkem kui kast ise (nagu nägime). */
body.single article > .ast-post-format,
body.single .ast-article-single {
    margin-top: 230px !important;
    position: relative;
    z-index: 5;
    width: 100%;
    flex-basis: 100%;
    flex-shrink: 0;
}

body.page .entry-header {
    margin-top: 330px !important; /* <-- MUUDA SEDA ARVU, kui soovid nt Kontakt lehe pealkirja kõrgust muuta */
    position: relative;
    z-index: 5;
    width: 100%;
    flex-basis: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-left: 60px;
    padding-right: 60px;
    text-align: center;
}

body.page article > .ast-post-format,
body.page .ast-article-single {
    margin-top: 0 !important;
    position: relative;
    z-index: 5;
    width: 100%;
    flex-basis: 100%;
    flex-shrink: 0;
}

body.single .entry-header .entry-title,
body.page .entry-header .entry-title,
body.page .entry-title,
body.single .entry-title {
    font-size: 2.5rem !important;
    text-align: center !important;
}

#main.site-main,
#main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* "Koguduse uudised / admin" tüüpi metainfo oranžiks (nii kategooria
   kui autori link) — lisatud rohkem valikuid, kuna "admin" tekst
   ei kasutanud eelnevalt proovitud klasse */
.entry-meta,
.entry-meta a,
.entry-meta a:link,
.entry-meta a:visited,
.ast-taxonomy-container,
.ast-taxonomy-container a,
.posted-by,
.posted-by a,
.vcard,
.vcard a,
.author,
.author a,
.byline,
.byline a,
[itemprop="author"],
[itemprop="author"] a,
[rel="author"],
.author-name {
    color: var(--church-orange) !important;
}

/* Peidame "By admin" autori info täielikult postituse meta-realt */
.posted-by,
span.posted-by,
.entry-meta .posted-by {
    display: none !important;
}

/* Üksiku postituse "kast" (nt "Jõuluaeg 2022...") arhiivi loendis —
   sama helesinine taust, mis nüüd samuti kreemikaks vahetub */
.ast-article-post,
article.ast-article-post,
.ast-separate-container .ast-article-post,
.entry-content,
.post-content,
.ast-grid-common-col,
.single .ast-article-single {
    background-color: var(--church-cream) !important;
}

/* "Eelmine/Järgmine postitus" navigatsioonilingid oranžiks */
.post-navigation a,
.post-navigation .nav-title,
.nav-links a,
.ast-post-navigation a,
.navigation.post-navigation a,
.nav-previous a,
.nav-next a {
    color: var(--church-orange) !important;
}

.church-home {
    background: var(--church-cream);
    color: var(--church-ink);
    font-family: var(--church-font-body);
    overflow-x: hidden;
    overflow-y: visible; /* väldib CSS-i iseärasust, kus overflow-x:hidden muudab automaatselt overflow-y:auto, lõigates ära hero foto negatiivse marginaaliga üleulatuva osa */

    /* "Full-bleed" tehnika: murrab elemendi välja mistahes lapsevanema
       konteineri laiuspiirangust (nt Astra "ast-container", "content-area" jms),
       olenemata sellest, milline täpne klass või seadistus seda tekitab.
       See on kindlam kui proovida ära arvata Astra sisemisi klassinimesid. */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Turvavõrk: kui Astra filtrid (functions.php) millegipärast ei toimi,
   sunnime siin CSS-iga meie malli konteinerid ikkagi täislaiuseks,
   eemaldades Astra vaikimisi külgriba/kitsa konteineri piirangud. */
body.page-template-page-templatestemplate-avaleht-php #primary,
body.page-template-page-templatestemplate-avaleht-php #content,
body.page-template-page-templatestemplate-avaleht-php .ast-container,
body.page-template-page-templatestemplate-avaleht-php .site-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    float: none !important;
    overflow: visible !important;
}
body.page-template-page-templatestemplate-avaleht-php .content-area {
    width: 100% !important;
    float: none !important;
    overflow: visible !important;
}
body.page-template-page-templatestemplate-avaleht-php #page,
body.page-template-page-templatestemplate-avaleht-php .site,
body.page-template-page-templatestemplate-avaleht-php main#main {
    overflow: visible !important;
}

.church-home h1, .church-home h2, .church-home h3 {
    font-family: var(--church-font-display);
    font-weight: 600;
}

/* ---------- ÜHISED ELEMENDID ---------- */

.church-section-title {
    text-align: center;
    font-size: clamp(1.6em, 4vw, 2.3em);
    color: var(--church-navy);
	margin-top: -60px;
    margin-bottom: 40px;
    position: relative;
}

.church-section-title--left { text-align: left; }

.church-section-title--on-dark { color: #fff; }

.church-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 4px;
    font-family: var(--church-font-body);
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.church-btn--primary {
    background: var(--church-orange);
    color: #fff;
}

.church-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 130, 31, 0.35);
    color: #fff;
}

.church-link-more {
    display: inline-block;
    margin-top: 14px;
    color: var(--church-orange);
    font-weight: 600;
    text-decoration: none;
}
.church-link-more:hover { text-decoration: underline; }

/* ---------- HERO ---------- */

.church-hero {
    position: relative;
    min-height: 80vh;
    background-size: cover;
    background-position: center;
    background-color: var(--church-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: -120px; /* tõstab foto otse päise alla, samamoodi nagu teistel lehtedel */
    z-index: 1;
}

/* Avalehe päis läbipaistvaks ja fotot kattes — kindel meetod, mis ei
   sõltu Astra enda "Transparent Header" seadistusest. */
body.page-template-page-templatestemplate-avaleht-php #masthead,
body.page-template-page-templatestemplate-avaleht-php .site-header,
body.page-template-page-templatestemplate-avaleht-php #ast-desktop-header,
body.page-template-page-templatestemplate-avaleht-php .ast-main-header-wrap,
body.page-template-page-templatestemplate-avaleht-php .main-header-bar,
body.page-template-page-templatestemplate-avaleht-php .ast-primary-header-bar,
body.page-template-page-templatestemplate-avaleht-php .site-primary-header-bar,
body.page-template-page-templatestemplate-avaleht-php .ast-primary-header {
    background: transparent !important;
    background-color: transparent !important;
}

body.page-template-page-templatestemplate-avaleht-php #masthead,
body.page-template-page-templatestemplate-avaleht-php .site-header {
    box-shadow: none !important;
    z-index: 20;
    margin-top: 0 !important;
    border-top: none !important;
}

body.page-template-page-templatestemplate-avaleht-php #masthead a,
body.page-template-page-templatestemplate-avaleht-php .site-header a {
    color: #fff !important;
}

/* v-fix: ülemine reegel ("#masthead a") kasutab ID-valijat, mis võitis
   hõljutuse-reegli (".main-header-menu > li > a:hover") ära, kuna sellel
   polnud ID-d. Lisame sama ID-ga hõljutuse-erandi, mis nüüd võidab. */
body.page-template-page-templatestemplate-avaleht-php #masthead a:hover,
body.page-template-page-templatestemplate-avaleht-php .site-header a:hover,
body.archive #masthead a:hover,
body.single #masthead a:hover,
body.page #masthead a:hover {
    color: var(--church-orange) !important;
}

/* Laiendan päise sisemised konteinerid täislaiuseks, et logo liiguks
   vasakule serva ja menüü paremale — nüüd KÕIKIDEL lehetüüpidel ühtselt. */
body.page-template-page-templatestemplate-avaleht-php .ast-main-header-wrap,
body.archive .ast-main-header-wrap,
body.single .ast-main-header-wrap,
body.page .ast-main-header-wrap,
body.page-template-page-templatestemplate-avaleht-php .main-header-bar-wrap,
body.archive .main-header-bar-wrap,
body.single .main-header-bar-wrap,
body.page .main-header-bar-wrap,
body.page-template-page-templatestemplate-avaleht-php .ast-primary-header-bar,
body.archive .ast-primary-header-bar,
body.single .ast-primary-header-bar,
body.page .ast-primary-header-bar,
body.page-template-page-templatestemplate-avaleht-php .site-primary-header-wrap,
body.archive .site-primary-header-wrap,
body.single .site-primary-header-wrap,
body.page .site-primary-header-wrap,
body.page-template-page-templatestemplate-avaleht-php .ast-builder-grid-row,
body.archive .ast-builder-grid-row,
body.single .ast-builder-grid-row,
body.page .ast-builder-grid-row,
body.page-template-page-templatestemplate-avaleht-php #masthead .ast-container,
body.archive #masthead .ast-container,
body.single #masthead .ast-container,
body.page #masthead .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

body.admin-bar.page-template-page-templatestemplate-avaleht-php .church-hero {
    margin-top: -152px;
}

.church-hero__overlay {
    position: absolute;
    inset: 0;
    /* Kergem kate — laseb foto tegelikel värvidel paremini läbi paista,
       loetavus tagatakse pigem tekstivarjuga (vt allpool) */
    /*background: linear-gradient(180deg, rgba(18,37,60,0.10) 0%, rgba(18,37,60,0.35) 100%);*/
}

.church-hero__content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 120px 24px 0;
}

.church-hero__title {
    color: #fff !important;
    font-size: clamp(2em, 6vw, 3.4em);
    line-height: 1.15;
    margin-bottom: 20px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.6);
}

.church-hero__subtitle {
    color: rgba(255,255,255,0.95);
    font-size: 1.15em;
    margin-bottom: 32px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Lainetav eraldusjoon — viide logo "laine" motiivile ja koguduse tiigi fotole */
.church-wave {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    line-height: 0;
    z-index: 2;
}
.church-wave svg { width: 100%; height: 50px; display: block; }
.church-wave path { fill: var(--church-cream); }

/* ---------- ARHIIVI/KATEGOORIA LEHE HERO-BÄNNER ---------- */
/* Väiksem versioon avalehe hero-pildist, ilma tekstita — kasutatakse
   arhiivi/kategooria lehtede (nt "Koguduse uudised") algusesse.
   Päis (logo + menüü) kaetakse selle peale, täpselt nagu avalehel. */

.church-archive-hero {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    flex-basis: 100vw; /* sunnib elemendi terve flex-rea laiuseks, jättes teised elemendid allapoole */
    flex-shrink: 0;
    height: 430px;
    background-size: cover;
    background-position: center;
    background-color: var(--church-navy);
    margin-bottom: 20px;
}

.church-archive-hero__overlay {
    position: absolute;
    inset: 0;
    /*background: linear-gradient(180deg, rgba(18,37,60,0.10) 0%, rgba(18,37,60,0.40) 100%);*/
}

/* Päis läbipaistvaks, ainult arhiivi/kategooria lehtedel (WordPress
   lisab automaatselt body.archive klassi). Päis jääb TAVAPÄRASESSE
   kohta (mitte position:absolute), et vältida järgneva sisu voo
   katkemist — selle asemel tõstame FOTO ise negatiivse marginaaliga
   päise alla, mis on palju robustsem lahendus. */
body.archive #masthead,
body.single #masthead,
body.page #masthead,
body.archive .site-header,
body.single .site-header,
body.page .site-header,
body.archive #ast-desktop-header,
body.single #ast-desktop-header,
body.page #ast-desktop-header,
body.archive .ast-main-header-wrap,
body.single .ast-main-header-wrap,
body.page .ast-main-header-wrap,
body.archive .main-header-bar,
body.single .main-header-bar,
body.page .main-header-bar,
body.archive .ast-primary-header-bar,
body.single .ast-primary-header-bar,
body.page .ast-primary-header-bar,
body.archive .site-primary-header-bar,
body.single .site-primary-header-bar,
body.page .site-primary-header-bar,
body.archive .ast-primary-header,
body.single .ast-primary-header,
body.page .ast-primary-header {
    background: transparent !important;
    background-color: transparent !important;
}

body.archive #masthead,
body.single #masthead,
body.page:not(.page-template-page-templatestemplate-avaleht-php) #masthead,
body.archive .site-header,
body.single .site-header,
body.page:not(.page-template-page-templatestemplate-avaleht-php) .site-header {
    box-shadow: none !important;
    position: relative;
    z-index: 20;
}

/* Foto tõstetakse negatiivse marginaaliga otse päise alla, ilma et
   peaksime päist "position: absolute" tegema (mis katkestas varem
   järgneva sisu voo ja tekitas "Koguduse uudised" pealkirja kadumise). */
.church-archive-hero {
    margin-top: -120px;
    position: relative;
    z-index: 1;
}

/* Kui WordPressi admin riba on nähtaval (ainult sisse logitud
   kasutajatele, mitte tavalistele külastajatele), lisab see 32px
   lisanihke lehe tippu — kompenseerime selle, et vältida õhukest
   triipu päise kohal. */
body.admin-bar.archive .church-archive-hero,
body.admin-bar.single .church-archive-hero,
body.admin-bar.page .church-archive-hero {
    margin-top: -152px;
}

/* Menüü/lingi tekst valgeks, et see oleks pildi taustal loetav */
body.archive #masthead a,
body.single #masthead a,
body.page #masthead a,
body.archive .site-header a,
body.single .site-header a,
body.page .site-header a,
body.archive .main-header-menu a,
body.single .main-header-menu a,
body.page .main-header-menu a {
	color: #fff !important;
}

/* Menüü teksti suurus — kehtib kõikjal, sh avalehel */
.main-header-menu a,
#masthead .menu-link,
.main-header-menu .menu-link {
    font-size: 1.15em !important;
}

/* Menüü tausta värv kõikidel lehtedel (logo piirkond jääb endiselt
   läbipaistvaks/fotoga) — ümarate nurkadega "pill" efekt */
body.page-template-page-templatestemplate-avaleht-php .main-header-menu,
body.archive .main-header-menu,
body.single .main-header-menu,
body.page .main-header-menu {
    background-color: rgba(245, 130, 31, 0.65) !important;
    border-radius: 30px !important;
}

/* Desktop'is teeme "pilli" kitsamaks — vähendame lingi enda padding'ut,
   mis vähendab terve riba laiust proportsionaalselt. */
@media (min-width: 922px) {
    .main-header-menu > li > a,
    .main-header-menu > li > .menu-link {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* Rippmenüü (nt "Arhiiv" alammenüü) — W3Schools "dropdown navbar" stiil,
   kohandatud brändi värvidega: valge kaart, vari, navy tekst, oranž hoover. */
.main-header-menu .sub-menu,
ul.sub-menu,
.astra-full-megamenu-wrapper {
    background: rgba(245, 130, 31, 0.65) !important;
    border: none !important;
    border-top: none !important;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) !important;
    border-radius: 6px;
    overflow: hidden;
    min-width: 180px;
    padding: 0 !important;
    margin: 0 !important;
}

/* Eemaldame igasuguse "li" enda padding/margin, mis tekitas valgeid
   tühimikke linkide vahel/ümber. */
.main-header-menu .sub-menu li,
ul.sub-menu li {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
}

.main-header-menu .sub-menu a,
ul.sub-menu a,
body.archive .main-header-menu .sub-menu a,
body.single .main-header-menu .sub-menu a,
body.page .main-header-menu .sub-menu a,
#ast-hf-menu-1 .sub-menu a {
    color: var(--church-navy) !important;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px;
    margin: 0 !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.main-header-menu .sub-menu a:hover,
ul.sub-menu a:hover,
body.archive .main-header-menu .sub-menu a:hover,
body.single .main-header-menu .sub-menu a:hover,
body.page .main-header-menu .sub-menu a:hover,
#ast-hf-menu-1 .sub-menu a:hover {
	background-color: rgba(255, 255, 255, 1) !important;
	color: var(--church-orange) !important;
}
/* Peamenüü ÜKSIKUD nupud (Esileht/Uudised/Arhiiv/Kontakt) saavad oma
   individuaalse hõljutus-tausta, nagu W3Schools'i näidises — mitte
   ainult üldine "pill" taust kogu ribale.
   v10.4: lisasin sama sujuva "transition", mis alammenüü linkidel juba
   on — varem polnud peamenüü linkidel ühtegi transition't määratud,
   mistõttu hõljutus tundus järsem/erinev alammenüüst. */
.main-header-menu > li > a,
.main-header-menu > li > .menu-link {
    transition: background-color 0.3s ease, color 0.3s ease !important;
}
.main-header-menu > li > a:hover,
.main-header-menu > li > .menu-link:hover {
	background-color: rgba(255, 255, 255, 1) !important;
	color: var(--church-orange) !important;
	border-radius: 30px !important;
}

/* Ainult DESKTOP'is: rippmenüü avaneb hõljutades (hover), täpselt nagu
   W3Schools'i näidises, ilma et peaks nupule klikkima. Mobiilis jääb
   alles klõpsu-põhine (chevron) avamine, kuna hover ei toimi puuteekraanil. */
@media (min-width: 922px) {
    .main-header-menu li.menu-item-has-children:hover > .sub-menu {
        display: block !important;
    }
}

/* Sunnime lapsevanema flex-konteineri "mähkima" (wrap), et hero-pilt
   võtaks terve rea ja sisu (#primary) jääks selle alla, mitte kõrvale.
   NB: ".flex" polnud tegelik CSS klass, vaid Firefoxi Inspectori enda
   visuaalne märgis — parandatud, kasutab nüüd ainult .ast-container. */
body.archive .ast-container,
body.single .ast-container,
body.page .ast-container {
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .church-archive-hero { height: 220px; }
}

/* ---------- TEENISTUSED ---------- */

.church-services {
    padding: 80px 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.church-services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.church-service-card {
    background: #fff;
    border-top: 4px solid var(--church-orange);
    border-radius: 6px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(30,58,95,0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.church-service-card__day {
    font-family: var(--church-font-display);
    font-size: 1.3em;
    color: var(--church-navy);
    font-weight: 600;
}

.church-service-card__time {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--church-orange);
}

.church-service-card__label {
    color: #555;
    font-size: 0.95em;
}

/* ---------- MEIST ---------- */

.church-about {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px 100px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}

.church-about__body { font-size: 1.05em; line-height: 1.7; color: #3a3a3a; }

/* Kui pilti pole määratud, kasuta täislaiust (sama laius, mis teenistuste
   ja Facebook feed sektsioonidel), mitte kitsast vasakut veergu */
.church-about--full {
    grid-template-columns: 1fr;
}
.church-about--full .church-about__text {
    max-width: 100%;
}

.church-about__image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(30,58,95,0.15);
}

@media (max-width: 780px) {
    .church-about { grid-template-columns: 1fr; }
    .church-about__image { order: -1; }
}

/* ---------- FACEBOOK FEED SEKTSIOON ---------- */

.church-fb-section {
    background: #fff;
    padding: 80px 24px;
}

.church-fb-section .church-section-title { max-width: 1100px; margin-left: auto; margin-right: auto; }

.church-fb-section .cfbf-feed {
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------- KONTAKT ---------- */

.church-contact {
    background: var(--church-navy-dark);
    padding: 90px 24px;
    position: relative;
}

.church-contact__inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.church-contact__details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.church-contact__line {
    color: rgba(255,255,255,0.9);
    font-size: 1.1em;
}

.church-contact__line a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--church-orange);
}
.church-contact__line a:hover { color: var(--church-orange); }

/* ---------- RESPONSIIVSUS ---------- */

@media (max-width: 600px) {
    .church-services, .church-about, .church-fb-section, .church-contact {
        padding-left: 16px;
        padding-right: 16px;
    }
    .church-hero { min-height: 70vh; }
}

/* ---------- MOBIILI PARANDUSED ---------- */
@media (max-width: 921px) {
    /* v9.8: päis kasvas (90px + 80px logo), nii et hero-pealkirja
       vanem vahe (120px, desktopile mõeldud) enam ei piisa — pealkiri
       jäi osaliselt logo taha peitu. Suurendame ainult mobiilis. */
    .church-hero__content {
        padding-top: 180px !important;
    }
    /* 1. Logo vasakule, hamburgeri nupp paremale.
       NB v9.0: DevTools kinnitas, et #ast-mobile-header JA
       .ast-mobile-header-wrap on SAMA element, mis ümbritseb ka
       menüüd ennast. "display:flex" sellel muudab automaatselt
       lapselementide vaikimisi suurust (flex-lapsed kahanevad
       sisu järgi, block-elemendid venivad täislaiuseks) — see
       lõhkuski menüü. Lahendus: liigutame AINULT nupu enda
       "position: absolute" abil, ilma parema elemendi display't
       muutmata — see ei mõjuta menüü avanemist üldse. */
    /* NB v9.3: DevTools näitas, et #ast-mobile-header enda kõrgus on
       lukustatud ~70px peale — nii ei aidanud logo max-height suurendamine
       (rida allpool), kuna VANEM-konteiner lõikas selle niikuinii ära.
       Suurendame ka päise enda kõrgust. */
    #ast-mobile-header,
    .ast-mobile-header-wrap {
        position: relative !important;
        min-height: 90px !important;
		padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }
    .ast-main-header-wrap.main-header-bar-wrap {
        min-height: 90px !important;
    }
    /* v9.9: "position: absolute" andis "right: 19px", mis viitas, et
       positsioneerimise lähtekonteiner (containing block) ei olnud
       täisekraani laiune. DevTools näitas ka, et nupp asub sügaval
       pesastuses (site-header-primary-section-right > ...> .ast-button-wrap)
       koos katkise inline-stiiliga ("margin-left: pXx"). Kasutame nüüd
       "position: fixed", mis kinnitub OTSE brauseriakna nurga, mitte
       ühegi vahekonteineri suhtes — see kõrvaldab ebakindluse täielikult. */
    .ast-button-wrap {
        position: fixed !important;
        top: 16px !important;
        right: 16px !important;
        margin: 0 !important;
        z-index: 999 !important;
    }
    body.admin-bar .ast-button-wrap {
        top: 48px !important; /* 16px + 32px adminiriba kõrgus */
    }

    /* Logo suuremaks mobiilis.
       NB v9.2: Astra enda reegel (".ast-header-break-point .custom-logo-link
       img") on täpsem kui meie eelmine valik, mistõttu see võitis ka
       !important korral. Kasutame siin ID-põhist valikut, mis on
       garanteeritult täpsem. */
    #ast-mobile-header .custom-logo-link img,
    #ast-mobile-header .custom-logo,
    .ast-site-identity img,
    .custom-logo {
        max-height: 70px !important;
        max-width: none !important;
        width: auto !important;		
    }

    /* v10.1: leidsime, et valge ovaal on tegelikult ".ast-site-identity"
       taust (Lisa-CSS väljal: background-color rgba(255,255,255,.85),
       border-radius:90px) — mitte pildi enda osa. Kui liigutasime ainult
       sisemist linki, jäi taust vanale kohale maha. Positsioneerime nüüd
       otse ".ast-site-identity", MASGA lisame "max-width" turvavõrguks,
       et vältida eelmise katse suuruse plahvatust. */
    #ast-mobile-header .ast-site-identity,
    .ast-site-identity {
        position: fixed !important;
        top: 12px !important;
        left: 16px !important;
        margin: 0 !important;
        z-index: 999 !important;
        max-width: 280px !important;
        width: auto !important;
    }
    body.admin-bar .ast-site-identity {
        top: 44px !important; /* 12px + 32px adminiriba kõrgus */
    }


    /* 2. Vähendame pealkirja ülemist ruumi mobiilis, kuna hero-foto ise
       on mobiilis palju madalam (220px), mistõttu 220-280px marginaal
       jättis liiga suure tühja ala. */
    .ast-archive-description {
        margin-top: -100px !important;
	}
    body.single .entry-header,
    body.page .entry-header {
        margin-top: -280px !important;
    }
	.church-section-title {
		margin-top: -70px;
	}

    /* 3. Mobiilimenüü (hamburgeri avatav rippmenüü) — taastame nähtavuse,
       kuna varasemad desktop-suunatud width/flex/overflow reeglid võivad
       mobiilimenüü struktuuri katki teha. NB: EI sunni "display", et
       mitte rikkuda Astra enda ava/sulge (toggle) funktsionaalsust.
       NB v8.3: "position: static" katse (v8.2) EEMALDATUD — see
       tõmbas menüü konteineri välja oma õigest kohast ja tekitas
       veel hullema vea (logo/nupp kukkusid keset hero-fotot). Enne
       järgmist katset on vaja NÄHA päris DOM struktuuri Inspectorist,
       mitte enam arvata. */
    .ast-mobile-header-content,
    #ast-hf-mobile-menu,
    .ast-mobile-popup-drawer,
    .ast-mobile-header-wrap .main-header-menu {
        overflow: visible !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 4. Mobiilimenüü tekst oli valge valgel taustal (nähtamatu).
       Kasutame TÄPSET ID-d (#ast-hf-menu-1-mobile), mille nägime otse
       Inspectorist — see tagab kõrgeima prioriteedi ja võidab kindlalt
       varasema (desktopile mõeldud) valge tekstivärvi reegli üle. */
    #ast-hf-menu-1-mobile,
    #ast-hf-menu-1-mobile.main-header-menu {
        background-color: var(--church-orange) !important;
        border-radius: 0 !important;
    }
    #ast-hf-menu-1-mobile a,
    #ast-hf-menu-1-mobile .menu-link {
        color: #fff !important;
        background-color: #F5821F !important;
    }

    /* Erand: pesastatud rippmenüü (nt "Arhiiv" alammenüü) sees on nüüd
       valge taust (uus W3Schools-stiilis kaart) — seal peab tekst
       jääma navy, mitte valge, muidu on see valgel taustal nähtamatu. */
    #ast-hf-menu-1-mobile .sub-menu a {
        color: var(--church-navy) !important;
    }

    /* v8.7: "Arhiiv" alammenüü (Galerii, Koguduse uudised) nägi välja
       tühjade valgete ribadena — desktopile mõeldud ".sub-menu"
       reegel (rida ~601) annab KÕIGILE alammenüüdele "overflow: hidden",
       mis mobiilis lõikab akordioni avanedes teksti ära. Siin
       laiendame ainult mobiili Arhiiv-alammenüü kõrgust/nähtavust. */
    #ast-hf-menu-1-mobile .sub-menu {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
    }
}

/* ---------- LIIKUMISE VÄHENDAMINE (ligipääsetavus) ---------- */
@media (prefers-reduced-motion: reduce) {
    .church-btn--primary { transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- PÄISE VARI (parem nähtavus hero-pildi taustal) ----------
   NB: see kehtib kogu lehele (mitte ainult avalehele), kuna päis on
   globaalne Astra element. Valikud on tavapärased Astra klassid — kui
   see ei mõju, kontrolli päist "Uuri elementi" abil ja saada mulle
   täpne klassi/ID nimi. */
.site-header,
#masthead,
.ast-main-header-wrap,
.main-header-bar {
    /*box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);*/
}

/* ---------- SUUREM TEKST TAVALISTEL LEHTEDEL (nt Kontakt) ---------- */
body.page .entry-content,
body.page .ast-article-single p {
    font-size: 1.2em;
    line-height: 1.7;
}