/*
Theme Name:  SS STL Equipment
Theme URI:   https://ss-stlequipment.com
Author:      S&S STL Equipment
Author URI:  https://ss-stlequipment.com
Description: Custom Bootstrap 5 WordPress theme for S&S STL Equipment.
             Starts as a full-page splash and is structured for future expansion.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ss-stlequipment
*/

/* ============================================================
   CSS Custom Properties
   Colors drawn from the company logo:
     - Blue:   boom lift (#1e6fab)
     - Orange: scissor lift (#e07b1a)
     - Light background for a clean, professional appearance
   ============================================================ */
:root {
    --color-bg:           #f0f2f5;        /* Light grey page background */
    --color-bg-card:      #ffffff;        /* White card surface */
    --color-primary:      #1e6fab;        /* Logo blue (boom lift) */
    --color-accent:       #e07b1a;        /* Logo orange (scissor lift) */
    --color-telehandler:  #1a7d7d;        /* Teal accent for telehandlers */
    --color-forklift:     #2a7d4f;        /* Green accent for forklifts */
    --color-text:         #1a1a2e;        /* Near-black for body text */
    --color-text-muted:   #555566;        /* Muted grey for secondary text */
    --color-border:       rgba(0, 0, 0, 0.08);
    --color-nav-bg:       #0f2744;        /* Dark navy for navbar */
}

/* ============================================================
   Base Reset & Body
   ============================================================ */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   Full-Page Splash Wrapper
   Centers the card both vertically and horizontally.
   ============================================================ */
.splash-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* ============================================================
   Splash Card
   The main content container. The orange top border ties back
   to the logo accent color.
   ============================================================ */
.splash-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-accent);
    border-radius: 8px;
    padding: 3rem 2.5rem;
    max-width: 460px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   Logo
   ============================================================ */
.splash-logo {
    max-width: 220px;
    height: auto;
    margin-bottom: 1.75rem;
}

/* ============================================================
   Divider
   ============================================================ */
.splash-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.5rem 0;
}

/* ============================================================
   Contact Info
   ============================================================ */
.splash-info {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.9;
}

.splash-info address {
    font-style: normal;
    margin-bottom: 0.5rem;
}

.splash-info a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.splash-info a:hover,
.splash-info a:focus {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ============================================================
   Home Page (front-page.php)
   ============================================================ */

/* ============================================================
   Split Hero — 50/50 gateway
   Full-viewport two-panel chooser. Each panel is a clickable
   link that scrolls to its equipment section.
   ============================================================ */
.ss-split-hero {
    display: flex;
    min-height: 80vh;
    position: relative;
}

.ss-split-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    padding: 4rem 2rem;
    position: relative;
    overflow: hidden;
    transition: flex 0.4s ease;
}

.ss-split-panel:hover {
    flex: 1.08;
    text-decoration: none;
    color: #fff;
}

.ss-split-left,
.ss-split-right {
    background-color: #0f2744;  /* fallback if image fails */
}

/* Background images rendered via ::before so grayscale filter applies only to image */
.ss-split-left::before,
.ss-split-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--ss-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.ss-split-left::before {
    filter: grayscale(100%);
}

/* Dark overlay for text readability */
.ss-split-left::after,
.ss-split-right::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
    pointer-events: none;
}

.ss-split-left:hover::after  { background: rgba(0, 0, 0, 0.2); }
.ss-split-right:hover::after { background: rgba(0, 0, 0, 0.2); }

/* Vertical divider */
.ss-split-left {
    border-right: 1px solid rgba(255,255,255,0.15);
}

.ss-split-content {
    text-align: center;
    max-width: 400px;
    position: relative;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 80px 80px rgba(0, 0, 0, 0.4);
    border-radius: 50px;
}

