/*
 * Stratera Theme - Compact Spacing Update
 * Version: 2.1
 * Description: Reduced vertical spacing between sections by 50% for more compact layout
 */

/* ============================================
   COMPACT SPACING - CSS VARIABLE OVERRIDES
   ============================================ */

:root {
    /* Reduced Section Padding from 100px to 50px */
    --section-padding: 50px;
    --section-padding-compact: 40px;
}

/* ============================================
   SECTION TITLES - Reduced margins
   ============================================ */

.section-title {
    margin-bottom: 30px;
    /* was 60px */
}

.section-title::after {
    margin: 10px auto 0;
    /* was 20px */
}

/* ============================================
   PAGE CONTENT - Reduced padding
   ============================================ */

.page-content,
.single-project,
.projects-archive,
.servis-archive {
    padding: 10px 0 40px 0;
    /* top reduced to 10px */
}

/* ============================================
   ENTRY TITLE - Reduced spacing
   ============================================ */

.entry-title,
.project-title,
.page-title {
    margin-bottom: 20px;
    /* was 40px */
}

.entry-title::after,
.project-title::after,
.page-title::after {
    margin: 10px auto 0;
    /* was 20px */
}

/* ============================================
   ENTRY CONTENT - Reduced bottom margin
   ============================================ */

.entry-content,
.project-content {
    margin: 0 auto 25px;
    /* was 0 auto 50px */
}

/* ============================================
   VALUES GRID - Reduced margins
   ============================================ */

.values-grid {
    margin-top: 20px;
    /* was 40px */
    margin-bottom: 25px;
    /* was 50px */
    gap: 20px;
    /* was 30px */
}

/* ============================================
   SECTION INTRO - Reduced margins
   ============================================ */

.section-intro {
    margin: -20px auto 25px;
    /* was -40px auto 50px */
}

/* ============================================
   INTRO TEXT - Reduced margin
   ============================================ */

.intro-text {
    margin-bottom: 1.25rem;
    /* was 2.5rem */
}

/* ============================================
   HERO TEXT - Reduced margin
   ============================================ */

.hero-text {
    margin-bottom: 30px;
    /* was 60px */
}

/* ============================================
   SERVICES & PROJECTS SECTIONS - Compact padding
   ============================================ */

.services,
.projects-section {
    padding: var(--section-padding) 0;
}

.about-section,
.career-section {
    padding: var(--section-padding) 0;
}

.intro-section {
    padding: var(--section-padding) 0;
}

/* ============================================
   PROJECTS GRID - Reduced top margin
   ============================================ */

.projects-grid {
    margin-top: 25px;
    /* was 50px */
}

/* ============================================
   SERVICE GRID - Reduced gaps
   ============================================ */

.service-grid {
    gap: 20px;
    /* was 30px */
}

/* ============================================
   HOME ABOUT - Reduced spacing
   ============================================ */

.home-about {
    margin: 0 auto 25px;
    /* was 0 auto 50px */
    padding: 30px;
    /* was 40px */
}

.home-about p {
    margin-bottom: 20px;
    /* was 30px */
}

/* ============================================
   GALLERY - Reduced margins
   ============================================ */

.project-gallery {
    margin-top: 35px;
    /* was 70px */
}

.gallery-title {
    margin-bottom: 25px;
    /* was 50px */
}

.project-footer {
    margin-top: 35px;
    /* was 70px */
}

/* ============================================
   CAREER GRID - Reduced margin
   ============================================ */

.career-grid {
    margin-top: 25px;
    /* was 50px */
    gap: 20px;
    /* was 30px */
}

/* ============================================
   SERVIS LIST - Reduced margin
   ============================================ */

.servis-list {
    margin-top: 25px;
    /* was 50px */
    gap: 25px;
    /* was 35px */
}

/* ============================================
   CONTACT SECTION - Reduced padding
   ============================================ */

.contact-section {
    padding: 40px 0;
    /* was 80px 0 */
}

.map-container {
    margin-top: 20px;
    /* was 40px */
}

/* ============================================
   SERVIS DESCRIPTION HEADINGS - Unified style
   ============================================ */

/* Override WordPress block heading styles with higher specificity */
/* These rules need to beat :where(.wp-block-heading) selectors */
.servis-archive .servis-content .servis-description h3.wp-block-heading,
.servis-archive .servis-content .servis-description h3,
.servis-archive .servis-description h3.wp-block-heading,
.servis-archive .servis-description h3,
.servis-item .servis-description h3.wp-block-heading,
.servis-item .servis-description h3,
.servis-item .servis-content h3.wp-block-heading,
.servis-item .servis-content h3,
article.servis h3.wp-block-heading,
.servis-description h3.wp-block-heading,
.servis-description .wp-block-heading,
.servis-description h3,
.servis-description h4,
.servis-content h3.wp-block-heading,
.servis-content .wp-block-heading,
.servis-content h3,
.servis-content h4 {
    color: #1a1a2e !important;
    /* Direct hex value for dark navy */
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    background: none !important;
}

/* First strong in paragraph - make it match the h3 style */
.servis-description p:first-child strong,
.servis-description>strong:first-of-type {
    color: #1a1a2e !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    display: block;
    margin-bottom: 8px;
}

/* ============================================
   SERVIS THUMBNAIL - No color overlay on hover
   ============================================ */

.servis-thumbnail::before,
.servis-thumbnail::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
}

.servis-item:hover .servis-thumbnail::before,
.servis-item:hover .servis-thumbnail::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}