/*
 * peptilab/footer — frontend styles
 * Depends on: variables.css
 */

/* ============================================================
   Footer wrapper
   ============================================================ */
.site-footer {
    background: #1a1a1a !important;
    color:      #E7EAEF;
}

/* ============================================================
   Main grid — 4 columns
   ============================================================ */
.pl-footer__inner {
    max-width:             1360px !important;   /* 1240 + 2×60 */
    margin:                0 auto !important;
    padding:               80px 60px !important;
    box-sizing:            border-box;
    display:               grid !important;
    grid-template-columns: 1.4fr 1fr 1fr 1.6fr;
    gap:                   40px !important;
}

/* ============================================================
   Columns — override WP flex layout
   ============================================================ */
.pl-footer__col {
    gap: 0 !important;
}

.pl-footer__col--brand {
    gap: 24px !important;
}

/* Logo */
.pl-footer__logo {
    margin: 0 !important;
}

.pl-footer__logo img {
    width: 135px !important;
}

.pl-footer__desc {
    color:       #E7EAEF !important;
    font-size:   14px !important;
    font-weight: 400 !important;
    line-height: calc( 20 / 14 ) !important;
    max-width:   280px;
    margin:      0 !important;
}

/* Headings */
.pl-footer__heading {
    font-family: var(--pl-font-body);
    color:         #F7F9FC !important;
    font-size:     20px !important;
    font-weight:   500 !important;
    line-height:   calc( 28 / 20 ) !important;
    margin:        0 0 20px !important;
}

/* Menu links */
.pl-footer__menu {
    gap: 12px !important;
}

.pl-footer__menu a {
    color:           #E7EAEF !important;
    text-decoration: none !important;
    transition:      color var(--pl-transition);
    padding:         0 !important;
    font-size:       14px !important;
    font-weight:     400 !important;
    line-height:     calc( 20 / 14 ) !important;
}

.pl-footer__menu a:hover {
    color: var(--pl-accent) !important;
}

/* Reset nav wrapper styles */
.pl-footer__menu.wp-block-navigation {
    background:    transparent !important;
    border-radius: 0 !important;
    padding:       0 !important;
}

/* Newsletter text */
.pl-footer__newsletter-text {
    color:       #E7EAEF !important;
    font-size:   14px !important;
    font-weight: 400 !important;
    line-height: calc( 20 / 14 ) !important;
    margin:      0 0 20px !important;
}

/* ============================================================
   Omnisend embed — footer newsletter
   ============================================================
   The Omnisend plugin renders a deep nested structure with its own
   classes/inline styles. We override with strong selectors targeting
   the embed container [id^="omnisend-embedded-v2-"].
   ============================================================ */
[id^="omnisend-embedded-v2-"] {
    max-width: 100%;
}

/* Reset Omnisend's wrapper constraints so it follows our column width */
[id^="omnisend-embedded-v2-"] [class*="-content"],
[id^="omnisend-embedded-v2-"] [class*="-content-inner"],
[id^="omnisend-embedded-v2-"] [class*="-sections-container"],
[id^="omnisend-embedded-v2-"] [class*="-section-"],
[id^="omnisend-embedded-v2-"] [class*="-column-"] {
    max-width: 100% !important;
    width:     100% !important;
    padding:   0 !important;
    margin:    0 !important;
    background: transparent !important;
    border:    none !important;
    overflow:  visible !important;
    flex-direction: column;
    box-sizing: border-box;
}

[id^="omnisend-embedded-v2-"] [class*="-opacity-layer"] {
    display: none !important;
}

/* ── Heading (Let's get in touch) ── */
[id^="omnisend-embedded-v2-"] [class*="-text-"]:has(h1, h2, h3),
[id^="omnisend-embedded-v2-"] [class*="-text-"] h1,
[id^="omnisend-embedded-v2-"] [class*="-text-"] h2,
[id^="omnisend-embedded-v2-"] [class*="-text-"] h3 {
    font-family:  var(--pl-font-body) !important;
    font-size:    20px !important;
    font-weight:  500 !important;
    line-height:  28px !important;
    color:        #F7F9FC !important;
    padding:      0 !important;
    text-align:   left !important;
}

/* ── Description paragraph ── */
[id^="omnisend-embedded-v2-"] [class*="-text-"] p {
    font-family:  var(--pl-font-body) !important;
    font-size:    14px !important;
    font-weight:  400 !important;
    line-height:  20px !important;
    color:        #E7EAEF !important;
    padding:      0 !important;
    margin:       20px 0 !important;
    text-align:   left !important;
}

/* ── Input field container — position relative for absolute button ── */
[id^="omnisend-embedded-v2-"] [class*="-field-container-wrapper-"] {
    position: relative !important;
    padding:  0 !important;
    margin:   0 !important;
    width:    100%;
    max-width: 100%;
}
[id^="omnisend-embedded-v2-"] [class*="-field-container-wrapper-"] input{
    min-height:48px;
}

[id^="omnisend-embedded-v2-"] [class*="-field-container-"]:not([class*="wrapper"]) {
    margin:  0 !important;
    width:   100%;
}

/* Hide Omnisend's own label */
[id^="omnisend-embedded-v2-"] label[for^="omnisend"] {
    display: none !important;
}

/* ── Email input — pill shape ── */
[id^="omnisend-embedded-v2-"] input[type="email"],
[id^="omnisend-embedded-v2-"] [class*="-field-container-"] input {
    width:         100% !important;
    padding:       8px 48px 8px 20px !important;
    background:    #F7F9FC !important;
    border:        none !important;
    border-radius: 32px !important;
    font-family:   var(--pl-font-body) !important;
    font-size:     14px !important;
    font-weight:   400 !important;
    line-height:   26px !important;
    color:         #1A1A1A !important;
    box-shadow:    none !important;
    height:        auto !important;
    box-sizing:    border-box;
    outline:       none !important;
}

