/*
    Phoenicia Essence (light theme) for the HESK public knowledgebase.

    Selectable under Admin -> Settings -> General -> Customer Theme ("Phoenicia essence").
    Customer side only: the admin screens are not touched, and the other themes (Modern Light,
    Midnight Ocean) are not changed. Every rule below is scoped to .theme_phoenicia_essence, which
    HESK adds to the <html> element only while this theme is selected.

    Design: matches phoeniciaessence.com. Proxima Nova, charcoal #212121, purple #8E5897 / #9E62A8,
    periwinkle #7379B0, soft greys, square corners, small uppercase letter-spaced labels.
    Keep this file (and img/phoenicia_essence/) when upgrading HESK: they are not part of the HESK zip.
*/

:root {
    --primary: #8E5897;
    --secondary: #7379B0;
    --tertiary: #9E62A8;

    --surface: #ffffff;
    --main-background: #FBFBFC;

    --font__pri-clr: #212121;
    --font__sec-clr: #40403F;

    --header__bg: #ffffff;
    --header_logo__clr: #40403F;
    --header_nav__clr: #8E5897;
    --header_nav__hover_clr: var(--link__pri-hover-clr);

    --search__bg: #212121;
    --search__clr: #212121;

    --breadcrumbs__a-hover-clr: #6F3D78;
    --link__pri-hover-clr: #6F3D78;
    --link__sec-hover-clr: #6F3D78;

    --info: #40403F;
    --info-2: #F4F5F6;

    --input-bg: #ffffff;
    --input-clr: #212121;
    --datepicker__clr: #40403F;

    --shadow-1-30: var(--shadow-1-10);
    --notification__clr: var(--font__pri-clr);
    --table_row__bg-hover: color-mix(in srgb, var(--surface) 90%, var(--secondary));

    --navlink__title-clr: #212121;
    --navlink__hover-bg: #F4F5F6;
    --preview__clr: #212121;
    --preview__hover-bg: #FBFBFC;
    --preview__border-clr: #E0E0E2;
    --suggest_preview__clr: #212121;
    --suggest_preview__hover-icon-fill: #8E5897;
    --article_preview_suggestion_clr: #212121;

    --header_profile__clr: #8E5897;

    --icon_circle__clr: #8E5897;
    --icon_circle__bg: #F4F5F6;
    --navlink_icon_hover__clr: #ffffff;
    --navlink_icon_hover__bg: #8E5897;

    --dropdown__clr: var(--font__pri-clr);
}

:root {
    --header_border__clr: #E0E0E2 !important;
    --btn_full__hover_bg: #8E5897 !important;
    --dropdown_input__border-clr: #E0E0E2 !important;
    --dropdown_label__border-clr: #E0E0E2 !important;
    --dropdown_list__border-clr: #E0E0E2 !important;
}

/* ---------- Typography ---------- */
html.theme_phoenicia_essence :where(body, h1, h2, h3, h4, h5, h6, p, a, li, span, div, input, button, textarea, select, label, th, td) {
    font-family: proxima-nova, "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html.theme_phoenicia_essence body {
    letter-spacing: .4px;
    color: #212121;
}

/* The full-width charcoal bands extend past the content column; clip them so the page never scrolls sideways. */
html.theme_phoenicia_essence {
    overflow-x: hidden; /* on <html> only, so the normal window scrolling is kept */
}
html.theme_phoenicia_essence .wrapper {
    overflow-x: clip;
}

/* ---------- Top bar + header (the existing logo banner is restyled, not replaced) ---------- */
html.theme_phoenicia_essence body::before {
    content: "HOME FRAGRANCE SUPPORT";
    display: block;
    background: #212121;
    color: #ffffff;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.4px;
    padding: 10px 12px;
}
html.theme_phoenicia_essence body > div[style*="1d366b"] {
    background: #ffffff !important;
    border-bottom: 1px solid #E0E0E2;
    padding: 18px 0 !important;
}
html.theme_phoenicia_essence body > div[style*="1d366b"] > div {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center !important;
}
html.theme_phoenicia_essence body > div[style*="1d366b"] a {
    display: inline-block;
    width: 232px;
    height: 54px;
    background: url(../../img/phoenicia_essence/pe-logo.svg) center / contain no-repeat;
}
html.theme_phoenicia_essence body > div[style*="1d366b"] a img {
    opacity: 0;
}

/* the grey title strip repeats the breadcrumbs, so this theme hides it */
html.theme_phoenicia_essence .header {
    display: none;
}

