/* ============================================================================
   Baltic Stack — Header & Hero overrides
   Loaded AFTER style.css so these win without touching the base stylesheet.
   Fixes:
     1) Header links were black-on-dark (invisible) -> forced white + hover.
     2) Header overlapped the hero -> now a SOLID BAR above the hero.
     3) Hero was a fixed 960px (too tall) -> now fills viewport minus header.
   ============================================================================ */

:root {
    --bs-header-h: 80px;              /* desktop header height */
    --bs-header-bg: #0d1b2a;          /* solid header bar colour (brand navy) */
    --bs-header-link: #ffffff;        /* nav link colour */
    --bs-header-link-hover: #4da3ff;  /* nav link hover colour */

    /* Coordinated brand palette derived from the header colour.
       --bs-accent is the single accent used across buttons/links/highlights. */
    --bs-brand-dark: #0d1b2a;         /* header navy */
    --bs-brand: #16324f;              /* mid navy (panels/gradient end) */
    --bs-accent: #4da3ff;             /* light-blue accent (matches header hover) */
    --bs-accent-dark: #2f7fd6;        /* darker accent for hover states */

    /* Remap the base template theme variables so everything inherits the
       header family instead of the old orange / royal-blue / yellow mix. */
    --theme: var(--bs-accent);
    --action: var(--bs-accent);
    --rr-color-theme-primary: var(--bs-accent);
    --rr-color-theme-secondary: var(--bs-accent-dark);
}

/* ---------------------------------------------------------------------------
   0) SITE-WIDE COLOUR SYNC
   Repoint every hard-coded template accent (#FF6A3A orange, #3F5AF3 royal
   blue, #ffc226 yellow) to the header-based accent so the whole site matches.
--------------------------------------------------------------------------- */

/* Solid accent backgrounds (buttons, badges, dots, bars, active tabs) */
.rr-btn,
.slider-tab-btn.active,
.section-title .sub-title,
.theme-bg,
.bg-theme,
[class*="btn"]:not(.side-toggle):not(.btn-close):hover {
    /* handled per-property below to avoid clobbering layout */
}

/* Primary CTA buttons */
.rr-btn .text-two,
.rr-btn:hover,
.slider-btn:hover,
.header__button .rr-btn:hover {
    background-color: var(--bs-accent) !important;
    color: #04213f !important;
}

/* Links / icons that used the theme colour */
a:hover,
.main-menu > ul > li:hover > a {
    color: var(--bs-accent);
}

/* Any element whose accent was the old royal blue #3F5AF3 */
.it-hero-content .title:before {
    background: linear-gradient(270deg, var(--bs-accent) 0%, transparent 100%) !important;
    opacity: 0.9;
}

/* Icon accents / small color swatches used across sections */
.icon-box .icon i,
.services-item .icon i,
.faq-item .icon,
.section-title .sub-title::before,
.section-title .sub-title::after {
    color: var(--bs-accent) !important;
}

/* Hard-coded royal-blue (#3F5AF3) selectors from the base template */
.service-box-wrap .service-box .service-img:after {
    background: radial-gradient(100% 100% at 50% 0%, rgba(77, 163, 255, 0) 0%, var(--bs-accent) 100%) !important;
}
.post-card-2 .post-thumb:after {
    background: linear-gradient(180deg, rgba(13, 27, 42, 0.7) 0%, var(--bs-accent) 88.88%) !important;
}
.web-hero-content .title:before,
.dark .web-hero-content .title:before {
    background: linear-gradient(270deg, var(--bs-accent) 0%, transparent 100%) !important;
}
.web-hero-content .hero-btn:before,
.it-hero-content .hero-btn:before,
.about-wrap .about-img-wrap .about-img .img-shape,
.brand-wrap .brand-img-wrap .brand-img:before {
    background-color: var(--bs-accent) !important;
}


