/* ==========================================================================
   GoodHR theme layer for the marketing site (Crafto / branding-agency demo).
   Loaded after vendors/style/responsive/branding-agency.css, so equal-
   specificity rules here win. One idea: swap the demo's orange accent
   (#e99022) and neutral grays for the GoodHR navy family on white.
   ========================================================================== */

:root {
    /* Accent: every .text-base-color / .bg-base-color / border-base-color */
    --base-color: #2c559a;
    /* Headings, dark buttons, strokes: deep navy ink instead of #232323 */
    --dark-gray: #1c2c50;
    /* Body copy: blue-tinted gray instead of #717580 */
    --medium-gray: #5d6784;
    /* Footer + dark panels: brand navy depths instead of #202329 */
    --charcoal-blue: #16274d;
    --slate-blue: #1f3560;
    --medium-slate-blue: #2c559a;
}

::selection {
    background: #2c559a;
    color: #fff;
}

/* --- Accent gradients: orange/teal demo pairs -> navy family --- */
.text-gradient-base-color {
    background-image: linear-gradient(to right, #2c559a 0%, #5b8bd9 100%);
}
.btn-gradient-fuel-yellow-blue {
    /* keep 200% sizing so the hover slide animation still works */
    background-image: linear-gradient(to right, #24467e, #5b8bd9, #24467e);
}
.bg-gradient-orange-transparent {
    background-image: linear-gradient(to bottom, rgba(44, 85, 154, 0.85), rgba(44, 85, 154, 0));
}
.bg-gradient-blue-transparent {
    background-image: linear-gradient(to bottom, rgba(22, 39, 77, 0.85), rgba(22, 39, 77, 0));
}
.text-orange {
    color: #2c559a;
}
.text-blue {
    color: #5b8bd9;
}

/* --- Surfaces: beige/gray section fills -> airy blue-whites --- */
.bg-linen {
    background-color: #eef3fb;
}
.bg-very-light-gray {
    background-color: #f6f9fd;
}
.bg-solitude-blue {
    background-color: #eef3fb;
}

/* --- Buttons: soften the template's square corners, calm the borders --- */
.btn {
    border-radius: 8px;
}
.btn.btn-rounded {
    border-radius: 50rem;
}
.btn-transparent-light-gray {
    border-color: #d7deec;
    color: var(--dark-gray);
}
.btn-transparent-light-gray:hover {
    background-color: var(--dark-gray);
    border-color: var(--dark-gray);
    color: #fff;
}

/* --- Header: keep the white glass bar, tune hover/active to navy --- */
.navbar .navbar-nav .nav-link {
    color: #35406b;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link {
    color: #2c559a !important;
    opacity: 1;
}

/* --- Footer: navy panel; links get a readable blue-white.
   background-image: none kills the demo's gray-square pattern SVG
   (set inline in _footer.blade.php), which clashes on navy. --- */
footer {
    background-color: #16274d;
    background-image: none !important;
}
footer a {
    color: rgba(255, 255, 255, 0.72);
}
footer a:hover {
    color: #fff;
}
footer p {
    color: rgba(255, 255, 255, 0.55);
}

/* --- Scroll progress + slider chrome --- */
.scroll-progress .scroll-line {
    background-color: rgba(44, 85, 154, 0.2);
}
.scroll-progress .scroll-point {
    background-color: #2c559a;
}
.swiper-pagination-progress .swiper-progress {
    background-color: #2c559a;
}

/* --- Decorative rotating badge (about/services heroes): monochrome navy
   instead of the demo's orange/teal lettering --- */
img[src*="demo-branding-agency-about-01"] {
    filter: grayscale(1) brightness(1.5) sepia(1) saturate(2.4) hue-rotate(185deg) brightness(0.72);
}

/* --- "Our clients" strip: uniform, quiet, wakes up on hover --- */
.gh-clients-strip .client-box img {
    max-height: 110px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.gh-clients-strip .client-box:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-2px);
}

/* --- Try-for-free registration card --- */
.gh-form-card {
    background: #fff;
    border: 1px solid #e3e9f5;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(28, 44, 80, 0.08);
    padding: 3rem;
}
@media (max-width: 767.98px) {
    .gh-form-card {
        padding: 1.75rem 1.25rem;
    }
}
.gh-form-label {
    display: block;
    font-family: var(--alt-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-gray);
    margin-bottom: 6px;
}
.gh-form-label span {
    color: #d64545;
}
.gh-form-label em {
    color: #8a91a8;
    font-style: normal;
    font-weight: 500;
}
.gh-form-field {
    position: relative;
}
.gh-form-field > i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a91a8;
    font-size: 17px;
    pointer-events: none;
}
.gh-form-field input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    font-size: 15px;
    color: var(--dark-gray);
    background: #fff;
    border: 1px solid #dfe3ee;
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gh-form-field input::placeholder {
    color: #adb4c8;
}
.gh-form-field input:focus {
    outline: 0;
    border-color: #2c559a;
    box-shadow: 0 0 0 0.2rem rgba(44, 85, 154, 0.12);
}
.gh-form-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #8a91a8;
    padding: 8px 10px;
    cursor: pointer;
}
.gh-form-eye:hover {
    color: #2c559a;
}
.gh-form-hint {
    font-size: 13px;
    line-height: 19px;
    color: #8a91a8;
    margin: 7px 0 0;
}
.gh-form-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 16px;
    margin-top: 8px;
    font-family: var(--alt-font);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(140deg, #2c559a 0%, #1f3a6e 100%);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(44, 85, 154, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gh-form-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(44, 85, 154, 0.38);
    color: #fff;
}
.gh-form-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
}
.gh-form-alert i {
    font-size: 18px;
    line-height: 1.3;
}
.gh-form-alert-danger {
    background: #fdecec;
    color: #a13030;
}
.gh-form-alert-success {
    background: #e7f6ee;
    color: #1c6b43;
}

/* --- CTA band (home, above the footer) --- */
.gh-cta-band {
    background: linear-gradient(140deg, #2c559a 0%, #16274d 100%);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}
.gh-cta-band::before,
.gh-cta-band::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.gh-cta-band::before {
    width: 22rem;
    height: 22rem;
    right: -8rem;
    top: -10rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
}
.gh-cta-band::after {
    width: 18rem;
    height: 18rem;
    left: -7rem;
    bottom: -8rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 65%);
}
.gh-cta-band > * {
    position: relative;
    z-index: 1;
}
.gh-cta-band .btn-white {
    background: #fff;
    color: #2c559a;
    border-color: #fff;
}
.gh-cta-band .btn-white:hover {
    background: #eef3fb;
    color: #24467e;
}