/*
Theme Name: Flatsome Child
Description: LED RSA shared styles and reusable landing-page components.
Author: UX Themes
Template: flatsome
Version: 3.1
*/

/* ==========================================================================
   1. Shared fonts and design tokens
   ========================================================================== */
@font-face {
    font-family: LEDArchivo;
    src: url("assets/fonts/archivo-regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: LEDArchivo;
    src: url("assets/fonts/archivo-semibold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: LEDArchivo;
    src: url("assets/fonts/archivo-extrabold.ttf") format("truetype");
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: LEDArchivo;
    src: url("assets/fonts/archivo-black.ttf") format("truetype");
    font-weight: 900;
    font-display: swap;
}
:root {
    --ledrsa-font: LEDArchivo, Arial, sans-serif;
    --ledrsa-ink: #111;
    --ledrsa-button: #080808;
    --ledrsa-accent: #ed1c24;
    --ledrsa-hover: #cf151d;
    --ledrsa-button-radius: 5px;
}

/* ==========================================================================
   2. Site-wide typography
   Native element-specific styles remain free to override these defaults.
   ========================================================================== */
html body {
    font-family: var(--ledrsa-font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ledrsa-ink);
}
body :is(input, select, textarea, button, .button, .nav > li > a) {
    font-family: var(--ledrsa-font);
}
body :is(h1, h2, h3, h4, h5, h6, .heading-font) {
    font-family: var(--ledrsa-font);
    letter-spacing: -.035em;
    line-height: 1.13;
    font-weight: 800;
    text-transform: none;
}
body h1 {
    font-size: clamp(32px, 3.5vw, 54px);
    margin: 0 0 18px;
}
body h2 {
    font-size: clamp(26px, 2.5vw, 36px);
    margin: 0 0 24px;
}
body h3 {
    font-size: 22px;
    margin: 0 0 12px;
}
body h4 { font-size: 20px; }
body h5 { font-size: 18px; }
body h6 { font-size: 16px; }

/* ==========================================================================
   3. Page CTA links and the project contact form submit only.
   Search, login and other form controls retain native Flatsome sizing.
   Default/Primary/Secondary: black. White: light variant. Outline/link variants
   retain native Flatsome behavior. UX Builder inline padding/radius take priority.
   ========================================================================== */
body :is(a.button:not(.icon), .wpcf7 .ledrsa-enquiry-submit input[type="submit"]) {
    font-family: var(--ledrsa-font);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    min-height: 44px;
    padding: 12px 20px;
    border-radius: var(--ledrsa-button-radius);
    box-shadow: none;
}
body :is(a.button:not(.icon), .wpcf7 .ledrsa-enquiry-submit input[type="submit"]):not(.uppercase) {
    text-transform: none;
}
body :is(a.button:not(.icon), .wpcf7 .ledrsa-enquiry-submit input[type="submit"]):where(:not(.is-small):not(.is-smaller):not(.is-xsmall):not(.is-xxsmall):not(.is-large):not(.is-larger):not(.is-xlarge):not(.is-xxlarge)) {
    font-size: 16px;
}
body a.button:not(.icon).is-small { font-size: 14px; }
body :is(a.button:not(.icon), .wpcf7 .ledrsa-enquiry-submit input[type="submit"]):not(.white):not(.alert):not(.success):not(.is-outline):not(.is-link):not(.is-underline) {
    background-color: var(--ledrsa-button);
    color: #fff;
    border-color: var(--ledrsa-button);
}
body :is(a.button:not(.icon), .wpcf7 .ledrsa-enquiry-submit input[type="submit"]):not(.alert):not(.success):not(.is-outline):not(.is-link):not(.is-underline):hover {
    background-color: var(--ledrsa-hover);
    border-color: var(--ledrsa-hover);
    color: #fff;
    box-shadow: none;
}
body a.button:not(.icon).white:not(.is-outline):not(.is-link):not(.is-underline):not(:hover) {
    background-color: #fff;
    border-color: #fff;
    color: var(--ledrsa-button);
}
body a.button:not(.icon).is-outline:not(.white):not(.alert):not(.success) {
    color: var(--ledrsa-button);
    border-color: currentColor;
    background-color: transparent;
}
body a.button:not(.icon).is-outline:not(.white):not(.alert):not(.success):hover {
    background-color: var(--ledrsa-button);
    border-color: var(--ledrsa-button);
    color: #fff;
}
body a.button:not(.icon):is(.is-link, .is-underline):not(.white):not(.alert):not(.success) {
    color: var(--ledrsa-button);
}
body a.button:not(.icon) i {
    color: var(--ledrsa-accent);
    margin-left: 16px;
}
body a.button:not(.icon):hover i { color: inherit; }
body :is(a, button, input[type="submit"]):focus-visible {
    outline: 3px solid var(--ledrsa-accent);
    outline-offset: 4px;
}
@media (max-width: 549px) {
    body a.button:not(.icon) { max-width: 100%; }
}

/* ==========================================================================
   4. Reusable landing-page components and responsive layout exceptions
   These classes are opt-in; they do not change other page layouts.
   ========================================================================== */
.ledrsa-landing {
    color: var(--ledrsa-ink);
    font-size: 16px;
    line-height: 1.55;
}

.ledrsa-landing p {
    margin: 0 0 16px;
}

.ledrsa-landing .row {
    max-width: 1180px;
}

.ledrsa-landing .col {
    padding-bottom: 0;
}

.ledrsa-hero .text-box,.ledrsa-closing .text-box {
    max-width: 1050px;
}

.ledrsa-hero p {
    font-size: 18px;
    line-height: 1.5;
    max-width: 650px;
}

.ledrsa-proof-list {
    list-style: none;
    margin: 0!important;
    padding: 0;
}

.ledrsa-proof-list li {
    margin: 7px 0!important;
    font-weight: 600;
}

.ledrsa-proof-list li:before {
    content: '→';
    color: #ed1c24;
    margin-right: 12px;
}

.ledrsa-form-reserve {
    margin-inline: auto;
}

.ledrsa-form-reserve h2 {
    margin-bottom: 14px;
}

.ledrsa-form-reserve p {
    max-width: 510px;
    margin: 0 auto 16px;
}

.ledrsa-reserve-label {
    display: inline-block;
    border: 1px dashed #999;
    padding: 12px 20px;
    border-radius: 6px;
    color: #626262;
    font-size: 14px;
}

.ledrsa-environments .button {
    margin: 5px;
}

.ledrsa-environments .ledrsa-environment-note {
    font-size: 14px;
    color: #626262;
    margin-top: 12px;
}

.ledrsa-benefits-intro {
    border-top: 1px solid #999;
    padding-top: 28px;
    margin-bottom: 32px;
}

.ledrsa-benefit>.col-inner {
    height: 100%;
}

/* Height is editable in each native Image element; preserve the SVG proportions. */
.ledrsa-benefit-icon .image-cover img {
    object-fit: contain;
    object-position: left center;
}

.ledrsa-benefit h3 {
    font-size: 20px;
}

.ledrsa-benefit p {
    font-size: 14px;
    margin-bottom: 0;
}

.ledrsa-benefits-row {
    align-items: stretch;
    row-gap: 22px;
}



.ledrsa-ranges h2 {
    color: white;
    text-align: center;
}

.ledrsa-product-grid {
    row-gap: 28px;
    align-items: stretch;
}

.ledrsa-product-card>.col-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ledrsa-product-card .image-cover img {
    object-fit: contain;
}

.ledrsa-product-card h3 {
    font-size: 23px;
}

.ledrsa-product-card p {
    font-size: 14px;
    line-height: 1.5;
}

.ledrsa-product-card .button {
    align-self: flex-start;
    margin-top: auto;
    margin-bottom: 0;
    min-height: 40px;
}

.ledrsa-process-row {
    row-gap: 22px;
    align-items: stretch;
}

.ledrsa-process>.col-inner {
    height: 100%;
}

.ledrsa-process .ledrsa-step {
    font-size: 76px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 24px;
    color: white;
}

.ledrsa-process h3 {
    font-size: 22px;
}

.ledrsa-process p {
    font-size: 14px;
    margin: 0;
    color: #ddd;
}

.ledrsa-closing h2 {
    font-size: clamp(30px,3.4vw,46px);
}

.ledrsa-closing p {
    font-size: 18px;
}

.ledrsa-preview-note {
    background: #fff7e8;
    padding: 12px 20px;
    border-bottom: 1px solid #ead9bd;
    text-align: center;
    color: #665133;
    font: 13px/1.5 Arial,sans-serif;
}

@media(max-width:849px) {
    .ledrsa-benefit {
        margin-bottom: 0;
    }
    .ledrsa-product-card h3 {
        font-size: 1.3125em;
    }
}

@media(max-width:549px) {
    .ledrsa-landing {
        font-size: 15px;
    }
    .ledrsa-landing .row {
        padding: 0 9px;
    }
    .ledrsa-hero p {
        font-size: 1em;
    }
    .ledrsa-landing .button {
        max-width: 100%;
    }
    .ledrsa-process .ledrsa-step {
        font-size: 4em;
        margin-bottom: 18px;
    }
    .ledrsa-environments .button {
        width: 100%;
        margin: 5px 0;
    }
    .ledrsa-closing p {
        font-size: 1em;
    }
}



/* 5. Reusable Contact Form 7 project enquiry layout. */
.ledrsa-enquiry-panel h2 {
    font-size: clamp(26px, 3.5vw, 44px);
    color: #000;
    margin-bottom: 36px;
}
.ledrsa-enquiry-panel .wpcf7 form { margin-bottom: 0; }
.ledrsa-enquiry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    text-align: left;
}
.ledrsa-enquiry-grid p,
.ledrsa-enquiry-grid label { margin: 0; }
.ledrsa-enquiry-grid label,
.ledrsa-enquiry-grid .wpcf7-form-control-wrap { display: block; }
.ledrsa-enquiry-field { min-width: 0; }
.ledrsa-enquiry-grid :is(input:not([type="submit"]), select, textarea) {
    width: 100%;
    margin: 0;
    border: 1px solid #d1d3d4;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: none;
    color: #111;
    font-size: 16px;
    font-weight: 400;
    padding: 8px 18px;
    height: 40px;
}
.ledrsa-enquiry-grid :is(input, textarea)::placeholder { color: #808285; opacity: 1; }
.ledrsa-enquiry-grid select { padding-right: 36px; }
.ledrsa-enquiry-grid select:has(option:first-child:checked) { color: #808285; }
.ledrsa-enquiry-grid textarea.wpcf7-textarea {
    height: 136px;
    min-height: 136px;
    border-width: 2px;
    border-radius: 18px;
    resize: vertical;
}
.ledrsa-enquiry-grid :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--ledrsa-accent);
    outline-offset: 2px;
}
.ledrsa-enquiry-message,
.ledrsa-enquiry-actions { grid-column: 1 / -1; }
.ledrsa-enquiry-actions { text-align: right; margin-top: 16px; }
.ledrsa-enquiry-submit { position: relative; display: inline-block; }
body .wpcf7 .ledrsa-enquiry-submit input[type="submit"] {
    margin: 0;
    padding: 8px 44px 8px 18px;
    font-size: 30px;
    font-weight: 800;
}
.ledrsa-enquiry-submit::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    width: 14px;
    height: 14px;
    border-top: 3px solid var(--ledrsa-accent);
    border-right: 3px solid var(--ledrsa-accent);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}