.ss-split-logo {
    height: 80px;
    width: auto;
    max-width: 280px;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.ss-split-logo-atlas {
    display: block;
    margin: 0 auto 1.5rem;
    background: #fff;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    height: auto;
    max-height: 80px;
    filter: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.ss-split-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.ss-split-desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin-bottom: 1.75rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Centered phone CTA floating between panels */
.ss-split-phone {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    background: rgba(15, 39, 68, 0.95);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    backdrop-filter: blur(8px);
}

.ss-split-phone-link {
    color: var(--color-accent);
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}

.ss-split-phone-link:hover {
    color: #fff;
    text-decoration: none;
}

.ss-split-phone-sub {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.5);
    display: block;
    margin-top: 0.15rem;
}

/* Mobile: stack vertically */
@media (max-width: 767px) {
    .ss-split-hero {
        flex-direction: column;
        min-height: auto;
    }
    .ss-split-panel {
        padding: 3.5rem 1.5rem;
        min-height: 45vh;
    }
    .ss-split-panel:hover { flex: 1; }
    .ss-split-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
    .ss-split-phone {
        top: auto;
        bottom: auto;
        position: relative;
        transform: none;
        left: auto;
        margin: -1.5rem auto;
        z-index: 10;
    }
    .ss-split-hero {
        /* Reorder so phone pill sits between panels */
        flex-wrap: wrap;
    }
}

/* ============================================================
   Shared Button System
   Canonical definitions live here so theme templates work
   even when the plugin is not active. The plugin's
   frontend.css carries copies for standalone portability.
   ============================================================ */
.ss-btn {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    line-height: 1.4;
}

.ss-btn-lg {
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
}

/* Primary CTA — orange, high contrast */
.ss-btn-cta {
    background-color: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.ss-btn-cta:hover,
.ss-btn-cta:focus {
    background-color: #c9691a;
    border-color: #c9691a;
    color: #fff;
    text-decoration: none;
}

/* Solid blue primary */
.ss-btn-primary {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.ss-btn-primary:hover,
.ss-btn-primary:focus {
    background-color: #185f97;
    border-color: #185f97;
    color: #fff;
    text-decoration: none;
}

/* Outline blue */
.ss-btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.ss-btn-outline:hover,
.ss-btn-outline:focus {
    background-color: var(--color-primary);
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   Site Navbar
   Dark-navy bar that sits above every page. Inherits the
   --color-nav-bg custom property so color changes stay central.
   ============================================================ */
.ss-navbar {
    background-color: var(--color-nav-bg);
    padding: 0.5rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ss-navbar-brand-text {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff !important;
    text-decoration: none;
}

.ss-navbar .nav-link {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    transition: color 0.2s ease;
}

.ss-navbar .nav-link:hover,
.ss-navbar .nav-link:focus,
.ss-navbar .nav-link.active {
    color: #fff;
}

.ss-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}

/* Use a white hamburger icon (Bootstrap 5 dark-navbar variant) */
.ss-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c255%2c255%2c0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Phone CTA in the navbar — stands out in orange */
.ss-navbar-phone {
    color: var(--color-accent) !important;
    font-weight: 700;
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
}

.ss-navbar-phone:hover,
.ss-navbar-phone:focus {
    color: #fff !important;
    text-decoration: none;
}

/* Home sections */
.ss-home-section {
    padding: 4rem 0;
}

.ss-section-heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    text-align: center;
}

.ss-section-sub {
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
    font-size: 1rem;
}

/* Equipment type cards */
.ss-equipment-types-section {
    background: var(--color-bg);
}

.ss-type-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: 1.75rem 1.5rem;
    height: 100%;
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ss-type-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-3px);
    text-decoration: none;
    color: var(--color-text);
}

.ss-type-scissor-lift.ss-type-card  { border-top-color: var(--color-accent); }
.ss-type-telehandler.ss-type-card   { border-top-color: var(--color-telehandler); }
.ss-type-forklift.ss-type-card      { border-top-color: var(--color-forklift); }

.ss-type-card-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: var(--color-primary);
}

.ss-type-scissor-lift .ss-type-card-icon  { color: var(--color-accent); }
.ss-type-telehandler .ss-type-card-icon   { color: var(--color-telehandler); }
.ss-type-forklift .ss-type-card-icon      { color: var(--color-forklift); }

.ss-type-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.ss-type-card-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 1rem;
}

.ss-type-card-cta {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: auto;
}

.ss-type-scissor-lift .ss-type-card-cta  { color: var(--color-accent); }
.ss-type-telehandler .ss-type-card-cta   { color: var(--color-telehandler); }
.ss-type-forklift .ss-type-card-cta      { color: var(--color-forklift); }

