/* Sitewide fixes on top of Divi. Loaded by functions.php. */

/* Ad rows: a Divi row that only holds an Ezoic ad placeholder takes no space while the slot is empty.
   As soon as an ad is placed in it, the rule no longer matches and the row keeps its normal spacing. */
.et_pb_row:has([id^="ezoic-pub-ad-placeholder"]):not(:has([id^="ezoic-pub-ad-placeholder"] > *, iframe, ins, .et_pb_text, .et_pb_image, .tarotContainer, #card-container, .tarotGameContainer, #yesnopic)) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

.et_pb_row:has([id^="ezoic-pub-ad-placeholder"]):not(:has([id^="ezoic-pub-ad-placeholder"] > *, iframe, ins, .et_pb_text, .et_pb_image, .tarotContainer, #card-container, .tarotGameContainer, #yesnopic)) .et_pb_module {
    margin-bottom: 0 !important;
}

/* Tarot reading pages: less space above the cards. */
.et_pb_row:has(#card-container),
.et_pb_row:has(.tarotGameContainer) {
    padding-top: 10px !important;
}

#card-container {
    padding-top: 24px !important; /* room for a chosen card to lift */
}

/* Related links at the end of posts and pages (seo/links.php). */
.smt-related-wrap {
    padding: 10px 0 40px;
}

.smt-related {
    margin: 40px 0 10px;
    padding: 24px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.smt-related-group {
    margin-bottom: 18px;
}

.smt-related .smt-related-title {
    margin: 0 0 8px;
    padding: 0;
    color: #d6b46a;
    font-size: 17px;
    font-weight: 700;
}

.smt-related ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.smt-related li {
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

.smt-related li::before {
    display: none;
}

.smt-related a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid rgba(214, 180, 106, 0.35);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: #e1e1e1;
    font-size: 14px;
    text-decoration: none;
}

.smt-related a:hover,
.smt-related a:focus {
    border-color: #d6b46a;
    color: #fff;
}

/* Posts and archives: the transparent header (absolute up to 980px, fixed above) sits on top of the content,
   and Divi only pushes the content below it with a script that LiteSpeed delays, so the title was hidden under
   the header until then. Reserve the header's height plus a 32px gap in CSS instead, from the first paint. */
body.et_transparent_nav:is(.single-post, .archive, .search, .error404) #main-content > .container {
    padding-top: 186px !important; /* header 154px */
}

@media (min-width: 981px) {
    body.et_transparent_nav:is(.archive, .search, .error404) #main-content > .container {
        padding-top: 190px !important; /* header 158px */
    }

    body.et_transparent_nav.single-post #main-content > .container {
        padding-top: 179px !important; /* header 147px */
    }
}

/* Blog posts and listings: the theme's default dark text (#333 / #666) is unreadable on the site's black
   background, so light text for posts, their headings, tables and the sidebar. */
body.single-post .entry-title,
body.single-post .entry-content :is(h1, h2, h3, h4, h5, h6),
body:is(.blog, .archive, .search) .entry-title,
body:is(.blog, .archive, .search) .entry-title a,
#sidebar :is(h2, h3, h4, .widgettitle) {
    color: #f1eafc !important;
}

body.single-post .entry-content :is(p, li, td, th, figcaption),
body:is(.blog, .archive, .search) .et_pb_post p {
    color: #d3cfdc;
}

body.single-post .entry-content strong {
    color: #f1eafc;
}

body.single-post .post-meta,
body.single-post .post-meta a,
body:is(.blog, .archive, .search) .post-meta,
body:is(.blog, .archive, .search) .post-meta a,
#sidebar,
#sidebar a {
    color: #b7b0c6;
}

#sidebar a:hover {
    color: #fff;
}

body.single-post .entry-content a {
    color: #8fc8ff;
}

body.single-post .entry-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0 20px;
}

body.single-post .entry-content :is(th, td) {
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

body.single-post .entry-content th {
    background: rgba(214, 180, 106, 0.15);
    color: #f1eafc;
}

/* Readable text on the dark site. Divi's defaults are made for a white page: text without a colour of its own
   is #666 and headings #333, which is faint or invisible on black (3.7:1 and 1.6:1). Light defaults instead;
   modules and blocks that set their own colour (buttons, the lime subscribe box, form fields) keep it. */
#et-main-area {
    color: #cfcad9;
}

body :is(h1, h2, h3, h4, h5, h6) {
    color: #f1eafc;
}

/* Archive and search pages: Divi gives the content area a white background, under light titles. */
body:is(.archive, .search, .error404) #main-content {
    background-color: #000;
}

/* Post meta ("by Sandra Astra | date | category"): Divi prints #left-area .post-meta a { color: #666 } inline
   after this file (Customizer), so one more element in the selector to outrank it. */
body #left-area .post-meta,
body #left-area .post-meta a {
    color: #b7b0c6;
}

/* The search button keeps dark text on its light grey background (WordPress sets #666, 4.2:1). */
.wp-block-search .wp-block-search__button.wp-element-button {
    color: #222;
}

/* Contact form submit button: the site's light link blue instead of #005cdd (3.6:1 on black). */
body .et_pb_contact_form_container .et_pb_contact_submit.et_pb_button {
    color: #8fc8ff;
}

/* The highlighted menu item: Divi's #005cdd is 3.6:1 on the black header and footer. This blue passes on both
   the black and the white (posts) header. */
:is(#top-menu, .bottom-nav, .et_mobile_menu) :is(li.current-menu-item, li.current-menu-ancestor, li.current_page_parent) > a {
    color: #2073df !important;
}

/* Pages under the transparent header: Divi pads the first section by the header height from a script that
   LiteSpeed delays until the first click or scroll, so the page jumps down then (layout shift). A transparent top
   border holds that space from the first paint, and is dropped once Divi's inline padding-top is set. */
body.et_transparent_nav.page #main-content .et_builder_inner_content > .et_pb_section:first-child {
    border-top: 154px solid transparent;
}
@media (min-width: 981px) {
    body.et_transparent_nav.page #main-content .et_builder_inner_content > .et_pb_section:first-child {
        border-top-width: 158px;
    }
}
body.et_transparent_nav.page #main-content .et_builder_inner_content > .et_pb_section:first-child[style*="padding-top"] {
    border-top-width: 0 !important;
}

/* Language switcher (i18n/i18n.php): the current language's code in the menu, the languages in its submenu. */
#top-menu .smt-lang-switcher > a::before {
    content: "🌐";
    margin-right: 4px;
}
#top-menu .smt-lang-switcher .sub-menu {
    width: 160px;
}
.smt-lang-item.current-lang > a {
    font-weight: 700;
}

/* Greek and Cyrillic headings: Aclonica has neither. These faces, under the same name, cover only those ranges, so
   every heading and button set in Aclonica shows its Greek, Russian and Ukrainian text in Ubuntu Bold (Ubuntu Font
   Licence) and its Latin text as before. Weight 400 like Aclonica's own face, so both are picked together. */
@font-face {
    font-family: 'Aclonica';
    src: url(fonts/ubuntu-bold-greek.woff2) format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0370-03FF, U+1F00-1FFF;
}
@font-face {
    font-family: 'Aclonica';
    src: url(fonts/ubuntu-bold-cyrillic.woff2) format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0400-045F, U+0490-0491, U+2116;
}