/* ---------- Breadcrumbs ---------- */
html.theme_phoenicia_essence .breadcrumbs {
    background: transparent;
    font-size: 12px;
    letter-spacing: .6px;
}
html.theme_phoenicia_essence .breadcrumbs a,
html.theme_phoenicia_essence .breadcrumbs a span {
    color: #8E5897;
}
html.theme_phoenicia_essence .breadcrumbs .last {
    color: #40403F;
}

/* ---------- Search hero ---------- */
html.theme_phoenicia_essence .help-search {
    position: relative;
    isolation: isolate;
    background: none;
    box-shadow: none;
    padding: 52px 24px 56px;
    margin-bottom: 44px;
    text-align: center;
}
html.theme_phoenicia_essence .help-search::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -100vmax;
    right: -100vmax;
    background: #212121;
}
html.theme_phoenicia_essence .help-search .search__title {
    color: #ffffff;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 1.6px;
    margin: 0 0 26px;
}
html.theme_phoenicia_essence .help-search .search__form {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border: 0;
}
html.theme_phoenicia_essence .help-search .search__form .form-control {
    background: #ffffff;
    color: #212121;
    border: 0;
    border-radius: 0;
    height: 58px;
    font-size: 16px;
    letter-spacing: .5px;
    box-shadow: none;
}
html.theme_phoenicia_essence .help-search .search__form .form-control::placeholder {
    color: #6b7480;
}
html.theme_phoenicia_essence .help-search .search__submit {
    background: transparent;
    border-radius: 0;
}
html.theme_phoenicia_essence .help-search .search__submit svg {
    fill: #8E5897;
}
html.theme_phoenicia_essence .help-search .search__submit:hover svg {
    fill: #6F3D78;
}
html.theme_phoenicia_essence .kb-suggestions h6 {
    color: #212121;
}

/* ---------- Section headings ---------- */
html.theme_phoenicia_essence .block__head .h-3,
html.theme_phoenicia_essence .cust-help .h-3 {
    color: #212121 !important;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 13px;
    font-weight: 700;
}
/* Icon circles use HESK's own theme colors (--icon_circle__bg/__clr and the hover pair set at the top), so the hover state stays readable. */