.ss-types-footer {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

/* ============================================================
   Atlas Auto Equipment
   Distinct visual identity for the Atlas distributor division.
   Uses Atlas brand blue (#0078bf).
   ============================================================ */
:root {
    --color-atlas:        #0078bf;        /* Atlas brand blue */
    --color-atlas-dark:   #00507f;        /* Atlas hover state */
}

/* Atlas section — dark background for contrast */
.ss-atlas-types-section {
    background: #0f2744;
    color: #fff;
}

.ss-atlas-types-section .ss-type-card {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.1);
    color: #fff;
}

.ss-atlas-types-section .ss-type-card:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.ss-atlas-types-section .ss-type-card-desc {
    color: rgba(255,255,255,0.65);
}

.ss-atlas-types-section .ss-types-footer {
    border-top-color: rgba(255,255,255,0.1);
}

/* Atlas section header — logo + text side by side */
.ss-atlas-section-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.ss-atlas-section-logo {
    height: 56px;
    width: auto;
    background: #fff;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    flex-shrink: 0;
}

.ss-section-heading-left,
.ss-section-sub-left {
    text-align: left;
    margin-bottom: 0;
}

.ss-section-heading-left {
    color: #fff;
}

.ss-section-sub-left {
    color: rgba(255,255,255,0.6);
    margin-top: 0.25rem;
}

@media (max-width: 575px) {
    .ss-atlas-section-header {
        flex-direction: column;
        text-align: center;
    }
    .ss-section-heading-left,
    .ss-section-sub-left {
        text-align: center;
    }
}

/* Atlas card accents */
.ss-type-atlas.ss-type-card {
    border-top-color: var(--color-atlas);
}

.ss-type-atlas .ss-type-card-icon {
    color: var(--color-atlas);
}

.ss-type-atlas .ss-type-card-cta {
    color: var(--color-atlas);
}

/* Atlas CTA button */
.ss-btn-atlas {
    background-color: var(--color-atlas);
    color: #fff;
    border-color: var(--color-atlas);
}

.ss-btn-atlas:hover,
.ss-btn-atlas:focus {
    background-color: var(--color-atlas-dark);
    border-color: var(--color-atlas-dark);
    color: #fff;
    text-decoration: none;
}

/* Value props */
.ss-why-section {
    background: #fff;
}

.ss-value-card {
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: 8px;
    background: var(--color-bg);
    height: 100%;
}

.ss-value-icon {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.ss-value-icon-blue   { background: rgba(30,111,171,0.12); color: var(--color-primary); }
.ss-value-icon-orange { background: rgba(224,123,26,0.12); color: var(--color-accent); }

.ss-value-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.ss-value-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* Contact CTA banner */
.ss-home-contact-banner {
    background: linear-gradient(135deg, #0f2744 0%, #1e3a5f 100%);
    padding: 3.5rem 0;
    color: #fff;
}

.ss-contact-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.ss-contact-heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.4rem;
}

.ss-contact-sub {
    color: rgba(255,255,255,0.75);
    margin: 0;
}

.ss-contact-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
}

.ss-contact-address {
    font-style: normal;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    text-align: right;
    margin: 0;
}

@media (max-width: 767px) {
    .ss-home-hero { padding: 3rem 0; }
    .ss-hero-actions { flex-direction: column; }
    .ss-hero-actions .ss-btn { text-align: center; }
    .ss-contact-banner-inner { flex-direction: column; text-align: center; }
    .ss-contact-actions { align-items: center; }
    .ss-contact-address { text-align: center; }
}

/* ============================================================
   Page Template (page.php)
   Used for standard WP Pages — Equipment Catalog, etc.
   ============================================================ */
.ss-page-main {
    min-height: 100vh;
    background-color: var(--color-bg);
}

.ss-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--color-primary);
}

.ss-page-content {
    /* Content fills full width — shortcode handles its own layout */
}

/* Media & Text blocks — blend white product image backgrounds */
.wp-block-media-text__media img {
    mix-blend-mode: multiply;
}

.wp-block-media-text {
    margin-bottom: 0 !important;
    gap: 0;
}

.wp-block-media-text__media {
    padding: 0;
}

.wp-block-media-text__media img {
    max-height: 180px;
    width: auto;
    object-fit: contain;
}

.wp-block-media-text__content {
    padding: 0.5rem 1rem !important;
}

/* ============================================================
   Footer Note
   Small "coming soon" label at the bottom of the card.
   ============================================================ */
.splash-footer-note {
    margin-top: 2rem;
    margin-bottom: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0.55;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}