/* ABOUTME: Site-wide global styles and The7 overrides for Wallington Supply LLC.
   ABOUTME: Enqueued late (after The7's generated custom.css) so these rules win the cascade.

   Consolidates: the former style.css rules (style.css is now header-only) and
   the former inline <style> blocks printed from functions.php (navbar centering,
   TranslatePress flag spacing). Bump the enqueue version in functions.php on
   every edit — the ?ver= query string is the cache-buster. */

/* ============================================================
   Legacy form styles (original developer) — likely still used
   by Contact Form 7 markup (.lewa/.prawa = left/right columns).
   ============================================================ */
ul.form {list-style: none;}
ul.form li {margin-bottom: 10px;}
ul.form input {width: 90%;}
ul.form textarea {width: 90%; height: 95px;}
ul.form input[type="radio"] {max-width: 10px !important;}
div.lewa {float: left; width: 48%;}
div.prawa {float: left; width: 48%;}

input[type="submit"] {max-width: 150px; padding: 15px 10px; margin-top: 25px; color: #fff !important;}
textarea {min-height: 130px; height: 130px !important;}
div.lewa_form {width: 78%; float: left;}
div.prawa_form {width: 20%; float: left;}

li.formularz_przerywnik h3 {margin-bottom: 20px !important; padding: 10px 0px; line-height: 1.5; border-bottom: 1px solid #754d29;}
input[type="checkbox"] {width: 20px !important;}
li.regulaminy {font-size: 11px; line-height: 1.4;}
#telefon_form li.regulaminy {color: #fff;}
div.wyslij input {width: 100% !important; background-color: #222 !important; color: #fff !important; border: none !important; padding: 3px !important; margin-top: 0px !important;}

@media screen and (max-width: 1000px) {
div.lewa {float: left; width: 100%;}
div.prawa {float: left; width: 100%;}
}

/* ============================================================
   Headings & shared text helpers
   (The orange ::after accent squares the original theme added
   are gone; the blanket ::after hide further down also covers
   any decoration The7 itself injects.)
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
border-bottom: 1px solid #efefef;
padding-bottom: 10px;
}

.bialy {color: #fff;}
.bialy h3 {color: #fff; border-bottom: none;}
.bialy h2 {color: #fff; border-bottom: none;}

div.vc_gitem-post-data h4:before {display: none;}
div.vc_gitem-post-data h4:after {display: none;}
div.vc_gitem-post-data h4 {border-bottom: none;}

.vc_gitem-post-data-source-post_title p a {text-transform: uppercase; text-shadow: 2px 2px 2px rgba(0,0,0,0.3);}

/* ============================================================
   Navbar centering + The7 chrome cleanup
   (formerly inline in functions.php: wsllc_navbar_center_css)
   Center nav across full page width, independent of logo.
   ============================================================ */
.inline-header .header-bar { position: relative; }
.inline-header .header-bar > #primary-menu {
    position: absolute;
    left: 0;
    right: 0;
    display: flex !important;
    justify-content: center;
    pointer-events: none;
}
.inline-header .header-bar > #primary-menu > li {
    pointer-events: auto;
}
.vc_grid-container { display: flex; justify-content: center; }
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after,
.page-title h1::after,
.entry-title::after,
.widget-title::after,
.page-title-head h1::after { display: none !important; }
.page-title-breadcrumbs { display: none !important; }
/* Remove header decoration lines */
.top-bar::after { display: none !important; }
.masthead.inline-header { border: none !important; outline: none !important; }
/* Tuck content up on pages with disabled page title */
.page-id-13 #main { padding-top: 20px !important; padding-bottom: 20px !important; }
/* Homepage intro section — fill ~1/3 of slider height */
.page-id-9 #content > .wpb-content-wrapper > .vc_row:first-child {
    padding: 60px 0 50px !important;
}
.page-id-9 #content > .wpb-content-wrapper > .vc_row:first-child h1 {
    font-size: 38px !important;
    line-height: 1.25 !important;
    margin-bottom: 20px !important;
}
.page-id-9 #content > .wpb-content-wrapper > .vc_row:first-child p {
    font-size: 19px !important;
    line-height: 1.6 !important;
}
/* Our Products section: its parallax background is light, so override the
   shared .bialy white text on this row only — the heading and the offer
   card titles. The dark CTA row below is .vc_row.cta and keeps white text. */
.page-id-9 .vc_row.bialy h2,
.page-id-9 .vc_row.bialy .wsllc-brand-card__title {
    color: #000 !important;
}
/* Contact page — right-align send button */
.page-id-31 .wpcf7-form p:last-of-type { text-align: right; }

