/* ==========================================================================
   Safe Pools - Design tokens & base
   Palette sampled directly from the Figma source (8XAb12rcCVsENptoTkAoJm).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand font
   -------------------------------------------------------------------------- */
/* The face is "thmanyah sans" Regular - the same family the design specifies.
   Only the Regular weight exists, so ONE @font-face is declared: previously a
   second block re-pointed weight 700 at the same file, which made the browser
   treat it as a genuine bold and skip synthesis, leaving every heading at
   regular weight. With only 400 declared the browser synthesises the bold.
   Drop a real thmanyah-sans-bold.otf in assets/fonts/ and add a 700 block
   here to replace the synthesised weight with the true one. */
@font-face {
    font-family: 'Thmanyah Sans';
    src: url('../fonts/thmanyah-sans-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --sp-navy: #0F3B58;
    --sp-navy-soft: #143F5B;
    --sp-blue: #037CC8;
    --sp-blue-dark: #02669F;
    --sp-blue-soft: #238CCF;

    /* Neutrals */
    --sp-white: #FFFFFF;
    --sp-bg: #F6F6F6;
    --sp-bg-warm: #F7F7F5;
    --sp-line: #E4E4E4;
    --sp-muted: #A3A3A3;
    /* --sp-muted is the design's own decorative grey: it is deliberately faint
       under a section heading, where it reads as a caption rather than as text
       you have to parse. It only reaches 2.3:1 on the light background though,
       so anything the visitor actually has to READ - breadcrumbs, product meta,
       result counts, order labels - uses this darker grey instead, which clears
       4.5:1 while still reading as secondary. */
    --sp-muted-strong: #6E6E6E;
    --sp-text: #1A1A1A;

    /* Accent behind the active nav item (sampled) */
    --sp-highlight: #D2E7F5;
    /* bar under a section heading - paler on light sections, stronger on navy */
    --sp-title-bar: #CBE0EE;
    --sp-title-bar-navy: #6BA7CF;
    /* pale blue used for the short accent on the "read more" rules */
    --sp-accent-line: #6BA7CF;
    /* highlight behind the "book now" link on a service card */
    --sp-highlight-soft: #D9E9F4;

    /* Typography scale - sizes derived by matching rendered text widths
       against the design (e.g. "خدماتنا" is 90px wide there = 30px type). */
    --sp-font: 'Thmanyah Sans', 'Segoe UI', Tahoma, sans-serif;
    --sp-h1: 58px;
    --sp-h2: 30px;
    --sp-h3: 22px;
    --sp-body: 16px;
    --sp-sub: 17px;
    --sp-link: 19px;
    --sp-small: 14px;

    /* Rhythm - the design runs 64-100px of section padding depending on the
       block; 80px is the middle and matches the products section exactly. */
    --sp-section-y: 80px;
    --sp-gap: 24px;
    --sp-radius: 10px;
    --sp-radius-lg: 18px;

    /* Saudi Riyal glyph, used as a mask so it inherits the surrounding text colour */
    --sp-riyal-src: url('../images/riyal.png');

    /* Effects */
    --sp-shadow: 0 4px 24px rgba(15, 59, 88, .08);
    --sp-shadow-hover: 0 10px 32px rgba(15, 59, 88, .16);
    --sp-transition: .35s ease;
}

/* --------------------------------------------------------------------------
   3. Layout widths, measured from the 1600px Figma frame
   --------------------------------------------------------------------------
   Content sits in a 1140px column (the products grid runs 230..1369 on a
   1600px canvas, i.e. 230px either side). Bootstrap's own xxl container is
   1320px, so it has to be pinned back to 1140. The header is wider - its row
   runs 130..1454, about 1320px.
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1140px;
    }
}

/* The header row measures 130..1454 in the design, i.e. 1325px of content.
   Bootstrap's container adds 12px of padding either side, so the cap is
   1325 + 24 = 1349 for the content to land at the right width. */
.sp-header .container,
.sp-intro-slide .container {
    max-width: 1349px;
}

/* the services row is 1170 wide in the design (216..1383), a touch wider than
   the 1140 used by the rest of the page */
@media (min-width: 1200px) {
    .sp-services > .container {
        max-width: 1194px;
    }
}

/* --------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */
body {
    font-family: var(--sp-font);
    font-size: var(--sp-body);
    color: var(--sp-text);
    background: var(--sp-white);
    line-height: 1.9;
    overflow-x: hidden;
    /* Bootstrap's reboot leaves body resolving to text-align:left, which drags
       every inline / inline-flex child (logos, list links, buttons) to the left
       even while direction is rtl. Pin it to the reading direction. */
    text-align: start;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sp-font);
    font-weight: 700;
    color: var(--sp-navy);
    margin: 0;
}