[id^="omnisend-embedded-v2-"] input[type="email"]::placeholder {
    color:   #6E7787;
    opacity: 1;
}

[id^="omnisend-embedded-v2-"] input[type="email"]:focus {
    box-shadow: 0 0 0 2px var(--pl-accent) !important;
}

/* ── Submit button — arrow icon inside the input ── */
[id^="omnisend-embedded-v2-"] [class*="-action-container-"] {
    position: absolute !important;
    bottom: 22px;
    right: 50px;
    transform: translateY(50%);
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    z-index: 2;
    background: transparent !important;
}

[id^="omnisend-embedded-v2-"] button[type="submit"],
[id^="omnisend-embedded-v2-"] [class*="-action-"][id*="-action-"] {
    width:           32px !important;
    height:          32px !important;
    padding:         0 !important;
    background:      transparent !important;
    border:          none !important;
    border-radius:   50% !important;
    cursor:          pointer;
    color:           transparent !important;
    font-size:       0 !important;
    line-height:     0 !important;
    text-indent:     -9999px;
    overflow:        hidden;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M10.1278 3.15231L9.79181 3.50431L11.7758 5.50431L13.7758 7.50431H1.00781V8.49631H13.7758L9.77581 12.4963L10.4958 13.2163L15.7118 8.00031L13.1198 5.40831C11.3918 3.68031 10.5171 2.81631 10.4958 2.81631C10.4745 2.81631 10.3518 2.92831 10.1278 3.15231Z' fill='%231A1A1A'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: center !important;
    background-size:     16px 16px !important;
    transition:          opacity .2s ease;
    box-shadow:          none !important;
    letter-spacing:      normal !important;
}

[id^="omnisend-embedded-v2-"] button[type="submit"]:hover {
    opacity: .7;
}

/* Error / helper messages — small red below field */
[id^="omnisend-embedded-v2-"] [id$="-required"],
[id^="omnisend-embedded-v2-"] [id$="-error"],
[id^="omnisend-embedded-v2-"] [class*="-submit-error"] {
    font-size:   12px !important;
    line-height: 16px !important;
    padding:     8px 0 0 !important;
    color:       #FF6B6B !important;
}

/* Success/subscribed state — reuse heading/paragraph styles above */
[id^="omnisend-embedded-v2-"] [class*="-success-sections-container"] [class*="-text-"] h1,
[id^="omnisend-embedded-v2-"] [class*="-subscribed-sections-container"] [class*="-text-"] h1,
[id^="omnisend-embedded-v2-"] [class*="-success-sections-container"] [class*="-text-"] h2,
[id^="omnisend-embedded-v2-"] [class*="-subscribed-sections-container"] [class*="-text-"] h2 {
    color: #F7F9FC !important;
}

/* Hide our static title/description in the newsletter column since
   Omnisend provides its own — only if an embed is present */
.pl-footer__col--newsletter:has([id^="omnisend-embedded-v2-"]) .pl-footer__heading,
.pl-footer__col--newsletter:has([id^="omnisend-embedded-v2-"]) .pl-footer__newsletter-text {
    display: none !important;
}

/* ============================================================
   Bottom bar
   ============================================================ */
/* Divider — full width */
.site-footer > .pl-footer__bottom::before {
    content:    "";
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     1px;
    background: rgba(255, 255, 255, .08);
}

.pl-footer__bottom {
    position:        relative;
    max-width:       1360px !important;
    margin:          0 auto !important;
    padding:         24px 60px !important;
    box-sizing:      border-box;
}

.pl-footer__copy,
.pl-footer__credit {
    color:       #9B9DA2 !important;
    font-size:   12px !important;
    font-weight: 400 !important;
    line-height: calc( 16 / 12 ) !important;
    margin:      0 !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .pl-footer__inner {
        grid-template-columns: 1fr 1fr !important;
        padding: 60px 24px 32px !important;
    }
    .pl-footer__bottom {
        padding: 24px 48px !important;
    }
}

@media (max-width: 600px) {
    .pl-footer__inner {
        grid-template-columns: 1fr 1fr !important;
        padding: 40px 24px !important;
        gap: 32px 20px !important;
    }

    /* 1st column (brand) — full width */
    .pl-footer__inner > :nth-child(1) {
        grid-column: 1 / -1;
    }

    /* 2nd + 3rd (Products + Company) — side by side (default 1fr 1fr) */

    /* 4th column (newsletter) — full width */
    .pl-footer__inner > :nth-child(4) {
        grid-column: 1 / -1;
    }

    .pl-footer__bottom {
        padding:         24px !important;
        flex-direction: column;
        gap:            16px;
        text-align:     center;
    }
}

/* Omnisend embedded form section — mobile horizontal padding override */
@media (max-width: 768px) {
    .omnisend-form-69f353afc714d209e1d9ad8e-section-624ab2f927652f651edfd0ac {
        padding-left:  25px !important;
        padding-right: 25px !important;
    }
}
[id^="omnisend-embedded-v2-"] [class*="-action-container-"]{
        bottom: 25px;
    right: 0.5rem;
}
@media(max-width:768px){
    [id^="omnisend-embedded-v2-"] [class*="-field-container-wrapper-"]{
        max-width:100%;
    }
    [id^="omnisend-embedded-v2-"] [class*="-field-container-wrapper-"] input{
        min-height:48px;
    }
}