/*!
 * Taxory - theme.css
 * Design tokens, base typography, header, footer, shared components.
 *
 * Loaded on every view. Page-specific rules live in front-page.css and pages.css.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
    --tx-navy: #1f2b6b;
    --tx-navy-deep: #22337c;
    --tx-green: #36b37e;
    --tx-green-dark: #2a9d6a;
    --tx-green-light: #a8ffd8;
    --tx-gray: #6c757d;
    --tx-body: #495057;
    --tx-white: #ffffff;
    --tx-surface: #f8f9fa;
    --tx-border: #e9ecef;

    --tx-font: 'IBM Plex Sans Arabic', 'Tajawal', 'Cairo', system-ui, sans-serif;

    /* IBM Plex Sans Arabic ships 100-700 only. --tx-bold is the heaviest real
       weight available; anything above it is synthesized by the browser and
       distorts Arabic letterforms, so nothing in this theme asks for 800/900. */
    --tx-medium: 500;
    --tx-semibold: 600;
    --tx-bold: 700;

    --tx-header-h: 80px;
    --tx-radius: 15px;
    --tx-radius-lg: 20px;

    --tx-shadow-sm: 0 5px 15px rgba(0, 0, 0, .08);
    --tx-shadow-md: 0 10px 30px rgba(0, 0, 0, .10);
    --tx-shadow-lg: 0 20px 40px rgba(0, 0, 0, .15);

    --tx-transition: .3s ease;
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    font-family: var(--tx-font);
    background-color: var(--tx-white);
    color: var(--tx-navy);
    line-height: 1.6;
    padding-top: var(--tx-header-h);
}

/* Every in-page anchor target clears the fixed header. Without this the
   heading of the section you jumped to sits underneath the navbar. */
[id] {
    scroll-margin-top: calc(var(--tx-header-h) + 10px);
}

/* Visible keyboard focus everywhere. Bootstrap's default ring disappears
   against the navy sections, so it is restated with a light outline. */
:focus-visible {
    outline: 3px solid var(--tx-green);
    outline-offset: 2px;
    border-radius: 4px;
}

.tx-on-dark :focus-visible {
    outline-color: var(--tx-white);
}

/* Skip link - first tab stop, offscreen until focused. */
.tx-skip-link {
    position: absolute;
    top: -100px;
    right: 20px;
    z-index: 2000;
    background: var(--tx-navy);
    color: var(--tx-white);
    padding: 12px 24px;
    border-radius: 0 0 8px 8px;
    font-weight: var(--tx-semibold);
    text-decoration: none;
    transition: top .2s ease;
}

.tx-skip-link:focus {
    top: 0;
    color: var(--tx-white);
}

/* ==========================================================================
   Shared section headings
   ========================================================================== */

.section-title {
    font-size: 2.5rem;
    font-weight: var(--tx-bold);
    color: var(--tx-navy);
    margin-bottom: 1rem;
    text-align: center;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--tx-gray);
    text-align: center;
    margin: 0 auto 4rem;
    max-width: 600px;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Header / navbar
   ========================================================================== */

.navbar {
    background-color: var(--tx-white) !important;
    border-bottom: 1px solid var(--tx-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    transition: box-shadow var(--tx-transition), padding var(--tx-transition);
}

/* Applied by main.js past 50px of scroll. Previously the class was toggled
   but never styled. */
.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(31, 43, 107, .12);
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

/* Balanced three-part bar: logo, centred links, call to action.
 *
 * The links are centred on the BAR, not on the space left over beside the
 * logo. Giving the logo and the CTA an equal flex basis makes the middle
 * column land dead centre whatever their natural widths are, which mx-auto on
 * the list alone could not do. */
@media (min-width: 992px) {
    .navbar > .container {
        flex-wrap: nowrap;
    }

    .navbar-brand,
    .tx-header-cta {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Bootstrap puts a 1rem inline-end margin on the brand. It only exists on
       one side, so it shifted the centre column by half of it. */
    .navbar-brand {
        margin-inline-end: 0;
    }

    .tx-header-cta {
        display: flex;
        justify-content: flex-end;   /* inline-end: the left in RTL */
    }

    .navbar-collapse {
        flex: 0 1 auto;
    }

    #primary-menu {
        justify-content: center;
    }
}

@media (max-width: 991px) {
    /* Logo, CTA, then the burger. The CTA sheds its label so three items still
       fit across a 360px phone. */
    .tx-header-cta {
        order: 2;
        margin-inline-start: auto;
        margin-inline-end: .5rem;
    }

    .navbar-toggler {
        order: 3;
    }

    .navbar-collapse {
        order: 4;
        flex-basis: 100%;
    }

    .tx-header-cta .tx-cta-btn {
        padding: 8px 14px;
        font-size: .9rem;
    }
}

.navbar-brand img {
    height: 48px;
    width: auto;
    transition: height var(--tx-transition);
}

.navbar.scrolled .navbar-brand img {
    height: 40px;
}

.navbar-nav .nav-link {
    color: var(--tx-navy) !important;
    font-weight: var(--tx-semibold);
    padding: 10px 14px;
    border-radius: .5rem;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--tx-green) !important;
    background-color: rgba(54, 179, 126, .08);
    transform: translateY(-1px);
}

.navbar-nav .nav-link[aria-current="page"],
.navbar-nav .current-menu-item > .nav-link {
    color: var(--tx-green) !important;
}

/* --------------------------------------------------------------------------
   Transparent header over the hero (front page only)
   --------------------------------------------------------------------------
   The bar floats on the hero until you scroll, then .scrolled turns it back
   into the solid white one used on every other view. */

.tx-hero-header {
    /* The hero starts at the very top and runs underneath the bar. */
    padding-top: 0;
}

