/*
Theme Name: Seamar
Theme URI: http://www.seamar.nl/
Description: This is a custom child theme for Salient
Author: Sixtyseven
Author URI: http://www.sixtyseven.com/
Template: salient
Version: 0.1
*/

/* =========================================================================
   Design tokens
   Salient loads this stylesheet after its own dynamic styles, so most
   overrides win without !important. Finetune the header-bar / menu values
   below to nudge the layout without touching the rules themselves.
   ========================================================================= */

:root {
    /* Brand */
    --seamar-blue: #081540;        /* dark blue - text on orange (solid) buttons */
    --seamar-blue-bar: #072b66;    /* dark blue bar behind the logo in the header */
    /* Orange comes from Salient's own --nectar-accent-color (#ff820e). */

    /* Formulieren: rustige, muted grijze rand voor invoervelden. */
    --seamar-field-border: #c3c9d4;
}

/* =========================================================================
   1 + 2. Text on orange (solid) buttons is always dark blue
   Filled accent buttons + the header "Contact" button (.button_solid_color).
   See-through / outline accent buttons keep their orange text.
   ========================================================================= */

.nectar-button.accent-color:not(.see-through):not(.see-through-2),
.nectar-button.accent-color:not(.see-through):not(.see-through-2) span,
#header-outer .button_solid_color > a,
#header-outer .button_solid_color > a .menu-title-text,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button[type="submit"] {
    color: var(--seamar-blue) !important;
}

/* =========================================================================
   3. Dark blue bar behind the lower half of the logo, inside the header
   Lives in #header-outer so it scrolls/sticks with the header.
   ========================================================================= */

#header-outer::before {
    content: "";
    position: absolute;
    inset: 82px 0 0 0;
    background-color: var(--seamar-blue-bar);
    z-index: 0;
    pointer-events: none;
    /* Loop synchroon met de header-shrink (Salient is asymmetrisch):
       0.15s ease bij uitklappen (deze regel), 0.3s ease bij inklappen
       (de .small-nav regel hieronder), net als het logo/de header. */
    transition: inset 0.15s ease;
}

#header-outer.small-nav::before {
	inset-block-start: 74px;
	transition: inset 0.3s ease;
}

/* Keep the logo and navigation above the bar. */
#header-outer #header-secondary-outer,
#header-outer header#top {
    position: relative;
    z-index: 1;
}

#header-outer #logo, #header-outer .logo-clone, #header-outer .logo-spacing {
	margin-block: 5px 0 !important;
}

/* =========================================================================
   4. Menu sits lower; orange contact button has a 20px vertical offset
   ========================================================================= */

#header-outer header#top nav {

}

#header-outer .col.span_9 {
	align-self: flex-start;
}

#header-outer .sf-menu > .menu-item > a {
	padding-block: 1.25rem;
}

/* =========================================================================
   5. Chapeaus (h6) are orange, except on a hero background where they
   inherit the surrounding (light) colour.
   ========================================================================= */

h6 {
    color: var(--nectar-accent-color);
}

/* !important beats the inline `h6{color:...!important}` that Salient prints. */
.first-section:has(.row-bg-layer.using-image) h6 {
    color: inherit !important;
}

/* On an orange background the (orange) chapeau would be invisible -> white. */
[data-bg-color="#FF820E" i] h6 {
    color: #fff !important;
}

/* =========================================================================
   6. Service cards: align the buttons to the bottom so they line up.
   Requires the row to carry the "cards" class (Row settings >
   Extra Class Name in the Page Builder). Inert until that class is added.
   ========================================================================= */

.cards .vc_column-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cards .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.cards .wpb_wrapper > .nectar-button {
    margin-top: auto !important; /* beats the inline margin-top Salient prints */
    align-self: flex-start;      /* keep the button's natural width, don't stretch */
}

/* =========================================================================
   7. Carousel pagination bullets use the primary (accent) orange.
   ========================================================================= */

/* Swiper carousels */
.swiper {
    --swiper-pagination-color: var(--nectar-accent-color);
}