/* ============================================================
   TranslatePress flag overlap fix
   (formerly inline in functions.php: wsllc_trp_flag_spacing_css)
   Reserve right-side space in the top-bar and mobile header so
   the fixed-position language floater never covers phone/email
   icons or the hamburger menu.
   ============================================================ */
/* Pin the TRP flag to a fixed right offset instead of the default 10%,
   so the reserved header padding works at every viewport width. */
#trp-floater-ls.trp-top-right,
.trp-language-switcher-container.trp-top-right {
    right: 15px !important;
}
/* Reserve 85px on the right (15px flag offset + 66px flag + 4px gap)
   in both desktop top-bar and mobile header bar. */
.top-bar .right-widgets.mini-widgets {
    padding-right: 85px !important;
}
/* Even spacing between phone icon, number, and email icon */
.top-bar .mini-contacts.phone {
    margin-right: 10px;
}
.top-bar .mini-contacts.phone a {
    margin-right: 10px;
}
/* Phone icon — gray default, orange circle on hover */
.top-bar .mini-contacts.phone i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #999;
    font-size: 14px;
    margin-right: 6px;
    transition: background 0.3s, color 0.3s;
}
.top-bar .mini-contacts.phone:hover i {
    background: #ca511d;
    color: #fff;
}
/* Email (social) icon hover. On The7's transparent/light-preset header,
   The7 forces the social-icon hover background to translucent white
   (uploads/the7-css/custom.css), hiding the brand orange — the icon then
   reads as grey on hover. Re-assert the accent color, matching The7's
   light-preset selector and prefixing body.transparent so this wins the
   specificity battle (that rule borrows an ID via :not(#phantom)). The
   glyph is already forced white by the same light-preset preset. */
body.transparent .light-preset-color:not(.mobile-sticky-on).masthead:not(#phantom):not(.sticky-on):not(.sticky-top-line-on) .soc-ico.hover-accent-bg a:after {
    background-color: #ca511d !important;
    background-image: none !important;
}
.mobile-header-bar {
    padding-right: 85px !important;
}

/* ============================================================
   Footer — clean flexbox layout
   (The7 column system removed in sidebar-footer.php)
   ============================================================ */
.wsllc-footer-widgets {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 25px 0;
}
.wsllc-footer-widgets > .widget {
    flex: 1 1 0;
    text-align: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.wsllc-footer-widgets > .widget .widget-title {
    margin-top: 0;
    padding-top: 0;
}
.wsllc-footer-widgets > .widget img {
    display: block;
    margin: 0 auto;
}

@media screen and (max-width: 778px) {
    .wsllc-footer-widgets {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 0 20px;
    }
    .wsllc-footer-widgets > .widget {
        text-align: center;
        margin-bottom: 30px;
    }
}

/* Footer credit — resting "credits" slides up to reveal "szymon404" on hover.
   Two stacked words inside a 1-line-tall clipped window; both shift up by one
   line on hover so one swaps out as the other swaps in. */
.wsllc-credits {
    position: relative;
    display: inline-block;
    text-decoration: none;
    vertical-align: top;
    transition: color 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.wsllc-credits:focus {
    outline: none;
}
.wsllc-credits__wrap {
    display: block;
    overflow: hidden;
    line-height: 1.2;
    height: 1.2em;   /* fallback for browsers without the lh unit */
    height: 1lh;
}
.wsllc-credits__label,
.wsllc-credits__alt {
    display: block;
    white-space: nowrap;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.wsllc-credits:hover .wsllc-credits__label,
.wsllc-credits:hover .wsllc-credits__alt,
.wsllc-credits:focus .wsllc-credits__label,
.wsllc-credits:focus .wsllc-credits__alt {
    transform: translateY(-1.2em);   /* fallback */
    transform: translateY(-1lh);
}

/* Underline draws in from the left on hover, retracts to the right on leave.
   Asymmetric transform-origin is what gives the left-to-right "load" feel. */
.wsllc-credits::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.1em;
    height: 0.035em;
    min-height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}
.wsllc-credits:hover::after,
.wsllc-credits:focus::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* The7 underlines bottom-bar links on hover (#bottom-bar a:hover). Suppress that
   native underline — scoped under #bottom-bar to win specificity — so only our
   custom ::after line shows. */
#bottom-bar a.wsllc-credits,
#bottom-bar a.wsllc-credits:hover,
#bottom-bar a.wsllc-credits:focus {
    text-decoration: none;
}

/* On hover the text turns the WSLLC accent orange; the underline follows via currentColor. */
#bottom-bar a.wsllc-credits:hover,
#bottom-bar a.wsllc-credits:focus {
    color: #ca511d;
}