/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI: https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI: https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* ---------------------------------------------------
   GENERAL TYPOGRAPHY / ELEMENTS
--------------------------------------------------- */
.span-like-h6 {
  font-family: "Commissioner", sans-serif;
  font-weight: 700;
}

hr {
  width: 50%;
  margin: -15px auto 2px auto;
  border: none;
  border-top: 2px solid #ccc;
}

hr#special-line {
  border-top: 2px solid #0e1a1f !important;
}

/* ---------------------------------------------------
   CONTACT FORM 7 STYLES
--------------------------------------------------- */

/* Form wrapper */
.wpcf7 form {
    max-width: 420px;
    margin: 0 auto;
    padding: 20px 30px;
    background: #d5d4d4;
    border-radius: 5px;
    border: 3px solid #f5f2e9;
    box-sizing: border-box;
}

/* Labels */
.wpcf7-form label {
    display: block;
    text-align: left;
    margin: 0 0 4px 0;
    font-size: 14px;
}

/* Inputs / textarea */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100%;
    padding: 6px 10px;
    margin-bottom: -15px;
    border: 2px solid #D0D0D0;
    border-radius: 4px;
    background: #ebe7dc;
    transition: 0.25s ease;
    box-sizing: border-box; /* important for borders */
    font-size: 14px;
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* Remove clear/X and spin buttons on mobile */
input::-webkit-clear-button,
input::-webkit-inner-spin-button {
    display: none !important;
}

/* Focus state (black border) */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
    border: 3px solid #4a443d !important;
    background-image: none !important;
}

/* Valid state (green check) */
.wpcf7 input.cf7-valid,
.wpcf7 textarea.cf7-valid {
    border-color: #3CB371 !important;
    background:
        rgba(60, 179, 113, 0.03)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15'><text x='0' y='12' fill='green'>✓</text></svg>")
        no-repeat right 10px center !important;
    background-size: 15px 15px !important;
    padding-right: 30px; /* space for the icon */
    box-sizing: border-box;
}

/* Invalid state (red cross) */
.wpcf7 input.cf7-invalid,
.wpcf7 textarea.cf7-invalid {
    border-color: #C0392B !important;
    background:
        rgba(255, 0, 0, 0.03)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15'><text x='0' y='12' fill='red'>✗</text></svg>")
        no-repeat right 10px center !important;
    background-size: 15px 15px !important;
    padding-right: 30px;
    box-sizing: border-box;
}

/* Textarea sizing */
.wpcf7 textarea {
    min-height: 80px;
    height: 60px;
    resize: vertical;
}

/* Submit button */
.wpcf7 input[type="submit"] {
    padding: 6px 12px;
    width: 100%;
    border: none !important; /* never affected */
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px !important;
    margin-bottom: -30px !important;
    transition: 0.3s ease;
    font-size: 14px;
    display: block;
    background: #4a443d; /* keep a stable background */
    color: #fff;
}

/* Validation messages */
.wpcf7-not-valid-tip {
    color: #C0392B;
    margin-top: 2px;
    margin-bottom: 4px;
    font-size: 12px;
}

.wpcf7-response-output {
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

/* Smooth transitions for all input fields */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    transition: border 0.3s ease, background 0.3s ease;
}




/* ---------------------------------------------------
   FOOTER FIX — CENTERED, NO SHIFT
--------------------------------------------------- */
#footer-outer #copyright {
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 25px 0 !important;
}

#footer-outer #copyright span {
    width: 100%;
    text-align: center !important;
}

/* ---------------------------------------------------
   OFF-CANVAS MENU CENTERING
--------------------------------------------------- */
#slide-out-widget-area .inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100dvh !important;
}

#slide-out-widget-area .off-canvas-menu-container li a {
    text-align: center !important;
}

/* ---------------------------------------------------
   SERVICES COLUMNS
--------------------------------------------------- */
.custom-columns {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.custom-column {
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
}

@media (max-width: 768px) {
    .custom-columns {
        flex-direction: column;
    }
}

/* ---------------------------------------------------
   VISION COLUMN
--------------------------------------------------- */
@media (max-width: 768px) {
    .vision {
        width: 100%;
        text-align: center;
        margin: 20px auto;
        padding: 40px 20px;
        display: block;
    }

    .vision .vc_column-inner {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .vision.wpb_column {
        margin-bottom: 20px !important;
    }
}

/* ---------------------------------------------------
   HEADER MENU
--------------------------------------------------- */
#header-outer nav > ul {
    gap: 0 !important;
}

#header-outer nav > ul > li {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

#header-outer nav > ul > li > a {
    padding: 12px 26px !important;
    display: block !important;
    background-color: #0e1a1f;
    line-height: 1.2 !important;
}