/* Bootstrap's reboot underlines links and keeps the underline on hover, which
   the design never uses - kill it in every state, site-wide. */
a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
}

a {
    color: var(--sp-blue);
    transition: color var(--sp-transition);
}

a:hover {
    color: var(--sp-blue-dark);
}

img {
    max-width: 100%;
    height: auto;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --------------------------------------------------------------------------
   4. Section heading (title sits on a light-blue highlight bar, per Figma)
   -------------------------------------------------------------------------- */
.sp-section {
    padding: var(--sp-section-y) 0;
}

.sp-section--gray {
    background: var(--sp-bg);
}

.sp-section--navy {
    background: var(--sp-navy);
    color: var(--sp-white);
}

.sp-section-head {
    text-align: center;
    margin-bottom: 56px;
}

/* 20px either side so the bar runs ~40px wider than the words, as measured
   (heading 90px wide, bar 130px) */
.sp-section-title {
    display: inline-block;
    position: relative;
    font-size: var(--sp-h2);
    line-height: 1.4;
    padding: 0 20px;
    z-index: 1;
}

/* the bar sitting under/behind the foot of the title - 12px tall */
.sp-section-title::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 4px;
    width: 100%;
    height: 12px;
    background: var(--sp-title-bar);
    z-index: -1;
}

.sp-section--navy .sp-section-title {
    color: var(--sp-white);
}

.sp-section-sub {
    color: var(--sp-muted);
    font-size: var(--sp-sub);
    margin-top: 10px;
}

.sp-section--navy .sp-section-sub {
    color: rgba(255, 255, 255, .75);
}

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */
.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: var(--sp-radius);
    background: var(--sp-blue);
    color: var(--sp-white);
    border: 0;
    font-size: var(--sp-body);
    transition: background var(--sp-transition), transform var(--sp-transition);
}

.sp-btn:hover {
    background: var(--sp-blue-dark);
    color: var(--sp-white);
    transform: translateY(-2px);
}

/* text link with a trailing arrow, as used under the intro / about copy */
/* "المزيد" style links: 19px with a 17px gap before the arrow, measured on
   the design (word 47px wide, arrow 13px, 17px between them). */
.sp-more {
    display: inline-flex;
    align-items: center;
    gap: 17px;
    color: inherit;
    font-size: var(--sp-link);
}

.sp-more i {
    transition: transform var(--sp-transition);
}

.sp-more:hover i {
    transform: translateX(-6px);
}

[dir="ltr"] .sp-more:hover i {
    transform: translateX(6px);
}

/* --------------------------------------------------------------------------
   6. Owl Carousel - shared nav/dots styling (library markup, themed only)
   -------------------------------------------------------------------------- */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--sp-white);
    font-size: 20px;
    transition: background var(--sp-transition);
}

/* Flex + centre alignment keeps the 8px idle dots and the 25px active one on
   the same line. The fixed height means switching slides never changes the
   row's size, so the section below cannot shift while paging. */
.owl-carousel .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    margin-top: 34px;
}

/* Owl renders each dot as a <button>, which otherwise picks up the browser's
   default grey box and outset border - reset it before styling the inner span. */
.owl-carousel .owl-dots .owl-dot,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    background: transparent;
    border: 0;
    padding: 0;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.owl-carousel .owl-dots .owl-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    line-height: 0;
}

.owl-carousel .owl-dots .owl-dot:focus,
.owl-carousel .owl-nav button:focus {
    outline: 0;
}

/* Measured on the design: idle dots are 8px solid discs; the active one is a
   25px ring with a 9px disc inside it. */
.owl-carousel .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 0 8px;
    background: var(--sp-blue);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transition: all var(--sp-transition);
}

.owl-carousel .owl-dots .owl-dot.active span {
    width: 25px;
    height: 25px;
    background: transparent;
    border: 1px solid var(--sp-blue);
}

.owl-carousel .owl-dots .owl-dot.active span::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    background: var(--sp-blue);
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   7. Saudi Riyal symbol (rendered as an image everywhere, per the design)
   -------------------------------------------------------------------------- */
.sp-riyal {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.12em;
    margin-inline-start: 4px;
    background: currentColor;
    -webkit-mask: var(--sp-riyal-src) no-repeat center / contain;
    mask: var(--sp-riyal-src) no-repeat center / contain;
}