/* Several CTAs were <a> tags in the source design and got converted to
   <button> so they can trigger the popup (see [data-open-popup] usages).
   Neutralize the browser's native button chrome globally so no other
   converted button silently inherits default background/border/font — each
   button's own class (.btn--standard, .btn-outline, .btn--white, etc.)
   still supplies its actual visual style on top of this reset. */
button[data-open-popup] {
    font-family: inherit;
    cursor: pointer;
}

/* Sitewide WhatsApp shortcut requested in General.docx. */
.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6d2a3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    transition: transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 11px 28px rgba(0, 0, 0, .32);
}

.whatsapp-float svg { width: 36px; height: 36px; }

@media (max-width: 767px) {
    .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
    .whatsapp-float svg { width: 31px; height: 31px; }
}

/* Contrast fix for the two outline-style buttons (header "Get in Touch" and
   footer "Book a Consultation") — in the source design both rely entirely on
   a 1px border at 32% opacity (and, for the footer one, a 12%-opacity icon
   circle) with no fill until :hover, which reads as barely-there against the
   dark green background. Client feedback: weak contrast without hovering. */
.header-right .btn-outline {
    border-color: rgba(216, 197, 164, 0.7);
    background-color: rgba(216, 197, 164, 0.1);
}

.btn--white {
    /* Was an <a> in the source design (no default background); now a
       <button> (see footer.php — converted for the popup), so the browser's
       native button chrome (light "buttonface") needs an explicit override. */
    background-color: transparent;
    border-color: rgba(216, 197, 164, 0.55);
}

.btn--white .icon {
    background: #e6d2a3;
    color: #11241b;
}

/* Hero button (hero.php): main.css only gives the CTA breathing room via the
   subtitle paragraph's margin-bottom — on pages with no subtitle (e.g. How
   It Works), the button sits flush against the <h1> instead. Margins
   between these normal-flow siblings collapse, so this doesn't add extra
   space when a subtitle IS present. */
.hero-content .btn--standard {
    margin-top: 40px;
}

/* Honeypot field (contact-form.php + popup-request.php): a text input real
   visitors never see or fill, but naive form-spam bots do. Positioned
   off-screen rather than display:none/visibility:hidden — some bots skip
   filling fields hidden that way, this survives them. See
   handle_contact_form() in functions.php for the server-side check. */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The category-pills row (blog-intro.php) sits directly under the
   header-section's bottom border with no spacing of its own in main.css. */
.blog--switchers {
    margin-top: 40px;
}

/* Blog/Journal header: title + "Add Article" button (only shown to logged-in
   users who can publish posts — links straight to wp-admin's new-post
   screen, no custom in-theme editor). */
.header-section__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.header-section__title-row .header-section-title {
    margin-bottom: 0;
}

.blog__add-article {
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .header-section__title-row {
        align-items: flex-start;
    }
}

/* Article layout (single.php): main content + "Quick Consultation" card.
   The source widget (consult-block-widget.php) reimplemented sticky
   positioning in ~150 lines of scroll/resize JS to work around Elementor's
   column DOM — not needed here since we control the layout directly, so a
   plain CSS `position: sticky` replaces it. */
.article-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: start;
}

.article-layout .consult__block {
    position: sticky;
    top: 140px;
    margin-left: 0;
    max-width: 100%;
}

/* The source widget put a 56px gap here before the social icons row
   (.consult__block__socials); the popup-trigger button that replaced it
   inherited no top spacing at all, so it sat flush against the consultant's
   name/position. */
.consult__block .btn--standard {
    margin-top: 32px;
}

@media (max-width: 1024px) {
    .article-layout {
        grid-template-columns: 1fr;
    }

    /* main.css has a bug at max-width:941px: a comma-joined selector meant
       to trim the "Related Insights" grid to 3 items on mobile
       (`.articles__list .blog__item:nth-child(n+4)`) also lists a bare
       `.consult__block`, which hides this card everywhere below 941px —
       not just in that list. Restore it here. */
    .article-layout .consult__block {
        display: block;
        position: static;
        max-width: 587px;
        margin: 0 auto;
    }
}

/* Lead-request popup (template-parts/popup-request.php). Follows the same
   overlay/scale-in convention as .image-modal in main.css. */

.request-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
}

.request-popup.active {
    opacity: 1;
    visibility: visible;
}

.request-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
}

.request-popup__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    background-color: #11241b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px 40px;
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.4s, opacity 0.4s;
}

.request-popup.active .request-popup__content {
    transform: scale(1);
    opacity: 1;
}

.request-popup__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #d4e7de;
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s;
}

.request-popup__close:hover {
    border-color: #d8c5a4;
    color: #d8c5a4;
}

.request-popup__form {
    padding: 0;
}

.request-popup__form .form-title {
    font-size: 22px;
    margin: 0 0 20px;
    padding-right: 32px;
}

.request-popup__form .form-row {
    grid-template-columns: 1fr;
    border-top: 0;
    padding-top: 0;
}

