/* =============================================================
   SHEEN MARKETING — CORE STYLES
   Consolidated from:
     • consolidated_styles.css
     • page-specific-styles.css
     • topic-content.css
   :root variables are defined in brand-theme.css
   Load order in header.php:
     1. bootstrap.min.css
     2. bootstrap-icons.css
     3. templatemo-topic-listing.css
     4. brand-theme.css       ← :root vars
     5. sheen-core.css        ← THIS FILE (replaces 3 files above)
     6. site-styles.css
     7. rtl-styles.css (AR only)
   ============================================================= */

/* ── Base ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
    color: var(--sheen-gray);
    line-height: 1.75;
}

a {
    color: var(--sheen-red);
    text-decoration: none;
    transition: color var(--transition-normal, 300ms ease);
}
a:hover { color: var(--sheen-red-dark); }

/* ── Section Helpers ─────────────────────────────────────── */
.section-padding    { padding: var(--section-py, 80px) 0; }
.section-padding-sm { padding: var(--section-py-sm, 48px) 0; }
.section-bg         { background-color: var(--sheen-off-white) !important; }

/* ── Dark Sections ───────────────────────────────────────── */
.dark-section {
    background-color: var(--sheen-black);
    color: var(--sheen-white);
}
.dark-section h3,
.dark-section h4 { color: var(--sheen-white); }

/* ── Inner Page Hero ─────────────────────────────────────── */
.site-header {
    background: var(--sheen-black);
    position: relative;
    overflow: hidden;
    padding: 7rem 0 5rem;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    color: #fff;
}
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(220,62,8,0.18) 0%, transparent 65%);
    pointer-events: none;
}
.site-header h1,
.site-header h2 {
    color: var(--sheen-white);
    position: relative;
    z-index: 2;
}
.site-header .breadcrumb-item a     { color: var(--sheen-red); }
.site-header .breadcrumb-item.active { color: rgba(255,255,255,0.6); }
.site-header .breadcrumb            { position: relative; z-index: 2; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--sheen-red);
    border-color: var(--sheen-red);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--sheen-red-dark);
    border-color: var(--sheen-red-dark);
    color: #fff;
}
.btn-outline-primary {
    border-color: var(--sheen-red);
    color: var(--sheen-red);
}
.btn-outline-primary:hover {
    background-color: var(--sheen-red);
    border-color: var(--sheen-red);
    color: #fff;
}

/* ── Forms ───────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--sheen-red);
    box-shadow: 0 0 0 0.2rem rgba(220, 62, 8, 0.18);
}
.subscribe-form button[type="submit"],
.custom-form button[type="submit"] {
    background-color: var(--sheen-red);
    border-color: var(--sheen-red);
    color: #fff;
    transition: all 0.3s ease;
}
.subscribe-form button[type="submit"]:hover,
.custom-form button[type="submit"]:hover {
    background-color: var(--sheen-red-dark);
    border-color: var(--sheen-red-dark);
    transform: translateY(-2px);
}

/* ── Cards — generic ─────────────────────────────────────── */
.custom-block {
    background: #fff;
    border-radius: var(--card-radius, 12px);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.custom-block:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.custom-block-image {
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
}

/* ── Portfolio Cards ─────────────────────────────────────── */
.portfolio-card {
    border: none;
    border-radius: var(--card-radius, 12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}
.portfolio-card .badge {
    background-color: var(--sheen-red) !important;
    color: #fff;
}
.portfolio-card:hover .badge {
    background-color: var(--sheen-black) !important;
    color: #fff;
}
.portfolio-details h3 { color: var(--sheen-black); }
.portfolio-gallery img {
    border-radius: 10px;
    transition: transform 0.3s ease;
}
.portfolio-gallery img:hover { transform: scale(1.02); }

/* ── Testimonials ────────────────────────────────────────── */
.testimonial-card {
    border: none;
    border-radius: var(--card-radius, 12px);
    transition: transform 0.3s ease;
}
.testimonial-card:hover { transform: translateY(-5px); }
.testimonial-avatar     { border: 3px solid var(--sheen-red); }
.testimonial-rating .bi-star-fill { color: #f5a623; }
.testimonial-rating .bi-star      { color: #ddd; }
.testimonial-meta                 { color: var(--sheen-red); }
.testimonial-text {
    position: relative;
    padding: 24px;
    background-color: var(--sheen-off-white);
    border-radius: 10px;
    margin: 16px 0;
}
.testimonial-text::before {
    content: '"';
    position: absolute;
    top: -8px; left: 14px;
    font-size: 4em;
    color: var(--sheen-red);
    opacity: 0.3;
    line-height: 1;
}
html[dir="rtl"] .testimonial-text::before { left: auto; right: 14px; }

/* ── Topic / Blog Cards ──────────────────────────────────── */
.topic-card {
    border: none;
    border-radius: var(--card-radius, 12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.topic-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.topic-card .badge { background-color: var(--sheen-red); color: #fff; }
.topic-meta i       { color: var(--sheen-red); }

/* ── Topic Content (article body) ────────────────────────── */
.topic-content {
    line-height: 1.8;
    color: #333;
}
.topic-content h1,
.topic-content h2,
.topic-content h3,
.topic-content h4,
.topic-content h5,
.topic-content h6 {
    color: var(--sheen-black);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.topic-content p          { margin-bottom: 1.2rem; }
.topic-content ul,
.topic-content ol         { margin-bottom: 1.2rem; padding-left: 2rem; }
.topic-content li         { margin-bottom: 0.5rem; }
.topic-content blockquote {
    border-left: 4px solid var(--sheen-red);
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: var(--sheen-gray);
    font-style: italic;
}
html[dir="rtl"] .topic-content blockquote {
    border-left: none;
    border-right: 4px solid var(--sheen-red);
    padding-left: 0;
    padding-right: 1rem;
}
.topic-content code {
    background-color: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}
.topic-content pre {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
}
.topic-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}
.topic-content figure     { margin: 1.5rem 0; text-align: center; }
.topic-content figcaption { font-size: 0.875rem; color: #6c757d; margin-top: 0.5rem; }
.topic-content table      { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.topic-content th,
.topic-content td         { padding: 0.75rem; border: 1px solid #dee2e6; }
.topic-content th         { background-color: #f8f9fa; font-weight: 600; }
.topic-content mark       { background-color: #fff3cd; padding: 0.2rem 0.4rem; border-radius: 0.25rem; }

/* ── Achievement Cards ───────────────────────────────────── */
.achievement-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: var(--card-radius, 12px);
}
.achievement-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.achievement-date { font-size: 0.875rem; color: var(--sheen-red); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .site-header {
        padding: 5rem 0 4rem;
        clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
    }
    .custom-block { margin-bottom: 1.5rem; }
}