.tx-hero-header .navbar:not(.scrolled) {
    background-color: transparent !important;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* The logo is navy and green. Navy on the navy end of the hero gradient is
   invisible, so over the hero it is rendered in flat white and only returns
   to full colour once the bar goes solid. */
.tx-hero-header .navbar:not(.scrolled) .navbar-brand img,
.tx-hero-header .navbar:not(.scrolled) .custom-logo {
    filter: brightness(0) invert(1);
}

.tx-hero-header .navbar:not(.scrolled) .navbar-toggler {
    border-color: rgba(255, 255, 255, .55);
}

.tx-hero-header .navbar:not(.scrolled) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Only on desktop, where the links sit inline on the hero. On mobile the
   collapsed panel is its own white card, so its links stay navy. */
@media (min-width: 992px) {
    .tx-hero-header .navbar:not(.scrolled) .navbar-nav .nav-link {
        color: var(--tx-white) !important;
    }

    .tx-hero-header .navbar:not(.scrolled) .navbar-nav .nav-link:hover,
    .tx-hero-header .navbar:not(.scrolled) .navbar-nav .nav-link:focus {
        color: var(--tx-white) !important;
        background-color: rgba(255, 255, 255, .16);
    }

    .tx-hero-header .navbar:not(.scrolled) .navbar-nav .nav-link[aria-current="page"],
    .tx-hero-header .navbar:not(.scrolled) .navbar-nav .current-menu-item > .nav-link {
        color: var(--tx-white) !important;
        background-color: rgba(255, 255, 255, .16);
    }

    /* The CTA keeps its green fill but gains an edge so it reads as a button
       against the hero rather than floating in it. */
    .tx-hero-header .navbar:not(.scrolled) .tx-cta-btn {
        box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    }
}

.tx-cta-btn {
    background: linear-gradient(135deg, var(--tx-green), #1fbf88);
    color: var(--tx-white) !important;
    border: none;
    font-weight: var(--tx-bold);
    padding: 10px 18px;
    border-radius: .8rem;
    box-shadow: 0 6px 18px rgba(54, 179, 126, .25);
}

.tx-cta-btn:hover,
.tx-cta-btn:focus {
    opacity: .95;
    box-shadow: 0 10px 24px rgba(54, 179, 126, .35);
}

@media (max-width: 991px) {
    :root {
        --tx-header-h: 72px;
    }

    .navbar-collapse {
        background: var(--tx-white);
        border-radius: 12px;
        padding: 14px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
    }

    .navbar-nav .nav-link {
        margin-bottom: 6px;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Navy through to green, the same sweep as the hero and contact sections,
   rather than the old navy-on-navy which was flat and left the logo sitting
   dark-blue-on-dark-blue. */
.site-footer {
    background: linear-gradient(135deg, var(--tx-navy) 0%, var(--tx-navy-deep) 45%, #1d6b6d 100%);
    color: var(--tx-white);
    padding: 60px 0 25px;
    margin-top: 3rem;
    position: relative;
    overflow: hidden;
}

/* A soft green bloom in the corner the logo does NOT sit in, so the gradient
   has some life without lightening the area behind the wordmark. */
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 120%, rgba(54, 179, 126, .38), transparent 55%),
        rgba(255, 255, 255, .06);
    pointer-events: none;
}

/* The logo is navy and green artwork; the navy half disappears on any dark
   background. Flat white keeps the mark legible across the whole sweep. */
.tx-footer-logo {
    height: 56px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .95;
}

.site-footer > .container {
    position: relative;
    z-index: 1;
}

.site-footer a {
    color: var(--tx-green-light);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--tx-white);
    text-decoration: underline;
}

/* The contact and links columns are lists of details, not prose, so they lose
   the underline in both states. The credit line keeps its underline on hover
   because it reads as a sentence. */
.tx-footer-list a,
.tx-footer-list a:hover,
.tx-footer-list a:focus {
    text-decoration: none;
}

.tx-footer-title {
    font-weight: var(--tx-bold);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.tx-footer-text {
    color: #dbe1ff;
}

.tx-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tx-footer-list li {
    margin-bottom: .5rem;
}

.tx-social a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
    margin-left: 8px;
    border: 1px solid rgba(255, 255, 255, .15);
    transition: all .2s ease;
}

.tx-social a:hover,
.tx-social a:focus {
    transform: translateY(-2px);
    background: rgba(54, 179, 126, .4);
    text-decoration: none;
}

.tx-copy {
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin-top: 40px;
    padding-top: 18px;
    color: #dbe1ff;
    font-size: .95rem;
}

.tx-credit a {
    font-weight: var(--tx-semibold);
}

.tx-credit span {
    opacity: .5;
    margin: 0 .35rem;
}

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 1000;
}

.whatsapp-btn {
    width: 60px;
    height: 60px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
    text-decoration: none;
    color: var(--tx-white);
    transition: all var(--tx-transition);
}

.whatsapp-btn:hover,
.whatsapp-btn:focus {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(37, 211, 102, .6);
    color: var(--tx-white);
}

.whatsapp-btn i {
    font-size: 1.8rem;
}

@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        left: 20px;
    }

    .whatsapp-btn {
        width: 50px;
        height: 50px;
    }

    .whatsapp-btn i {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   Shared: back-to-home button (404, legal pages)
   ========================================================================== */

.back-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--tx-green), var(--tx-navy));
    color: var(--tx-white);
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: var(--tx-semibold);
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(54, 179, 126, .3);
    transition: all var(--tx-transition);
    margin-top: 40px;
}

.back-btn:hover,
.back-btn:focus {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(54, 179, 126, .4);
    color: var(--tx-white);
}

.back-btn i {
    margin-left: 10px;
    font-size: 1.1rem;
}

/* Screen-reader-only helper (matches WordPress core's own class name). */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}