.request-popup__form .form-group {
    margin-bottom: 14px;
}

/* Name + Phone share a row — the two shortest fields, saves a full field's
   worth of vertical space so the popup fits without scrolling. */
.request-popup__form .form-group-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.request-popup__form .form-group input,
.request-popup__form .form-group textarea {
    padding: 8px 0 10px;
    font-size: 16px;
}

.request-popup__form .form-group-title {
    font-size: 12px;
    margin-bottom: 4px;
}

.request-popup__form .form-group textarea {
    height: 52px;
}

.request-popup__form .form-note {
    margin-top: 12px;
    font-size: 13px;
}

.request-popup__form .btn--standard {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

@media (max-width: 480px) {
    .request-popup__form .form-group-pair {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

[dir="rtl"] .request-popup__close {
    right: auto;
    left: 20px;
}

[dir="rtl"] .request-popup__form .form-title {
    padding-right: 0;
    padding-left: 40px;
}

body.request-popup-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .request-popup__content {
        padding: 32px 24px;
    }
}

/* Source copy adds three groups to the existing solutions card layout. */
.solutions__group-title { margin-top: 48px; }
.transparency__left > .section-description { margin-top: 20px; }

/* Keep the process-card subheadings on one baseline when one title wraps. */
.tabs__panel .tab__item h4 { min-height: 2.6em; }

@media (max-width: 767px) {
    .tabs__panel .tab__item h4 { min-height: 0; }
}

/* Request forms: sending state set by js/request-meta.js while the POST is in flight. */
.btn--standard.is-sending {
    cursor: progress;
    opacity: .85;
    pointer-events: none;
}
.btn--standard.is-sending .icon img { visibility: hidden; }
.btn--standard.is-sending .icon { position: relative; }
.btn--standard.is-sending .icon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: gwd-spin .7s linear infinite;
}
@keyframes gwd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn--standard.is-sending .icon::after { animation-duration: 2s; }
}

/* Generic text pages (page.php — Privacy Policy etc.): long-form legal copy
   on top of the blog .article__content typography, with tighter headings. */
.page-text {
    padding: 64px 0 120px;
}
.page-text h2 {
    font-size: 32px;
    line-height: 120%;
    margin: 0 0 24px;
}
.page-text p + h2,
.page-text ul + h2 {
    margin-top: 56px;
}
.page-text ul + p {
    margin-top: 24px;
}
.page-text strong {
    color: #d4e7de;
    font-weight: 500;
}
.page-text a {
    color: #d8c5a4;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-text a:hover {
    color: #ccaa6f;
}
.page-text .page-text__updated {
    color: #8a9b93;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 48px;
}
[dir="rtl"] .page-text ul li {
    padding-left: 0;
    padding-right: 16px;
}
[dir="rtl"] .page-text ul li::after {
    left: auto;
    right: -2px;
}
@media (max-width: 941px) {
    .page-text {
        padding: 48px 0 80px;
    }
    .page-text h2 {
        font-size: 26px;
    }
    .page-text p + h2,
    .page-text ul + h2 {
        margin-top: 40px;
    }
}
@media (max-width: 482px) {
    .page-text {
        padding: 32px 0 64px;
    }
    .page-text h2 {
        font-size: 22px;
        margin-bottom: 16px;
    }
    .page-text .page-text__updated {
        font-size: 12px;
        margin-bottom: 32px;
    }
}

/* Footer bottom row: Privacy Policy link between copyright and local time. */
.footer .footer__bottom .footer__bottom-link {
    color: rgba(212, 231, 222, 0.6);
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -4%;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s;
}
.footer .footer__bottom .footer__bottom-link:hover {
    color: #d8c5a4;
}
@media (max-width: 941px) {
    .footer .footer__bottom {
        flex-wrap: wrap;
        gap: 12px 24px;
    }
}
@media (max-width: 482px) {
    .footer .footer__bottom .footer__bottom-link {
        font-size: 12px;
    }
}

/* Privacy consent checkbox (template-parts/sections/form-consent.php). The
   input stays in the layout (visually hidden, not display:none) so the
   browser can still focus it and show the native "required" message. */
.form-consent {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 32px 0;
    cursor: pointer;
    color: #a3b6ad;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: -2%;
}
.form-consent input {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    margin: 0;
    opacity: 0;
}
[dir="rtl"] .form-consent input {
    left: auto;
    right: 2px;
}
.form-consent__box {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    transition: 0.2s;
}
.form-consent__box::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid #11241b;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s;
}
.form-consent:hover .form-consent__box,
.form-consent input:focus-visible + .form-consent__box {
    border-color: #d4e7de;
}
.form-consent input:checked + .form-consent__box {
    background: #d8c5a4;
    border-color: #d8c5a4;
}
.form-consent input:checked + .form-consent__box::after {
    transform: rotate(45deg) scale(1);
}
.form-consent a {
    color: #d8c5a4;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.request-popup__form .form-consent {
    margin: 0 0 20px;
    font-size: 13px;
}