/* ---------------------------------------------------------------------------
   1) HEADER AS A SOLID BAR (not absolutely positioned over the hero)
--------------------------------------------------------------------------- */
.header-area-2 {
    position: relative;              /* was absolute -> stop overlapping hero */
    background-color: var(--bs-header-bg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Sticky variant keeps the same solid look */
.header-area-2.sticky,
.header-area-2 .sticky,
.header-area-2 .transformed {
    background-color: var(--bs-header-bg) !important;
}

.header-area-2__inner {
    height: var(--bs-header-h);
}

@media only screen and (max-width: 1199px) {
    :root { --bs-header-h: 70px; }
}

/* Logo sizing so it fits the bar nicely */
.header-area-2 .header__logo img,
.header-area-2 .header__logo .normal-logo {
    max-width: 150px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
   2) VISIBLE NAV LINKS (white on the dark bar)
--------------------------------------------------------------------------- */
.header-area-2 .main-menu > ul > li > a,
.header-area-2 .main-menu li a {
    color: var(--bs-header-link) !important;
}

.header-area-2 .main-menu > ul > li:hover > a,
.header-area-2 .main-menu li a:hover {
    color: var(--bs-header-link-hover) !important;
}

/* Side-toggle (hamburger) button: match the header bar colour, icon white */
.header-area-2 .header__navicon .side-toggle {
    background-color: var(--bs-header-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.header-area-2 .header__navicon .side-toggle i {
    color: var(--bs-header-link);
}

.header-area-2 .header__navicon .side-toggle img {
    filter: brightness(0) invert(1);
}

/* "Let's Talk" button stays readable on the dark bar */
.header-area-2 .header__button .rr-btn {
    color: #fff;
}

/* ---------------------------------------------------------------------------
   3) HERO FILLS VIEWPORT MINUS HEADER (was a fixed 960px)
--------------------------------------------------------------------------- */
.slider-item .slide-img-wrap {
    height: calc(100vh - var(--bs-header-h));
    min-height: 480px;
    max-height: 900px;               /* guard on ultra-tall screens */
}

@media only screen and (max-width: 992px) {
    .slider-item .slide-img-wrap {
        height: calc(100vh - var(--bs-header-h));
        min-height: 420px;
    }
}

@media only screen and (max-width: 767px) {
    .slider-item .slide-img-wrap {
        height: 70vh;
        min-height: 360px;
    }
}

/* Keep the overlay so light text stays readable over any hero image */
.slider-section .slider-item .overlay {
    display: block;
    background: linear-gradient(90deg, rgba(13,27,42,0.72) 0%, rgba(13,27,42,0.35) 60%, rgba(13,27,42,0.15) 100%);
    mix-blend-mode: normal;
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   4) HERO HEADINGS ~50% smaller
      title       was 135 / 80 / 50   -> 68 / 40 / 25
      bottom-title was 75 / 45 / 30    -> 38 / 23 / 15
      sub-title    was 50 / 35 / 24    -> 13 / 9 / 7   (halved again)
--------------------------------------------------------------------------- */
.slider-section .it-hero-content .title {
    font-size: 68px;
}
.slider-section .it-hero-content .bottom-title {
    font-size: 38px;
}
.slider-section .it-hero-content .sub-title {
    font-size: 13px;
}

@media only screen and (max-width: 992px) {
    .slider-section .it-hero-content .title { font-size: 40px; }
    .slider-section .it-hero-content .bottom-title { font-size: 23px; }
    .slider-section .it-hero-content .sub-title { font-size: 9px; }
}

@media only screen and (max-width: 767px) {
    .slider-section .it-hero-content .title { font-size: 25px; }
    .slider-section .it-hero-content .bottom-title { font-size: 15px; }
    .slider-section .it-hero-content .sub-title { font-size: 7px; }
}

/* Trim the oversized round hero button a bit */
.slider-item .slider-content-wrap .it-hero-content-wrap .slider-btn-wrap .slider-btn {
    height: 130px;
    width: 130px;
    font-size: 40px;
}

@media only screen and (max-width: 767px) {
    .slider-item .slider-content-wrap .it-hero-content-wrap .slider-btn-wrap .slider-btn {
        height: 84px;
        width: 84px;
        font-size: 26px;
    }
}

/* ---------------------------------------------------------------------------
   GLOBAL TEXT COLOUR
   Force all site text to the dark header ink (#11151c), EXCEPT:
     - the header bar (.header-area-2) keeps its own white nav links
     - the hero slider (.slider-section) keeps its original colours
--------------------------------------------------------------------------- */
body,
h1, h2, h3, h4, h5, h6,
p, span, li, a, label, div,
.title, .sub-title, .text, .section-title {
    color: #11151c;
}

/* Exclusions: don't touch the header or the hero slider */
.header-area-2, .header-area-2 *,
.slider-section, .slider-section * {
    color: revert;
}


/* ---------------------------------------------------------------------------
   PAGE TITLE — 50% SMALLER
   Append this to the END of public/front/assets/css/custom.css.

   style.css sets .page-title-wrapper .page-title to 495px and steps it down
   through six media queries. Every one has to be overridden or the old value
   comes back at that width. Same selector, same specificity — custom.css is
   loaded after style.css in layout/app.blade.php, so these win.

   Original -> half
     495px  -> 248px
     385px  -> 193px
     325px  -> 163px
     265px  -> 133px
     185px  ->  93px
     125px  ->  63px
      90px  ->  45px
--------------------------------------------------------------------------- */

.page-title-wrapper .page-title {
    font-size: 248px;
}

@media only screen and (max-width: 1919px) {
    .page-title-wrapper .page-title {
        font-size: 193px;
    }
}

@media only screen and (max-width: 1399px) {
    .page-title-wrapper .page-title {
        font-size: 163px;
    }
}

@media only screen and (max-width: 1199px) {
    .page-title-wrapper .page-title {
        font-size: 133px;
    }
}

@media only screen and (max-width: 991px) {
    .page-title-wrapper .page-title {
        font-size: 93px;
    }
}

@media only screen and (max-width: 767px) {
    .page-title-wrapper .page-title {
        font-size: 63px;
    }
}

@media (max-width: 575px) {
    .page-title-wrapper .page-title {
        font-size: 45px;
    }
}

/* The 68px top margin was sized for a 495px heading and now looks like a gap.
   Delete this block if you want the original spacing back. */
.page-title-wrapper {
    margin-top: 40px;
    margin-bottom: 20px;
}


/* ---------------------------------------------------------------------------
   ALTERNATIVE — one rule instead of seven

   If you would rather not maintain seven breakpoints, delete everything above
   and use this instead. It scales smoothly with the viewport between 45px and
   248px, so there are no jumps at the breakpoints and no media queries.

   .page-title-wrapper .page-title {
       font-size: clamp(45px, 13vw, 248px);
   }
--------------------------------------------------------------------------- */