/* =================================================================
   JP ROBOTIC — MASTER TYPOGRAPHY & BRANDING SPEC
   Final Streamlined Version
   Fonts: Barlow Condensed (400, 700, 900), Inter/Helvetica
   ================================================================= */

:root {
    --jpr-blue: #00a2ed;
    --jpr-blue-hover: #00b4ff;
    --jpr-blue-dark: #0056b3;
    --jpr-black: #0b0d0f;
    --jpr-gray-text: #9aa3af;
    --jpr-white: #ffffff;
    --jpr-body-text: #1a1a1a;
}

/* 1. GLOBAL BASE */
body {
    font-family: 'Inter', 'Helvetica', Arial, sans-serif;
    color: var(--jpr-body-text);
    line-height: 1.6;
}

/* 2. HEADLINES (The "Industrial Stack") */
h1, .jpr-headline-hero {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(3.5rem, 8vw, 5.5rem) !important;
    line-height: 0.9 !important; /* Tight block stacking */
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.5em;
}

h2, .jpr-headline-sub {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    color: var(--jpr-black);
}

.blue-highlight {
    color: var(--jpr-blue) !important;
}

/* 3. TECHNICAL LABELS & METADATA */
.jpr-label, .field-label, .text-muted-caps {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.15em !important; /* Wide schematic spacing */
    text-transform: uppercase !important;
    color: var(--jpr-gray-text) !important;
    display: block;
    margin-bottom: 8px;
}

/* 4. NAVIGATION & "LET'S TALK" BUTTON */
.navbar-nav .nav-link, 
.dropdown-menu .dropdown-item {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: var(--jpr-gray-text) !important;
}

/* Special High-Contrast "Let's Talk" Button */
.nav-link.nav-link--contact-us {
    background-color: var(--jpr-blue) !important;
    color: var(--jpr-white) !important; /* Forced White for pop */
    padding: 8px 20px !important;
    margin: 0 12px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center;
    clip-path: polygon(0 0, 88% 0, 100% 25%, 100% 100%, 12% 100%, 0 75%);
    transition: all 0.2s ease-in-out !important;
}

.nav-link.nav-link--contact-us:hover {
    background-color: var(--jpr-blue-hover) !important;
    transform: translateY(-1px);
    opacity: 1 !important;
}

/* 5. CONTACT SECTION & SIDEBAR (From Screenshot) */
.contact-info-block {
    border-left: 1px solid #e0e0e0;
    padding-left: 40px;
}

.contact-value {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    margin-bottom: 30px;
}

/* sidebar "01" numbers */
.expect-number {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: clamp(2rem, 5vw, 2.8rem) !important;
    font-weight: 900 !important;
    color: var(--jpr-blue) !important;
    line-height: 1;
}

/* 6. DARK FORM INPUTS (Footer/Contact Area) */
.dark-section-form input, 
.dark-section-form textarea {
    background-color: var(--jpr-black) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--jpr-white) !important;
    border-radius: 0 !important;
    padding: 12px 15px !important;
    font-family: 'Barlow Condensed', sans-serif !important;
}

.dark-section-form label {
    color: var(--jpr-blue) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* 7. RESPONSIVE ADJUSTMENTS */
@media (max-width: 991px) {
    .contact-info-block { border-left: none; padding-left: 0; }
    .nav-link.nav-link--contact-us { margin: 15px 0 !important; width: fit-content; }
}


/***************************************************************/

/* =========================================
   HOMEPAGE IMAGE GRIDS FIX
   Bypasses Drupal's HTML stripping
========================================= */

/* 1. Fix the "Selected Work" Images */
.jpr-img-wrap {
    position: relative;
    overflow: hidden;
}

.jpr-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Adds the dark gradient so text is readable */
.jpr-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes text to bottom */
    padding: 32px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, transparent 100%) !important;
    z-index: 2;
}

.jpr-img-type {
    color: var(--blue) !important;
    font-family: var(--fm) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 8px !important;
    font-weight: bold !important;
}

.jpr-img-title {
    color: #ffffff !important;
    font-family: var(--fd) !important;
    font-size: 24px !important;
    font-weight: bold !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
}

.jpr-img-sub {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 14px !important;
}


/* 2. Fix the "Who We Work With" Grid */
.jpr-ind {
    position: relative;
    overflow: hidden;
    min-height: 320px !important;
}

.jpr-ind img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Adds the dark gradient so text is readable */
.jpr-ind-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes text to bottom */
    padding: 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.3) 60%, transparent 100%) !important;
    z-index: 2;
}

.jpr-ind-num {
    color: var(--blue) !important;
    font-family: var(--fm) !important;
    font-size: 12px !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 8px !important;
    font-weight: bold !important;
}

.jpr-ind-title {
    color: #ffffff !important;
    font-family: var(--fd) !important;
    font-size: 18px !important;
    font-weight: bold !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.jpr-ind-focus {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* =========================================
   GHOST BUTTON STYLING (.btn-jpr-ghost)
========================================= */
.btn-jpr-ghost {
    background-color: transparent !important;
    color: var(--heading) !important; /* Adapts to your light/dark theme */
    border: 1px solid var(--border) !important;
    font-family: var(--fd) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 14px 24px !important; /* Matches the height of your blue button */
    text-decoration: none !important; /* Kills the ugly blue underline */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.btn-jpr-ghost:hover {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}


/* =========================================
   GLOBAL SPACING & RHYTHM FIXES
   Breathes life into all pages site-wide
========================================= */

/* 1. Generous Section Padding */
/* Scales dynamically: 64px on mobile, up to 120px on huge monitors */
.jpr-section {
    padding-top: clamp(64px, 8vw, 120px) !important;
    padding-bottom: clamp(64px, 8vw, 120px) !important;
}

/* 2. Global Typography Spacing */
/* Gives headings, eyebrows, and paragraphs uniform room to breathe */
.jpr-section h2, 
.jpr-hero h1 {
    margin-bottom: 32px !important;
}

.jpr-section .eyebrow {
    margin-bottom: 20px !important;
}

.jpr-section p {
    margin-bottom: 24px !important;
}

/* 3. Button Group Spacing */
/* Automatically pushes buttons down away from the text above them */
.jpr-section .d-flex:has(.btn-jpr),
.jpr-hero .d-flex:has(.btn-jpr) {
    margin-top: 24px !important;
}