/* ---------- Category cards ---------- */
html.theme_phoenicia_essence .topics {
    background: transparent;
    box-shadow: none;
    padding: 0;
    gap: 24px;
    flex-wrap: wrap;
}
html.theme_phoenicia_essence .topics__block {
    width: calc(50% - 12px);
    margin: 0;
    box-sizing: border-box;
}
html.theme_phoenicia_essence .topics__block {
    background: #ffffff;
    border: 1px solid #E0E0E2;
    border-radius: 0;
    box-shadow: none;
    padding: 30px 32px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html.theme_phoenicia_essence .topics__block:hover {
    border-color: #9E62A8;
    box-shadow: 0 14px 34px rgba(33, 33, 33, .08);
    transform: translateY(-2px);
}
html.theme_phoenicia_essence .topics__title,
html.theme_phoenicia_essence .topics__title .title-link {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    font-weight: 700;
    color: #212121 !important;
    text-decoration: none;
}
html.theme_phoenicia_essence .topics__title a,
html.theme_phoenicia_essence .topics__title .title-link,
html.theme_phoenicia_essence .title-link {
    text-decoration: none !important;
}
html.theme_phoenicia_essence .topics__title a:hover {
    color: #8E5897 !important;
}
html.theme_phoenicia_essence .topics__title svg {
    fill: #8E5897;
}
html.theme_phoenicia_essence .topics__list li a {
    color: #40403F;
    text-decoration: none;
}
html.theme_phoenicia_essence .topics__list li a:hover {
    color: #8E5897;
    text-decoration: underline;
}
html.theme_phoenicia_essence .topics__list li.text-bold a {
    color: #8E5897;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1.6px;
    font-weight: 700;
}

/* ---------- Tabs ---------- */
html.theme_phoenicia_essence .tabbed__head .tabbed__head_tabs li {
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 0;
}
html.theme_phoenicia_essence .tabbed__head .tabbed__head_tabs li.current {
    background: none !important;
    box-shadow: none !important;
    color: #212121 !important;
    border-bottom: 2px solid #8E5897;
}

/* ---------- Article / category / search lists ---------- */
html.theme_phoenicia_essence .preview {
    background: #ffffff;
    border: 1px solid #E0E0E2;
    border-radius: 0;
    box-shadow: none !important;
    margin-bottom: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
html.theme_phoenicia_essence .preview:hover {
    border-color: #9E62A8;
    box-shadow: 0 10px 28px rgba(33, 33, 33, .07) !important;
}
html.theme_phoenicia_essence .preview .preview__title {
    color: #212121;
    font-weight: 700;
    letter-spacing: .5px;
}
html.theme_phoenicia_essence .preview:hover .preview__title {
    color: #8E5897;
}
html.theme_phoenicia_essence .preview .preview__text .navlink__descr {
    color: #40403F !important;
}

/* ---------- Article page ---------- */
html.theme_phoenicia_essence .ticket__body_block.naked {
    background: #ffffff;
    border: 1px solid #E0E0E2;
    border-radius: 0;
    box-shadow: none !important;
    padding: 40px 44px;
}
html.theme_phoenicia_essence .ticket__body_block h1,
html.theme_phoenicia_essence .article__heading {
    color: #212121 !important;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 1.3;
}
html.theme_phoenicia_essence .block--description,
html.theme_phoenicia_essence .block--description p,
html.theme_phoenicia_essence .block--description li {
    font-size: 16px;
    line-height: 1.75;
    color: #212121;
}
html.theme_phoenicia_essence .block--description,
html.theme_phoenicia_essence .block--description p {
    text-align: left !important;
}
html.theme_phoenicia_essence .block--description a {
    color: #8E5897;
}
html.theme_phoenicia_essence .block--description a:hover {
    color: #6F3D78;
}

/* ---------- Buttons ---------- */
html.theme_phoenicia_essence .btn-full,
html.theme_phoenicia_essence .btn.btn-full {
    background: #212121;
    color: #ffffff;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 700;
}
html.theme_phoenicia_essence .btn-full:hover,
html.theme_phoenicia_essence .btn.btn-full:hover {
    background: #8E5897;
}

/* ---------- Footer (the "Powered by HESK" credit stays; HESK's license requires it) ---------- */
html.theme_phoenicia_essence .footer {
    position: relative;
    isolation: isolate;
    background: none;
    margin-top: 64px;
    padding: 34px 24px 18px;
    color: #C9C9CB;
    font-size: 12px;
    letter-spacing: 1px;
}
html.theme_phoenicia_essence .footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -100vmax;
    right: -100vmax;
    background: #212121;
}
html.theme_phoenicia_essence .footer a,
html.theme_phoenicia_essence .footer p {
    color: #C9C9CB !important;
}
html.theme_phoenicia_essence .footer a:hover {
    color: #ffffff !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 700px) {
    html.theme_phoenicia_essence .help-search {
        padding: 36px 16px 40px;
    }
    html.theme_phoenicia_essence .help-search .search__title {
        font-size: 26px;
    }
    html.theme_phoenicia_essence .topics__block {
        padding: 22px 20px;
        width: 100%;
    }
    html.theme_phoenicia_essence .ticket__body_block.naked {
        padding: 26px 20px;
    }
    html.theme_phoenicia_essence body > div[style*="1d366b"] a {
        width: 190px;
        height: 44px;
    }
}

/* ---------- Hero photo (from the Phoenicia Essence homepage; desktop and tablet only) ---------- */
html.theme_phoenicia_essence .help-search::before {
    background:
        linear-gradient(90deg, rgba(33, 33, 33, .94) 0%, rgba(33, 33, 33, .80) 40%, rgba(33, 33, 33, .30) 100%),
        #212121 url(../../img/phoenicia_essence/hero.jpg) calc(50% + 10vw) 58% / 120vw auto no-repeat;
}
html.theme_phoenicia_essence .help-search {
    padding-top: 78px;
    padding-bottom: 82px;
}
@media (max-width: 700px) {
    html.theme_phoenicia_essence .help-search {
        padding-top: 44px;
        padding-bottom: 48px;
    }
    html.theme_phoenicia_essence .help-search::before {
        background: #212121;
    }
}

/* ---------- Page background (no white strip above the footer) ---------- */
html.theme_phoenicia_essence body,
html.theme_phoenicia_essence .wrapper,
html.theme_phoenicia_essence main.main {
    background: #FBFBFC;
}

/* ---------- Article list panel: no box shadow (the same override HESK's own Modern Light theme uses) ---------- */
html.theme_phoenicia_essence .tabbed__tabs .tabbed__tabs_tab {
    box-shadow: none !important;
}

/* ---------- Space between the eye icon and the view count ---------- */
html.theme_phoenicia_essence .preview .rate .icon-eye-close {
    margin-right: 5px;
}

/* ---------- Keep the icon visible on hover (the same override HESK's Modern Light theme uses) ---------- */
html.theme_phoenicia_essence .preview:hover .icon-in-circle .icon {
    fill: var(--primary) !important;
}

/* ---------- Heading text on the purple bar ("Articles in this category", "Search Results"): light on dark ---------- */
html.theme_phoenicia_essence .article > .block__head .h-3 {
    color: #ffffff !important;
}