.ledrsa-enquiry-submit .wpcf7-spinner { position: absolute; right: 100%; top: 12px; }
.ledrsa-enquiry-grid .wpcf7-not-valid-tip { margin-top: 4px; font-size: 13px; }
@media (max-width: 549px) {
    .ledrsa-enquiry-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ledrsa-enquiry-panel h2 { margin-bottom: 24px; }
}


/* 6. Seamless brand pattern. Alpha mask preserves the supplied SVG artwork.
   Set color/opacity on the section; size uses auto to preserve the tile ratio.
   Add ledrsa-pattern-light to a light-background section for dark artwork. */
:root {
    --ledrsa-pattern: url("assets/images/ledrsa-pattern.svg");
    --ledrsa-pattern-size: 162px auto;
    --ledrsa-pattern-color: #fff;
    --ledrsa-pattern-opacity: .06;
}
.ledrsa-pattern-light {
    --ledrsa-pattern-color: #111;
    --ledrsa-pattern-opacity: .06;
}
#header .header-main { position: relative; }
#header .header-main > .header-inner { position: relative; z-index: 1; }
.ledrsa-ranges > .section-bg::after,
.ledrsa-pattern > .section-bg::after,
#header .header-main::before,
.ledrsa-landing-trail::before,
#footer > .section > .section-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: var(--ledrsa-pattern-color);
    opacity: var(--ledrsa-pattern-opacity);
    -webkit-mask-image: var(--ledrsa-pattern);
    mask-image: var(--ledrsa-pattern);
    mask-mode: alpha;
    -webkit-mask-size: var(--ledrsa-pattern-size);
    mask-size: var(--ledrsa-pattern-size);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-position: top left;
    mask-position: top left;
}