/* Gold vertical dividers */
#header-outer nav > ul > li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 36px;
    background: #b89551;
    border-radius: 2px;
}

/* Active state */
#header-outer nav > ul > li.current-menu-item > a,
#header-outer nav > ul > li.current_page_item > a {
    background-color: #b89551;
}

/* Hover (inactive only) */
#header-outer nav > ul > li:not(.current-menu-item):not(.current_page_item) > a:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---------------------------------------------------
   OFF-CANVAS MENU STYLING
--------------------------------------------------- */
#slide-out-widget-area {
    background: rgba(25,51,68,0.70) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

#slide-out-widget-area .inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 100dvh !important;
    padding: 50px 30px !important;
    opacity: 0;
    animation: fadeInContainer 0.7s ease forwards;
}

/* Off-canvas logo */
#offcanvas-logo {
    text-align: center !important;
    width: 30%;
}

#offcanvas-logo img {
    max-width: 180px;
    width: 100%;
    height: auto;
    margin: 0 auto 10px auto;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Off-canvas menu items */
#slide-out-widget-area .off-canvas-menu-container li {
    opacity: 0;
    animation: slideFade 0.7s ease forwards;
}

/* Staggered animation for menu items */
#slide-out-widget-area .off-canvas-menu-container li:nth-child(1) { animation-delay: 0.15s; }
#slide-out-widget-area .off-canvas-menu-container li:nth-child(2) { animation-delay: 0.25s; }
#slide-out-widget-area .off-canvas-menu-container li:nth-child(3) { animation-delay: 0.35s; }
#slide-out-widget-area .off-canvas-menu-container li:nth-child(4) { animation-delay: 0.45s; }
#slide-out-widget-area .off-canvas-menu-container li:nth-child(5) { animation-delay: 0.55s; }

#slide-out-widget-area .off-canvas-menu-container li a {
    text-align: center !important;
    font-size: 1.35rem;
    font-weight: 500;
    color: #E4DFD7 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 0;
    position: relative;
    transition: all 0.35s ease;
}

#slide-out-widget-area .off-canvas-menu-container li a:hover {
    background: linear-gradient(90deg, #b89551 0%, #d2b278 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#slide-out-widget-area .off-canvas-menu-container li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #b89551, #d2b278);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

#slide-out-widget-area .off-canvas-menu-container li a:hover::after {
    width: 45%;
}

/* Socials */
#offcanvas-socials {
    display: flex;
    gap: 22px;
    margin-bottom: 30px;
}

#offcanvas-socials a {
    font-size: 22px;
    color: #E4DFD7 !important;
    transition: all 0.3s ease;
}

#offcanvas-socials a:hover {
    color: #b89551 !important;
    transform: translateY(-2px);
}

/* ---------------------------------------------------
   ANIMATIONS
--------------------------------------------------- */
@keyframes fadeInContainer {
    to { opacity: 1; }
}

@keyframes slideFade {
    0% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------
   RESPONSIVE
--------------------------------------------------- */
@media (max-width: 600px) {
    #offcanvas-logo img { max-width: 150px; }
    #slide-out-widget-area .off-canvas-menu-container li a { font-size: 1.15rem; }
    #offcanvas-socials a { font-size: 18px; }
}







/* Subtle Glossy Overlay */
.glossy-row .row-bg-wrap {
    background: linear-gradient(
        135deg,
        rgba(7,19,26,0.92) 0%,
        rgba(7,19,26,0.75) 45%,
        rgba(255,255,255,0.06) 100%
    ) !important;
    backdrop-filter: saturate(140%) blur(2px);
}

/* Dark Premium Sheen */
.glossy-row-dark .row-bg-wrap {
    background: linear-gradient(
        120deg,
        #07131A 0%,
        #0B1E29 45%,
        rgba(255,255,255,0.08) 65%,
        #07131A 100%
    ) !important;
    background-blend-mode: overlay;
}

/* Gold-Tinted Metallic */
.glossy-row-gold .row-bg-wrap {
    background: linear-gradient(
        140deg,
        rgba(198,165,96,0.08) 0%,
        rgba(7,19,26,0.95) 55%,
        rgba(255,255,255,0.07) 100%
    ) !important;
    backdrop-filter: blur(1px);
}

/* Light Cream Gloss */
.glossy-row-light .row-bg-wrap {
    background: linear-gradient(
        135deg,
        #F4F1E9 0%,
        #ECE7DB 40%,
        rgba(255,255,255,0.25) 100%
    ) !important;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.05);
}

/* Navy → Gold Premium Duotone */
.glossy-row-duotone .row-bg-wrap {
    background: linear-gradient(
        120deg,
        #07131A 0%,
        #1A2C33 40%,
        #C6A560 120%
    ) !important;
    opacity: 0.95;
}