/*
Theme Name: Siap Compro
Theme URI: https://siapngeweb.com/compro
Author: Siap Digital Indonesia
Author URI: https://siapngeweb.com
Description: Modern and dynamic company profile theme for WordPress designed to present your business in a professional, engaging, and visually appealing way. Built with a clean layout and smooth user experience, this theme helps you showcase your company, services, portfolio, and brand identity with confidence. Fully responsive and optimized for all devices, it ensures your website looks great on desktop, tablet, and mobile. Equipped with SEO-friendly structure, fast loading performance, and flexible customization options, this theme allows you to easily adjust colors, fonts, and content to match your brand. Perfect for companies, agencies, startups, and professionals who want a strong and modern online presence.
Version: 2.9.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: siapcompro
Requires at least: 5.5
Requires PHP: 7.4
*/

/* Skip Link (Accessibility) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 100000;
    padding: 12px 24px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Focus Visible (Accessibility) */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* Global Layout & Typography */
body {
    font-family: var(--body-font);
    margin: 0;
    padding: 0;
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

/* Video Embed (shared across services & portfolio) */
.video-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(var(--heading-color-rgb), 0.05);
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.site-main {
    padding: 80px 0 40px;
}

/* ============================================
   Single Hero — Shared Component
   Used by single blog, service, portfolio
   ============================================ */

.single-hero {
    position: relative;
    padding: 0;
    background-color: var(--bg-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(var(--heading-color-rgb), 0.05);
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
}

.single-hero--work {
    background-attachment: fixed;
}

.single-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -2px;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-color) 80%);
    z-index: 1;
}

.single-hero .hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
}

.single-hero__card {
    background: color-mix(in srgb, var(--bg-color) 70%, transparent);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid color-mix(in srgb, var(--heading-color) 10%, transparent);
    border-radius: 24px;
    padding: 32px 36px;
    margin-bottom: 48px;
}

.single-hero__title {
    font-size: var(--h1-size);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 1px;
    color: var(--heading-color);
    margin: 0;
}

.hero-divider {
    width: 100%;
    height: 1px;
    background: color-mix(in srgb, var(--heading-color) 15%, transparent);
    margin: 20px 0;
}

/* Badges */
.single-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.single-hero__badge {
    display: inline-block;
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    color: var(--primary-color);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: var(--xs-size);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.single-hero__badge:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--cta-text-color);
}

/* Meta row (blog) */
.single-hero__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.single-hero__meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--button-size);
    color: var(--text-color);
    opacity: 0.8;
}

.single-hero__meta-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--primary-color);
}

.single-hero__meta-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.single-hero__meta-item a {
    color: var(--heading-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.single-hero__meta-item a:hover {
    color: var(--primary-color);
}

.single-hero__meta-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-color);
    opacity: 0.3;
}