/* Native product grids used where a landing category has no child ranges. */
.ledrsa-native-products .product-small.box {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}
.ledrsa-native-products .image-cover img { object-fit: contain; }
.ledrsa-native-products .box-image { background: #fff; }
.ledrsa-native-products .product-title { font-size: 18px; line-height: 1.35; }
.ledrsa-native-products > .col > .col-inner,
.ledrsa-native-products > .col > .col-inner > .product-small.box { height: 100%; }

/* Human Code */

header#header #top-bar .header-button a.button {
    font-size: 10px;
}
/* Top-bar catalogue controls: compact sizing without changing page CTAs. */
header#header #top-bar .header-button {
    padding-top: 6px;
    padding-bottom: 6px;
}
header#header #top-bar .header-button a.button {
    min-height: 30px;
    line-height: 1.4;
    padding: 6px 14px;
    margin: 0;
}
header#header #top-bar .header-button + .header-button { margin-left: 12px; }
header#header #top-bar .header-button a.button i { margin-left: 10px; }

/* Keep supplemental product cards separated from both their heading and rows. */
.ledrsa-ranges .ledrsa-product-grid + .row { padding-top: 48px; }
.ledrsa-landing .row.ledrsa-native-products { row-gap: 28px; }
.ledrsa-landing .row.ledrsa-native-products > .col { padding-inline: 15px; }
@media (max-width: 549px) {
    .ledrsa-ranges .ledrsa-product-grid + .row { padding-top: 32px; }
    .ledrsa-landing .row.ledrsa-native-products { row-gap: 22px; }
}

