/*--------------------------------------------------------------
THEME FIXES

Overrides for rules that live in the compiled style.css. The project
ships no SCSS build tooling, so style.css cannot be regenerated from
assets/scss — every fix is mirrored here and in the SCSS source, and
this file is loaded after style.css.
--------------------------------------------------------------*/

/* The decorative glow behind the navigation has a fixed natural height
   (91px). Positioning it with top: 46% of the header height pushed its
   bottom edge past the header, so the light bled over the page content.
   Anchoring it to the bottom keeps it inside at any header height. */
.header-line-shape {
    top: auto;
    bottom: 0;
}

/* The header had a locked height (160px desktop / 90px below 992px) while the
   top bar wraps to two lines at some widths. The nav rows are painted with an
   opaque background, so anything taller than the lock spilled out of the
   header and lit up a band over the page content. Sizing to content fixes it
   at every width. */
.header-fixed {
    height: auto;
    min-height: 160px;
}

@media only screen and (max-width: 991px) {
    .header-fixed {
        height: auto;
        min-height: 90px;
    }
}

/* The decorative glow behind the header was positioned with bottom: -46%,
   which hung it roughly 74px below the header and spilled light over the
   page content. Anchor it to the header's bottom edge instead. */
.header-area::before {
    bottom: 0;
}

/* The logo column paints the header's dark background. It is stretched by the
   header row, but a flex item only stretches when its cross size is auto --
   with height: 100% it collapsed to the height of the logo and the page
   content showed through above and below it. */
.nav-left-bg {
    height: auto;
}

/* The header keeps a min-height, but its inner wrappers sized to content, so
   at narrow widths the row was shorter than the header and the stretched logo
   column stopped short of the bottom edge. Passing min-height down the chain
   keeps every wrapper as tall as the header itself. */
#header-one .main-menu-area,
#header-one .main-menu-area > .height-100,
#header-one .main-menu-area > .height-100 > .row {
    min-height: inherit;
}

/* The consultation form is pulled up over the map on the contact pages
   (margin-top: -100px). Everywhere else it follows normal content, so the
   overlap would cover the text above it. */
.contact-consultation.contact-consultation--standalone {
    margin-top: 0;
    padding-top: 90px;
}

/* Team photo on the About page (pages/about.blade.php) */
.about-team-photo {
    margin: 30px 0 40px;
    overflow: hidden;
    border-radius: 16px;
}

.about-team-photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Contact pages had no <h1>; the map block below brings its own top padding. */
.contact-page-title {
    margin: 100px 0 0;
    color: var(--white, #ffffff);
    font-family: var(--font-family-cormorant, "Cormorant Garamond", serif);
    font-size: 56px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.1;
}

.contact-page-title + .map-area {
    padding-top: 40px;
}

@media (max-width: 575px) {
    .contact-page-title {
        margin-top: 70px;
        font-size: 38px;
    }
}

/* "Замовити консультацію" box next to the lead form: a library photo (CC0) instead
   of the theme's stock image, darkened so the white text stays readable. */
.sidebar-cta-box.sidebar-cta-box-2 {
    background-image:
        linear-gradient(180deg, rgba(12, 26, 26, 0.82) 0%, rgba(12, 26, 26, 0.68) 45%, rgba(12, 26, 26, 0.9) 100%),
        url(../images/bg/consultation-library.webp);
    background-position: center, center;
    background-size: cover, cover;
}

/* Call button in the same box: one clickable pill with the icon inside,
   instead of a number link with a circle hanging off its left edge. */
.sidebar-cta-btn.sidebar-cta-btn--call {
    gap: 14px;
    padding: 8px 26px 8px 8px;
    border: 1px solid rgba(216, 154, 38, 0.6);
    border-radius: 100px;
    background-color: rgba(15, 31, 31, 0.9);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: border-color 0.3s ease-out, background-color 0.3s ease-out, transform 0.3s ease-out;
}

.sidebar-cta-btn--call .sidebar-cta-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-left: 0;
}

.sidebar-cta-btn--call .sidebar-cta-contact {
    padding-left: 0;
    white-space: nowrap;
    font-size: 22px;
    letter-spacing: 0.3px;
}