.swiper-pagination-bullet {
    background-color: var(--nectar-accent-color);
}

.swiper-pagination-bullet-active {
    background-color: var(--nectar-accent-color) !important;
}

/* Testimonial / quote slider pagination */
.testimonial_slider .controls ul li .pagination-switch {
    border-color: var(--nectar-accent-color);
}

.testimonial_slider .controls ul li .pagination-switch.active,
.testimonial_slider .controls ul li .pagination-switch:hover {
    background-color: var(--nectar-accent-color);
    border-color: var(--nectar-accent-color);
}

/* Place the avatar image beside the name + subtitle (instead of on top).
   Quote stays full width; the avatar/name/subtitle form a centred footer row.
   The outer 1fr columns centre that footer group under the quote. */
.testimonial_slider .slides blockquote {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-areas:
        "quote  quote  quote  quote"
        ".      avatar name   ."
        ".      avatar title  .";
    align-items: center;
    column-gap: 15px;
}

.testimonial_slider .slides blockquote > p {
    grid-area: quote;
}

.testimonial_slider .slides blockquote .image-icon {
    grid-area: avatar;
    margin: 0;
}

.testimonial_slider .slides blockquote .testimonial-name {
    grid-area: name;
    align-self: end;
    text-align: left;
}

.testimonial_slider .slides blockquote .title {
    grid-area: title;
    align-self: start;
    text-align: left;
}

/* =========================================================================
   8. Partner logo carousel (.partners): smaller logos, more whitespace.
   ========================================================================= */

.partners .carousel.clients .no-link {
    padding-left: 30px;
    padding-right: 30px;
}

.partners .carousel.clients .no-link img {
    max-height: 55px;
    width: auto;
    margin: 0 auto;
}

/* =========================================================================
   9. Gravity Form next to "Ready to work together" (form #4): 1rem gap.
   ========================================================================= */

#gform_wrapper_4 .gform_fields {
    grid-row-gap: 1rem;
}

/* Remove the top margin above field labels. */
#gform_wrapper_4 .gfield_label,
#gform_wrapper_4 .gform-field-label {
    margin-top: 0;
}

/* =========================================================================
   10. Contact-formulier (form #1)
   Het formulier staat in een .light kolom op een donkerblauwe overlay, dus
   Salient maakt alle velden transparant met witte tekst.
   a) Alle velden krijgen een rustige, muted grijze rand.
   b) Het select2-veld krijgt een echte witte achtergrond (de gekozen tekst
      blijft #444 uit de select2 basis-CSS en zou anders donker-op-donker staan).
   c) Salient kleurt het select2-vakje oranje bij hover en in geopende staat
      (background + border, met !important). Dat draaien we terug naar wit met
      dezelfde grijze rand. De #gform_wrapper_1 prefix (id) wint van Salients
      class-only regels; alleen de oranje !important-regels vereisen !important.
   ========================================================================= */

/* a) Muted grijze rand op alle invoervelden. */
#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 input[type="tel"],
#gform_wrapper_1 input[type="url"],
#gform_wrapper_1 input[type="number"],
#gform_wrapper_1 textarea,
#gform_wrapper_1 .select2-container--default .select2-selection--single {
    border: 1px solid var(--seamar-field-border);
}

/* b) Witte achtergrond + leesbare tekst voor het select2-veld. */
#gform_wrapper_1 .select2-container--default .select2-selection--single {
    background-color: #fff;
}

#gform_wrapper_1 .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--seamar-blue);
}

/* c) Geen oranje hover / open-staat op het select2-veld. */
#gform_wrapper_1 .select2-container--default .select2-selection--single:hover,
#gform_wrapper_1 .select2-container--default.select2-container--open .select2-selection--single {
    background-color: #fff !important;
    border-color: var(--seamar-field-border) !important;
}

/* Salient kleurt de gekozen tekst (en placeholder) wit bij hover/open, met
   !important. Op onze witte achtergrond is dat onleesbaar, dus houden we de
   tekst donkerblauw. De id-prefix wint van Salients class-only regels. */
