/* ==========================================================================
   MIESZKANIA.online - Shared Component Styles
   ========================================================================== */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    --color-primary-dark: #1a1f1c;
    --shadow-offset: 4px 4px 0 var(--color-primary-dark);
    --shadow-offset-lg: 6px 6px 0 var(--color-primary-dark);
    --shadow-offset-xl: 8px 8px 0 rgba(26, 31, 28, 0.4);
    --shadow-offset-light: 6px 6px 0 rgba(26, 31, 28, 0.3);
}

/* ==========================================================================
   Box Shadows - Geometric Offset Style
   ========================================================================== */
.box-shadow-offset {
    box-shadow: var(--shadow-offset);
}

.box-shadow-offset-lg {
    box-shadow: var(--shadow-offset-lg);
}

.box-shadow-offset-xl {
    box-shadow: var(--shadow-offset-xl);
}

.box-shadow-offset-light {
    box-shadow: var(--shadow-offset-light);
}

/* ==========================================================================
   Frosted Glass Effect
   ========================================================================== */
.frosted-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.frosted-glass-strong {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.frosted-glass-icon {
    background: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Typography
   ========================================================================== */
.text-spaced {
    letter-spacing: 0.05em;
}

.lh-relaxed {
    line-height: 1.7;
}

.page-title {
    font-size: clamp(2rem, 5vw, 3rem);
}

/* ==========================================================================
   Section Styles
   ========================================================================== */
.section-description {
    max-width: 700px;
    font-size: 1.125rem;
}

.section-description-wide {
    max-width: 800px;
    font-size: 1.125rem;
}

.min-vh-page {
    min-height: calc(100vh - 64px);
}

/* ==========================================================================
   Content Containers
   ========================================================================== */
.content-wrapper-narrow {
    max-width: 900px;
}

.content-wrapper-text {
    max-width: 280px;
}

/* ==========================================================================
   Content Boxes - For alternating styled sections
   ========================================================================== */
.content-box {
    background-color: #fff;
    box-shadow: var(--shadow-offset);
}

.content-box-alt {
    background-color: var(--bs-light);
}

.content-box-highlight {
    background-color: var(--bs-light);
    box-shadow: var(--shadow-offset-light);
}

/* ==========================================================================
   Icon Boxes
   ========================================================================== */
.icon-box {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-box-sm {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-box-lg {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   Card Styles
   ========================================================================== */
.card-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-offset);
}

.card-glass-strong {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-offset);
}

/* ==========================================================================
   Transitions
   ========================================================================== */
.transition-color {
    transition: color 0.2s ease;
}

.transition-all {
    transition: all 0.2s ease;
}

/* ==========================================================================
   Utility - Logo Invert (for dark backgrounds)
   ========================================================================== */
.logo-invert {
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   Back Link
   ========================================================================== */
.back-link {
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline !important;
}

/* ==========================================================================
   Checkmark Icon (for lists)
   ========================================================================== */
.check-icon {
    margin-top: 2px;
}

/* ==========================================================================
   Category Buttons (Reports page)
   ========================================================================== */
.category-btn:hover,
.category-btn.active {
    background-color: var(--color-primary-dark) !important;
    color: #fff !important;
}

/* ==========================================================================
   Textarea no resize
   ========================================================================== */
textarea.form-control {
    resize: none;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-image {
    object-fit: cover;
    object-position: center 25%;
}

.hero-overlay {
    background-color: rgba(26, 31, 28, 0.3);
}

.hero-search-bg {
    background-color: rgba(255, 255, 255, 0.7);
}

.hero-input-bg {
    background-color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Breadcrumb Custom Styles
   ========================================================================== */
.breadcrumb {
    --bs-breadcrumb-divider: none;
    margin-bottom: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    display: none;
}

.breadcrumb-item-separator {
    display: flex;
    align-items: center;
    padding: 0 0.35rem;
}

.breadcrumb-item a {
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: #fff !important;
}