/* Shop category thumbnails: consistent framing, complete undistorted products. */
.post-type-archive-product .product-category .box-image img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    background: #fff;
}
.post-type-archive-product .product-category .box-badge .box-text {
    position: relative;
    inset: auto;
    transform: none;
    margin: 0;
    padding: 16px 8px;
}


/* Category landing orientation, outside the editable campaign block. */
.ledrsa-landing-trail {
    position: relative;
    background: #000;
    border-bottom: 1px solid #242424;
    padding: 14px 0;
}
.ledrsa-landing-trail > .container { position: relative; z-index: 1; }
.ledrsa-landing-trail .ledrsa-breadcrumb {
    margin: 0;
    color: var(--ledrsa-accent);
    font-size: 14px;
    line-height: 1.6;
    text-transform: none;
    overflow-wrap: anywhere;
}
.ledrsa-landing-trail .ledrsa-breadcrumb a { color: #e5e5e5; }
.ledrsa-landing-trail .ledrsa-breadcrumb a:hover { color: var(--ledrsa-accent); }
.ledrsa-landing-trail .divider { margin-inline: 8px; color: #888; }

/* Homepage: native UX elements; shared typography and buttons above still apply. */
.ledrsa-home-hero .text-box { max-width: 760px; }
.ledrsa-home-hero p { font-size: 18px; line-height: 1.55; }
.ledrsa-home-categories > .section-content > .row:first-child { margin-bottom: 26px; }
.ledrsa-home-manufacturing .row { row-gap: 28px; }
.ledrsa-home-manufacturing .row-inner { row-gap: 0; }
.ledrsa-home-manufacturing .img img { border-radius: 8px; }
.ledrsa-home-manufacturing .col-inner > .text > p { color: #e5e5e5; }
@media (max-width: 549px) {
    .ledrsa-home-hero h1 { font-size: 34px; }
    .ledrsa-home-hero p { font-size: 16px; }
}

/* Editable catalogue mega menu and the enquiry-only catalogue journey. */
.ledrsa-mega-menu { color: #111; text-transform: none; }
.ledrsa-mega-menu h3 { font-size: 18px; }
.ledrsa-mega-menu .row { margin-bottom: 0; }
.ledrsa-mega-menu .col { padding-bottom: 0; }
.ledrsa-mega-menu .image-cover img { object-fit: contain; }
.ledrsa-mega-menu a.button { font-size: 14px !important; padding: 10px 12px; }
.ledrsa-catalogue-cta { margin: 20px 0; }
#catalogue-enquiry { scroll-margin-top: 120px; }
.ledrsa-whatsapp {
    position: fixed; right: 22px; bottom: max(22px, env(safe-area-inset-bottom));
    z-index: 1000; display: flex; align-items: center; gap: 9px;
    min-height: 48px; padding: 12px 18px; border-radius: 28px;
    background: #075e54; color: #fff !important; font-weight: 600;
    box-shadow: 0 3px 14px #0003;
}
.ledrsa-whatsapp i { font-size: 24px; }
.ledrsa-whatsapp:hover { background: #064a42; }
#top-link { bottom: 88px; }
@media(max-width:549px) {
    .ledrsa-whatsapp { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); padding: 12px; }
    .ledrsa-whatsapp span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
}
/* Five equal menu columns, with aligned labels and compact native buttons. */
.ledrsa-mega-menu .row:has(> .col > .col-inner > .img) > .col { flex-basis: 20%; max-width: 20%; }
.ledrsa-mega-menu .row:has(> .col > .col-inner > .img) h3 { min-height: 62px; margin: 16px 0 12px; }
#header .ledrsa-mega-menu a.button { display: inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; margin:0; }
#header .ledrsa-mega-menu a.button span { white-space: nowrap; }
#header .ledrsa-mega-menu a.button i { margin:0; }