#gform_wrapper_1 .select2-container--default:hover .select2-selection--single .select2-selection__rendered,
#gform_wrapper_1 .select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered,
#gform_wrapper_1 .select2-container--default .select2-selection--single:hover .select2-selection__placeholder {
    color: var(--seamar-blue) !important;
}

/* Salient kleurt ook het pijltje wit bij hover/open. Houd het donkerblauw,
   zodat het zichtbaar blijft op de witte achtergrond. */
#gform_wrapper_1 .select2-container--default:hover .select2-selection--single .select2-selection__arrow b,
#gform_wrapper_1 .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--seamar-blue) !important;
    border-bottom-color: var(--seamar-blue) !important;
}

/* =========================================================================
   11. News overview (.nectar-post-grid)
   ========================================================================= */

/* Undo the tight letter-spacing on post titles.
   The #ajax-content-wrap prefix beats Salient's `#ajax-content-wrap .nectar-inherit-h3`. */
#ajax-content-wrap .nectar-post-grid-item .post-heading,
#ajax-content-wrap .nectar-post-grid-item .post-heading span {
    letter-spacing: normal;
}

/* Category labels: smaller, uppercase, light-blue background with dark-blue text.
   Colours come from Salient's configured theme colours (extra-color-2 = #edeffb,
   extra-color-1 = #081540). The #ajax-content-wrap prefix beats Salient's own
   category-button colour rule. */
#ajax-content-wrap .nectar-post-grid .meta-category .style-button {
    font-size: 12px;
    text-transform: uppercase;
    background-color: var(--nectar-extra-color-2);
    color: var(--nectar-extra-color-1) !important; /* beats Salient's inline category-button colour */
}

/* =========================================================================
   Back to top: "Back to top" label + arrow.png icon (replaces the chevron).
   ========================================================================= */

#to-top {
    width: 48px !important;   /* actual size of arrow.png */
    height: 48px !important;
    background-color: transparent;
    background-image: url(images/arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px 48px;
}

#to-top:hover,
#to-top.dark:hover {
    background-color: transparent !important; /* Salient sets an accent bg on hover */
}

#to-top i {
    display: none;
}


.testimonials .row-bg {
    background-size: contain;
}

/* =========================================================================
   Timeline component (seamar_timeline / seamar_timeline_item)
   Desktop: items alternate image/text around a central wavy spine with
   year bullets. Mobile: stacked, image above content, no bullets/spine.
   ========================================================================= */

.seamar-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

/* Central wavy connector line (the Figma squiggle SVG), behind the items. */
.seamar-timeline::before {
    content: "";
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 50%;
    width: 12px;
    transform: translateX(-50%);
    background: url(images/timeline-line.svg) repeat-y center top;
    background-size: 12px auto;
    z-index: 0;
}

.seamar-timeline__item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 48px;
}

/* Alternate: even items put the text on the left, image on the right. */
.seamar-timeline__item:nth-child(even) {
    flex-direction: row-reverse;
}

.seamar-timeline__media,
.seamar-timeline__text {
    flex: 1 1 0;
    min-width: 0;
}

.seamar-timeline__img {
    display: block;
    width: 100%;
    height: 360px;
    object-fit: cover;
}