.sidebar-cta-btn--call:hover {
    border-color: var(--orange-light, #FFCD70);
    background-color: #0F1F1F;
    transform: translateY(-2px);
}

.sidebar-cta-btn--call:hover .sidebar-cta-contact {
    color: var(--orange-light, #FFCD70);
}

.sidebar-cta-btn--call:focus-visible {
    outline: 2px solid var(--orange-light, #FFCD70);
    outline-offset: 3px;
}

@media only screen and (max-width: 1199px) {
    .sidebar-cta-btn--call .sidebar-cta-contact {
        font-size: 19px;
    }
}

@media only screen and (max-width: 360px) {
    .sidebar-cta-btn.sidebar-cta-btn--call {
        padding-right: 18px;
    }

    .sidebar-cta-btn--call .sidebar-cta-contact {
        font-size: 17px;
    }
}

/* Lead form fields: a faint gold outline at rest, brighter on hover and a
   gold glow on focus, so it is clear which field is active. */
.blog-consulatanry-box .form-input {
    border: 1px solid rgba(216, 154, 38, 0.25);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out, background-color 0.25s ease-out;
}

.blog-consulatanry-box .form-input:hover {
    border-color: rgba(216, 154, 38, 0.55);
}

.blog-consulatanry-box .form-input:focus {
    border-color: var(--orange-dark, #D89A26);
    background-color: #283636;
    color: var(--white, #ffffff);
    box-shadow: 0 0 0 3px rgba(216, 154, 38, 0.22), 0 0 18px rgba(255, 205, 112, 0.18);
}

.blog-consulatanry-box .form-input:focus::placeholder {
    color: rgba(139, 159, 159, 0.6);
}

.blog-consulatanry-box .form-input.is-invalid {
    border-color: #e5484d;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .blog-consulatanry-box .form-input {
        transition: none;
    }
}

/*--------------------------------------------------------------
Readable page text (.content-prose on pages.page / pages.about).
The HTML comes from the admin editor; ContentFormatter::prose() strips
spacer paragraphs and "- " list prefixes before it gets here.
--------------------------------------------------------------*/

.content-prose {
    --prose-text: #c3cfcf;
    color: var(--prose-text);
    font-size: 17px;
    line-height: 1.75;
}

/* ~75 characters per line; the team photo keeps the full width */
.content-prose > :not(figure) {
    max-width: 820px;
}

.content-prose h1,
.content-prose h2,
.content-prose h3,
.content-prose h4 {
    padding: 0;
    color: var(--white, #ffffff);
    font-family: var(--font-family-cormorant, "Cormorant Garamond", serif);
    font-style: italic;
    font-weight: 700;
    text-transform: none;
}

.content-prose h1 {
    margin: 0 0 28px;
    font-size: clamp(34px, 4.2vw, 54px);
    line-height: 1.15;
}

.content-prose h2 {
    position: relative;
    margin: 64px 0 22px;
    padding-top: 22px;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.2;
}

/* short gold rule above each section heading */
.content-prose h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 2px;
    background: var(--gradient-yellow, linear-gradient(125deg, #D89A26 14.31%, #FFCD70 86.5%));
}

.content-prose h3 {
    margin: 36px 0 14px;
    color: var(--orange-light, #FFCD70);
    font-size: clamp(22px, 2.2vw, 27px);
    line-height: 1.25;
}

.content-prose h2 + h3 {
    margin-top: 8px;
}

.content-prose p {
    margin: 0 0 16px;
    color: var(--prose-text);
    font-size: 17px;
    line-height: 1.75;
}

.content-prose ul,
.content-prose ol {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.content-prose li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 28px;
    color: var(--prose-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
}

.content-prose li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gradient-yellow, linear-gradient(125deg, #D89A26 14.31%, #FFCD70 86.5%));
}

.content-prose strong,
.content-prose b {
    color: var(--white, #ffffff);
    font-weight: 700;
}

.content-prose a {
    color: var(--orange-light, #FFCD70);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.content-prose a:hover {
    color: var(--white, #ffffff);
}

/* older pages (about, practices) carry the theme's blog classes, whose
   padding and max-width would fight the rhythm above */
.content-prose .blog-detail-content,
.content-prose .blog-detail-title {
    max-width: 820px;
    padding: 0;
}

.content-prose h2.blog-detail-title {
    padding-top: 22px;
}

/* The theme gives every <p> "transition: all 0.5s", which fights GSAP's
   frame-by-frame opacity/transform updates and leaves paragraphs stuck
   half-faded when they scroll in. */
.content-prose > .fade-slide {
    transition: none;
}

/* the editor wraps some headings' text in spans with inline colours */
.content-prose h2 span,
.content-prose h2 a {
    color: inherit !important;
    text-decoration: none;
}

@media (max-width: 575px) {
    .content-prose,
    .content-prose p,
    .content-prose li {
        font-size: 16px;
    }

    .content-prose h2 {
        margin-top: 48px;
    }
}

/*--------------------------------------------------------------
Footer spacing. Measured before: 0px above the content on every width,
31px below it on desktop (only by accident, via the inner <p>'s shared
"footer-content" class) and 1px on phones. Explicit values instead.
--------------------------------------------------------------*/

.footer-area {
    padding-top: 80px;
}

.footer-area .footer-content.footer-two-border {
    padding-bottom: 64px;
}

/* the tagline <p> reuses the "footer-content" class and its padding */
.footer-area .footer-text,
.footer-area .footer-text .footer-content {
    margin-bottom: 0;
    padding-bottom: 0;
}

.footer-area .footer-list li:last-child,
.footer-area .footer-nav-menu li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

@media only screen and (max-width: 991px) {
    .footer-area {
        padding-top: 64px;
    }

    .footer-area .footer-content.footer-two-border {
        padding-bottom: 56px;
    }
}

@media only screen and (max-width: 575px) {
    .footer-area {
        padding-top: 48px;
    }

    .footer-area .footer-content.footer-two-border {
        padding-bottom: 40px;
    }
}

/* Decorative theme images are absolutely positioned and some sit on top of
   real controls: about-shape-4 covered two thirds of the "Отримати
   консультацію" button on the home page, so hover and clicks only worked on
   its left edge. None of them is meant to be interactive. */
img[class*="-shape"],
img.service-icon,
img.moveBottom,
img.moveLeft,
img.zoom-in-out {
    pointer-events: none;
}

/* Home "about" block: the team photo is landscape (the stock image it
   replaced was portrait), so it fills the column width at its own ratio. */
.about-area .about-team-office {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/*--------------------------------------------------------------
Language switcher (components/language-selector.blade.php)
--------------------------------------------------------------*/

.country-select-box.lang-switch::after {
    display: none; /* theme's background-image arrow; the button has its own */
}

.lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px 0 12px;
    border: 1px solid rgba(216, 154, 38, 0.35);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--white, #ffffff);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.25s ease-out, background-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

/* Bootstrap's caret */
.lang-switch__toggle.dropdown-toggle::after {
    display: none;
}

.lang-switch__toggle:hover,
.lang-switch__toggle[aria-expanded="true"] {
    border-color: var(--orange-dark, #D89A26);
    background: rgba(216, 154, 38, 0.08);
}

.lang-switch__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(216, 154, 38, 0.35);
}

.lang-switch__globe {
    width: 17px;
    height: 17px;
    color: var(--orange-light, #FFCD70);
}

.lang-switch__chevron {
    width: 11px;
    height: 11px;
    color: var(--main-primary, #8B9F9F);
    transition: transform 0.25s ease-out;
}

.lang-switch__toggle[aria-expanded="true"] .lang-switch__chevron {
    transform: rotate(180deg);
}

.lang-switch__menu.dropdown-menu {
    min-width: 212px;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(216, 154, 38, 0.22);
    border-radius: 14px;
    background: #0c1a1a;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.lang-switch__menu.dropdown-menu.show {
    animation: lang-switch-in 0.22s ease-out;
}

@keyframes lang-switch-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lang-switch__caption {
    padding: 6px 10px 8px;
    color: var(--main-primary, #8B9F9F);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.lang-switch__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--white, #ffffff);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

a.lang-switch__item:hover,
a.lang-switch__item:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    color: var(--orange-light, #FFCD70);
}

.lang-switch__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 24px;
    border: 1px solid rgba(139, 159, 159, 0.3);
    border-radius: 6px;
    color: var(--main-primary, #8B9F9F);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.lang-switch__item.is-current {
    background: rgba(216, 154, 38, 0.1);
    cursor: default;
}

.lang-switch__item.is-current .lang-switch__badge {
    border-color: transparent;
    background: var(--gradient-yellow, linear-gradient(125deg, #D89A26 14.31%, #FFCD70 86.5%));
    color: #0F1F1F;
}

.lang-switch__name {
    flex: 1;
}

.lang-switch__check {
    width: 16px;
    height: 16px;
    color: var(--orange-light, #FFCD70);
}

@media (max-width: 1199px) {
    .lang-switch__toggle {
        height: 36px;
        padding: 0 11px 0 10px;
    }

    .lang-switch__menu.dropdown-menu {
        right: 0;
        left: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lang-switch__menu.dropdown-menu.show {
        animation: none;
    }
}

/*--------------------------------------------------------------
Responsive fixes (audit at 320–1920px)
--------------------------------------------------------------*/

/* Form toasts ("sent" / "error") were only transparent until shown, so two
   invisible bars took space under every form and caught taps. */
.blog-consulatanry-box .toast:not(.show) {
    display: none;
}

/* Contact cards: the e-mail address ran past the card edge at 320px. */
.contact-info-link {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 575px) {
    .contact-info-link {
        font-size: 20px;
    }
}

/* Client logos, 992–1199px: 10 logos in 3 columns left one alone in the
   last row; 5 columns gives two even rows. */
@media (min-width: 992px) and (max-width: 1199px) {
    .company-area .company-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Phones: text links were 21–26px tall; pad the tap area to ~44px without
   moving anything visually. */
@media (max-width: 767px) {
    .footer-area .footer-link,
    .footer-area .footer-nav-menu a,
    .blog-post__crumbs a {
        display: inline-block;
        padding-top: 9px;
        padding-bottom: 9px;
        margin-top: -9px;
        margin-bottom: -9px;
    }

    .service-block__more,
    .blog-card__more {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: -10px;
    }
}

/* Slider dots are 14px circles; an invisible ring makes the tap area ~44px
   on touch screens without changing how they look. */
@media (hover: none), (max-width: 767px) {
    .slick-dots li button {
        position: relative;
    }

    .slick-dots li button::after {
        content: "";
        position: absolute;
        inset: -12px;
    }
}

/* Mobile/tablet header: the menu icon sat flush against the language pill
   (-1px gap). Give it its own 40px tap target with space before it. */
@media (max-width: 1199px) {
    .header-btn-show-hide .offcanvas-icon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-left: 12px;
    }

    .header-btn-show-hide .offcanvas-icon img {
        width: 28px;
        height: auto;
    }
}

/* Footer: a "Послуги" column with all 8 service pages (site-wide internal
   links). The theme's fixed 3-column grid is too narrow for their names. */
.footer-area .footer-right {
    grid-template-columns: minmax(130px, 0.8fr) minmax(220px, 1.5fr) minmax(150px, 1fr);
    gap: 40px;
}

.footer-area .footer-services .footer-list li {
    padding-bottom: 10px;
}

@media only screen and (max-width: 991px) {
    .footer-area .footer-right {
        gap: 28px;
    }
}

@media only screen and (max-width: 767px) {
    .footer-area .footer-right {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Mobile/tablet header: a call button next to the language switch (the top
   bar with the phone number is hidden below 1200px). */
.header-call {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--gradient-yellow, linear-gradient(125deg, #D89A26 14.31%, #FFCD70 86.5%));
    color: #0F1F1F;
    box-shadow: 0 6px 18px rgba(216, 154, 38, 0.3);
}

.header-call:hover {
    color: #0F1F1F;
    filter: brightness(1.08);
}

.header-call svg {
    width: 19px;
    height: 19px;
}

/* Very narrow phones: keep logo + call + language + menu on one line */
@media (max-width: 374px) {
    .header-call {
        width: 36px;
        height: 36px;
        margin-right: 6px;
    }

    .lang-switch__globe {
        display: none;
    }

    .header-btn-show-hide .offcanvas-icon {
        margin-left: 6px;
    }
}

/*--------------------------------------------------------------
Performance: WebP versions of the theme's heaviest background images
(PNG/JPG kept on disk; these rules win because custom.css loads later).
--------------------------------------------------------------*/
.banner-1 {
    background-image: url("../images/banners/slider1.webp");
}

.service-card {
    background-image: url("../images/banners/mask.webp");
}

.header-area::before {
    background-image: url("../images/shapes/hero-shape-bg.webp");
}


/* Team photo — bigger, framed to match the dark/gold theme */
.about-area .about-team-frame{position:relative;margin:0 18px 18px 0;z-index:1}
.about-area .about-team-frame::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid rgba(212,165,72,.55);z-index:-1;pointer-events:none;transition:inset .4s ease}
.about-area .about-team-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,20,0) 55%,rgba(10,22,20,.35) 100%);pointer-events:none}
.about-area .about-team-frame .about-team-office{aspect-ratio:4/3;object-position:50% 35%;box-shadow:0 24px 50px -20px rgba(0,0,0,.7);filter:saturate(.92) contrast(1.04) brightness(.97);transition:filter .4s ease}
.about-area .about-team-frame:hover::before{inset:12px -12px -12px 12px}
.about-area .about-team-frame:hover .about-team-office{filter:none}
@media (max-width:991px){.about-area .about-team-frame{margin:0 12px 12px 0}.about-area .about-team-frame::before{inset:12px -12px -12px 12px}}.about-area .about-team-frame{margin-top:32px}
@media (min-width:992px) and (max-width:1199px){.about-area .about-team-frame .about-team-office{aspect-ratio:16/10}}