/* Actions row (service) */
.single-hero__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Quick info row (portfolio) */
.single-hero__quick-info {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

/* Breadcrumbs inside hero card — force horizontal (override single-breadcrumbs column) */
.single-hero__card .single-breadcrumbs {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-start;
    font-size: var(--small-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    gap: 0;
}

.single-hero__card .single-breadcrumbs .breadcrumb-path {
    display: contents;
}

.single-hero__card .single-breadcrumbs a {
    color: var(--heading-color);
    text-decoration: none;
    opacity: 0.7;
    transition: color 0.3s ease;
}

.single-hero__card .single-breadcrumbs a:hover {
    color: var(--primary-color);
    opacity: 1;
}

.single-hero__card .single-breadcrumbs .current {
    color: var(--heading-color);
    opacity: 1;
}

.single-hero__card .single-breadcrumbs .sep {
    color: var(--heading-color);
    opacity: 0.4;
    margin: 0 8px;
}

/* Quick info items (portfolio) */
.quick-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-label {
    font-size: var(--xs-size);
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.quick-value {
    font-size: var(--body-size);
    font-weight: 600;
    color: var(--heading-color);
}

/* Hero demo button — styled button (all singles) */
.single-hero .hero-demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    min-height: 54px;
    background: rgba(var(--heading-color-rgb), 0.06);
    border: 1px solid color-mix(in srgb, var(--heading-color) 15%, transparent);
    border-radius: 16px;
    font-size: var(--small-size);
    font-weight: 700;
    text-decoration: none;
    color: var(--primary-color);
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.single-hero .hero-demo-btn:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--cta-text-color);
}

.single-hero .hero-demo-btn svg {
    flex-shrink: 0;
}

/* Demo button outside actions row (portfolio/blog) needs top margin */
.single-hero__quick-info + .hero-demo-btn,
.single-hero__meta + .hero-demo-btn {
    margin-top: 20px;
}

/* Responsive */
@media (max-width: 991px) {
    .single-hero {
        min-height: 100svh;
    }

    .single-hero__card {
        padding: 24px 20px;
        margin-bottom: 32px;
        border-radius: 20px;
    }

    .single-hero__meta {
        gap: 10px;
    }

    .single-hero__quick-info {
        gap: 20px;
    }

    /* Demo button & service actions: full width on mobile */
    .single-hero .hero-demo-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .single-hero__actions {
        flex-direction: column;
    }

    .single-hero__actions .service-price-tag,
    .single-hero__actions .hero-demo-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .single-hero__card {
        padding: 20px 16px;
        margin-bottom: 24px;
        border-radius: 16px;
    }

    .single-hero__meta-sep {
        display: none;
    }

    .single-hero__quick-info {
        gap: 16px;
    }

    .quick-item {
        gap: 4px;
    }

    .single-hero .hero-demo-btn {
        padding: 14px 24px;
    }
}

@media (max-width: 480px) {
    .single-hero__quick-info {
        gap: 12px;
    }

    .quick-label {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .quick-value {
        font-size: var(--small-size);
    }
}

/* ============================================
   Single Media — Shared Gallery + Video
   Used by single service, portfolio
   ============================================ */

.single-media-section {
    padding: 48px 0;
    border-top: 1px solid rgba(var(--heading-color-rgb), 0.06);
}

.single-media__title {
    font-size: var(--h3-size);
    font-weight: 800;
    color: var(--heading-color);
    margin: 0 0 24px;
}

.single-media__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.single-media__item {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
}

.single-media__item a {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.single-media__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.single-media__item:hover img {
    transform: scale(1.05);
}

.single-media__caption {
    padding: 8px 12px;
    font-size: var(--xs-size);
    color: var(--text-color);
    opacity: 0.6;
}

.single-media__video {
    margin-top: 40px;
}

.single-media__gallery + .single-media__video {
    padding-top: 40px;
    border-top: 1px solid rgba(var(--heading-color-rgb), 0.06);
}

@media (max-width: 991px) {
    .single-media__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .single-media__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .single-media__item {
        border-radius: 8px;
    }

    .single-media-section {
        padding: 32px 0;
    }

    .single-media__video {
        margin-top: 24px;
    }
}

/* Remove gap on pages with full-bleed hero sections */
.home .site-main,
.single-post .site-main,
.single-work .site-main,
.single-services .site-main {
    padding-top: 0;
}

/* Studio preset: single pages have split layout, no site-main padding needed */
.preset-studio .site-main {
    padding-top: 0;
}

/* Prime preset: fullscreen hero sections, no site-main padding needed */
.preset-prime .site-main {
    padding-top: 0;
}

/* On mobile, admin bar is not fixed, but header is. Offset as needed. */
@media (max-width: 991px) {
    .section-padding {
        padding: 56px 0;
    }
    .site-main {
        padding: 70px 0 32px;
    }
}

@media (max-width: 768px) {
    .section-padding {
        padding: 40px 0;
    }
    .site-main {
        padding: 64px 0 24px;
    }
}

@media screen and (max-width: 600px) {
    .site-main {
        padding: 64px 0 24px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    color: var(--heading-color);
}

.entry-title {
    font-size: var(--h1-font-size, 42px);
    margin-bottom: 20px;
}

.entry-content {
    font-size: var(--body-font-size, 18px);
    color: var(--text-color);
}

.site-footer {
    text-align: center;
}

/* Helper Classes */
.section-padding {
    padding: 80px 0;
}

.section-title {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--heading-color);
}

.section-subtitle {
    font-size: var(--content-size);
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 20px;
}

.text-center {
    text-align: center;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-end {
    align-items: flex-end;
}

.btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 30px;
    background: var(--primary-color);
    color: var(--cta-text-color) !important;
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: var(--button-size);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px color-mix(in srgb, var(--primary-color) 30%, transparent);
    filter: brightness(1.1);
}

.btn-main.large {
    padding: 18px 45px;
    font-size: var(--secondary-size);
    font-weight: 800;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 15px 35px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: 100px;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.05);
}

.magnetic {
    display: inline-block;
}

.reveal-text {
    overflow: hidden;
}

.reveal-text span {
    display: block;
}