/* Spine column with the year bullet at the top. */
.seamar-timeline__spine {
    flex: 0 0 50px;
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.seamar-timeline__bullet {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--nectar-extra-color-1, #081540);
    border: 2px solid var(--seamar-blue-bar, #072b66);
    color: #fff;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -0.5px;
    line-height: 1;
}

.seamar-timeline__text {
    display: flex;
    flex-direction: column;
}

.seamar-timeline__year {
    color: var(--nectar-accent-color);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.seamar-timeline__title {
    color: var(--nectar-extra-color-1, #081540);
    font-size: 24px !important;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -1px !important;
    margin: 0 0 16px;
}

.seamar-timeline__body {
    color: #002061;
    font-size: 16px;
    line-height: 24px;
}

/* Expand/collapse: hide items beyond the third until expanded. */
.seamar-timeline-wrap:not(.is-expanded) .seamar-timeline__item:nth-child(n+4) {
    display: none;
}

.seamar-timeline-wrap.is-expanded .seamar-timeline__item:nth-child(n+4) {
    animation: seamar-timeline-reveal 0.45s ease both;
}

@keyframes seamar-timeline-reveal {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Primary (accent) button, matching the site's default button and the GF
   submit button (section 18): orange background, dark-blue text, square
   corners, no shadow, no border. Centred under the timeline. */
.seamar-timeline__toggle {
    display: block;
    margin: 2.5rem auto 0;
    padding: 13px 22px;
    background-color: var(--nectar-accent-color);
    color: var(--seamar-blue);
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.seamar-timeline__toggle:hover,
.seamar-timeline__toggle:focus {
    background-color: color-mix(in srgb, var(--nectar-accent-color) 88%, #000);
}

@media (prefers-reduced-motion: reduce) {
    .seamar-timeline-wrap.is-expanded .seamar-timeline__item:nth-child(n+4) {
        animation: none;
    }
}

/* Mobile: stack, image always above content, drop the bullets/spine. */
@media (max-width: 999px) {
    .seamar-timeline::before {
        display: none;
    }

    .seamar-timeline__item,
    .seamar-timeline__item:nth-child(even) {
        flex-direction: column;
        gap: 16px;
    }

    .seamar-timeline__spine {
        display: none;
    }

    .seamar-timeline__img {
        height: auto;
    }
}

/* =========================================================================
   12. Single post header: remove the author avatar + publish date.
   Both live in .author-section inside #page-header-bg (present across the
   header variants). Title styling lives in section 19.
   ========================================================================= */

body.single-post #page-header-bg .author-section {
    display: none;
}

/* =========================================================================
   13. Related posts section: light-blue background.
   Colour is Salient's extra-color-2 (#edeffb). The .row-bg carries an empty
   inline style, so no !important is needed.
   ========================================================================= */

.related-post-wrap .row-bg-wrap .row-bg {
    background-color: var(--nectar-extra-color-2, #edeffb);
}

/* =========================================================================
   14. Post meta cards: rounded corners.
   ========================================================================= */

.post .post-meta {
    border-radius: 1.25rem;
}

/* =========================================================================
   15. Bulleted lists: accent-orange bullets.
   Salient renders content bullets as native disc markers (ul li), so ::marker
   colours just the bullet, not the text. Only lists that actually show a
   marker are affected (menus/widgets use list-style:none, so they stay put).
   ========================================================================= */

ul li::marker {
    color: var(--nectar-accent-color);
}

/* =========================================================================
   16. Placeholder menu items (href="#") aren't real links, so drop the
   pointer cursor. Covers WP nav-menu items in the header + mobile/off-canvas.
   ========================================================================= */

.menu-item > a[href="#"] {
    cursor: default;
}

/* =========================================================================
   17. Remove the below-header meta bar (author/date/category/reading time)
   from single posts.
   ========================================================================= */

body.single-post #single-below-header {
    display: none;
}

/* =========================================================================
   18. Gravity Forms submit button: match Salient's primary (accent) button.
   The Orbital form theme paints the submit button with its own primary colour
   (a blue: --gf-color-primary #204ce5). We restyle it as the accent-orange
   solid button used across the site: orange background, dark-blue text, square
   corners, no shadow, no border. !important beats both the Orbital theme
   variables and Salient's own input[type=submit] rule. Text colour is also set
   in section 1; kept here so it holds if Orbital renders a <button>. */

.gform_wrapper .gform_button {
    background-color: var(--nectar-accent-color) !important;
    color: var(--seamar-blue) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus {
    background-color: color-mix(in srgb, var(--nectar-accent-color) 88%, #000) !important;
}

/* =========================================================================
   19. Single post header title (default_minimal variant).
   Salient centres the default_minimal heading; setting text-align on the h1
   itself wins over the inherited centre. text-transform is !important because
   its uppercase source isn't in the header CSS (a broader heading setting).
   ========================================================================= */

body.single-post #page-header-bg .entry-title {
    text-align: left;
    text-transform: none !important;
}