/*
Theme Name: Qibla Voyage
Theme URI: https://QiblaVoyage.com
Author: 7 Pro Sky Inc.
Author URI: https://7proskyinc.com
Description: Faith-centered pilgrimage and Islamic heritage journeys — architectural, cultural, editorial design for QiblaVoyage.com.
Version: 1.5.1
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: qibla
*/

/* Qibla Voyage — Architectural heritage with deep visual hierarchy */
:root {
    --qb-primary: #1a2744;
    --qb-primary-light: #2a3d66;
    --qb-accent: #b8963e;
    --qb-accent-light: #d4c190;
    --qb-surface: #ffffff;
    --qb-bg: #f7f5f0;
    --qb-dark-bg: #1a1a1a;
    --qb-text: #1a1a1a;
    --qb-text-secondary: #5a5a5a;
    --qb-border: #ddd6cc;
    --qb-font-display: 'Playfair Display', 'Georgia', serif;
    --qb-font-body: 'Lora', 'Georgia', serif;
    --qb-font-ui: 'DM Sans', -apple-system, sans-serif;
    --qb-max-width: 1240px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
body {
    font-family: var(--qb-font-body);
    color: var(--qb-text);
    background: var(--qb-bg);
    line-height: 1.75;
    font-size: 17px;
}
.skip-link { position: absolute; top: -40px; left: 0; padding: 8px 16px; background: var(--qb-primary); color: #fff; z-index: 1000; }
.skip-link:focus { top: 0; }

/* HEADER — architectural, centered logo, horizontal nav below */
.qb-header { background: var(--qb-surface); }
.qb-header-brand {
    text-align: center;
    padding: 1.5rem 2rem 0;
}
.qb-logo {
    font-family: var(--qb-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--qb-primary);
    text-decoration: none;
    display: inline-block;
}
.qb-logo-sub {
    display: block;
    font-family: var(--qb-font-ui);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--qb-accent);
    font-weight: 500;
    margin-top: 2px;
}
.qb-nav-bar {
    max-width: var(--qb-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: .25rem;
    padding: .75rem 2rem;
    border-top: 1px solid var(--qb-border);
    border-bottom: 1px solid var(--qb-border);
}
.qb-nav-bar a {
    padding: .5rem 1rem;
    font-family: var(--qb-font-ui);
    font-size: .875rem;
    font-weight: 500;
    color: var(--qb-text-secondary);
    text-decoration: none;
    transition: color .2s;
}
.qb-nav-bar a:hover { color: var(--qb-primary); }
.qb-nav-cta {
    color: var(--qb-surface) !important;
    background: var(--qb-primary);
    border-radius: 4px;
    padding: .5rem 1.25rem !important;
}
.qb-nav-cta:hover { background: var(--qb-primary-light) !important; }

.qb-menu-toggle { display: none; position: absolute; right: 1.5rem; top: 1.75rem; background: none; border: none; cursor: pointer; }
.qb-menu-toggle svg { width: 24px; height: 24px; stroke: var(--qb-text); }
@media (max-width: 960px) {
    .qb-menu-toggle { display: block; }
    .qb-nav-bar { display: none; flex-direction: column; align-items: center; }
    .qb-nav-bar.is-open { display: flex; }
    .qb-header-brand { position: relative; }
}

/* HERO — full-width architectural image, overlay text */
.qb-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: flex-end;
    background: var(--qb-dark-bg);
    overflow: hidden;
}
.qb-hero-bg {
    position: absolute;
    inset: 0;
    background: #2d4738;
    opacity: .85;
}
.qb-hero-content {
    position: relative;
    z-index: 1;
    max-width: var(--qb-max-width);
    margin: 0 auto;
    padding: 6rem 2rem 4rem;
    width: 100%;
}
.qb-hero-content h1 {
    font-family: var(--qb-font-display);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 1rem;
    max-width: 650px;
}
.qb-hero-content p {
    font-size: 1.125rem;
    color: rgba(255,255,255,.8);
    max-width: 500px;
    margin-bottom: 2rem;
}
.qb-hero-cta {
    display: inline-block;
    padding: .875rem 2rem;
    background: var(--qb-accent);
    color: #fff;
    text-decoration: none;
    font-family: var(--qb-font-ui);
    font-weight: 600;
    font-size: .9375rem;
    border-radius: 4px;
    transition: background .2s;
}
.qb-hero-cta:hover { background: #8a7249; }

/* GEOMETRIC DIVIDER — subtle Islamic pattern influence */
.qb-divider {
    height: 3px;
    max-width: 120px;
    margin: 0 auto;
    background: repeating-linear-gradient(90deg, var(--qb-accent) 0px, var(--qb-accent) 8px, transparent 8px, transparent 12px);
}

/* SECTIONS */
.qb-section {
    max-width: var(--qb-max-width);
    margin: 0 auto;
    padding: 5rem 2rem;
}
.qb-section-header {
    text-align: center;
    margin-bottom: 3rem;
}
.qb-section-label {
    font-family: var(--qb-font-ui);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--qb-accent);
    font-weight: 600;
    margin-bottom: .75rem;
}
.qb-section-title {
    font-family: var(--qb-font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--qb-text);
    margin-bottom: .5rem;
}

/* JOURNEY TIMELINE — editorial, vertical flow */
.qb-timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-left: 2rem;
}
.qb-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--qb-border);
}
.qb-timeline-item {
    position: relative;
    padding-bottom: 3rem;
}
.qb-timeline-item::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: .5rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--qb-accent);
    border: 2px solid var(--qb-bg);
}
.qb-timeline-item h3 {
    font-family: var(--qb-font-display);
    font-size: 1.375rem;
    margin-bottom: .5rem;
}
.qb-timeline-item p { color: var(--qb-text-secondary); }

/* SACRED DESTINATION CARDS — more vertical, photographic */
.qb-dest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}
.qb-dest-card {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 4px;
    background: #3d5c4a;
}
.qb-dest-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    color: #fff;
}
.qb-dest-card h3 {
    font-family: var(--qb-font-display);
    font-size: 1.375rem;
    margin-bottom: .25rem;
}
.qb-dest-card p { font-size: .875rem; color: rgba(255,255,255,.8); }
.qb-dest-card a { color: var(--qb-accent-light); text-decoration: none; font-family: var(--qb-font-ui); font-weight: 600; font-size: .875rem; }
@media (max-width: 768px) {
    .qb-dest-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .qb-dest-grid { grid-template-columns: 1fr; }
}

/* PREPARATION SECTION — dark bg */
.qb-dark-section {
    background: var(--qb-dark-bg);
    color: #e8e0d8;
    padding: 5rem 2rem;
}
.qb-dark-section .qb-section-title { color: #fff; }
.qb-dark-section .qb-section-label { color: var(--qb-accent-light); }

/* CTA */
.qb-cta-section {
    text-align: center;
    padding: 5rem 2rem;
    background: var(--qb-primary);
    color: #fff;
}
.qb-cta-section h2 { font-family: var(--qb-font-display); font-size: 2rem; margin-bottom: .75rem; }
.qb-cta-section p { color: rgba(255,255,255,.7); margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; }
.qb-cta-btn {
    display: inline-block;
    padding: .875rem 2.5rem;
    background: var(--qb-accent);
    color: #fff;
    text-decoration: none;
    font-family: var(--qb-font-ui);
    font-weight: 700;
    border-radius: 4px;
}

/* FOOTER */
.qb-footer {
    background: #111;
    color: #999;
    padding: 4rem 2rem 2rem;
}
.qb-footer-grid {
    max-width: var(--qb-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
}
.qb-footer h4 { color: #ddd; font-family: var(--qb-font-display); font-size: 1.125rem; margin-bottom: 1rem; }
.qb-footer a { color: #999; text-decoration: none; font-size: .9375rem; font-family: var(--qb-font-ui); }
.qb-footer a:hover { color: var(--qb-accent-light); }
.qb-footer-links { display: flex; flex-direction: column; gap: .5rem; }
.qb-footer-legal {
    max-width: var(--qb-max-width);
    margin: 2rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid #333;
    font-size: .8125rem;
    color: #666;
    font-family: var(--qb-font-ui);
}

@media (max-width: 768px) {
    .qb-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* === v1.3.1 VISUAL POLISH === */

/* Hero — reduce height, add architectural texture */
.qb-hero { min-height: 50vh; max-height: 520px; }
.qb-hero-bg { background: linear-gradient(145deg, #1b4332 0%, #2d6a4f 35%, #1a1a1a 100%) !important; }
.qb-hero-content { padding: 3rem 2rem; }
.qb-hero-content h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); max-width: 580px; }
.qb-hero-content p { font-size: 1rem; }

/* Geometric accent — subtle Islamic pattern top border */
.qb-hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: repeating-linear-gradient(90deg, var(--qb-accent) 0px, var(--qb-accent) 12px, transparent 12px, transparent 20px);
}

/* Section spacing */
.qb-section { padding: 3.5rem 2rem; }

/* Sacred destination cards — architectural */
.qb-dest-card { aspect-ratio: 3/4; min-height: 280px; border-radius: 6px; }
.qb-dest-card h3 { font-size: 1.25rem; }
.qb-dest-card a { font-size: .8125rem; letter-spacing: .03em; }
.qb-dest-card-content { padding: 1.25rem; }

/* Package cards — journey style */
.qb-section .sp-package-card { border-radius: 6px; border: 1px solid var(--qb-border); box-shadow: none; }
.qb-section .sp-card-title { font-family: var(--qb-font-display); font-weight: 600; }
.qb-section .sp-card-cta { background: var(--qb-primary); color: #fff; padding: .625rem 1.25rem; border-radius: 4px; }
.qb-section .sp-card-cta:hover { background: var(--qb-primary-light); }
.qb-section .sp-card-price { color: var(--qb-primary); }
.qb-section .sp-tier-badge { background: rgba(27,67,50,.08); color: var(--qb-primary); }
.qb-section .sp-placeholder-img { background: linear-gradient(135deg, #2d6a4f, #1b4332); color: rgba(255,255,255,.6); min-height: 180px; }

/* Departure rows — integrated */
.qb-section .sp-departure-row { border-bottom: 1px solid var(--qb-border); padding: 1.25rem 0; }
.qb-section .sp-iata { color: var(--qb-primary); }
.qb-section .sp-btn-reserve { background: var(--qb-primary); color: #fff; border-radius: 4px; }

/* Timeline polish */
.qb-timeline { padding-left: 2.5rem; }
.qb-timeline::before { width: 1px; background: var(--qb-accent); }
.qb-timeline-item::before { background: var(--qb-accent); width: 8px; height: 8px; left: -2.5rem; }
.qb-timeline-item h3 { font-family: var(--qb-font-display); font-size: 1.25rem; color: var(--qb-text); }
.qb-timeline-item p { font-size: .9375rem; }

/* Demo — restrained */
.qb-section .sp-demo-ribbon { background: rgba(155,129,86,.15); color: var(--qb-accent); font-size: .625rem; }
.qb-section .sp-demo-badge-inline { background: rgba(155,129,86,.1); color: var(--qb-accent); font-size: .6875rem; }

/* Forms */
.qb-section .sp-field input, .qb-section .sp-field select, .qb-section .sp-field textarea {
    border: 1px solid var(--qb-border); border-radius: 4px; padding: .625rem .875rem; font-family: var(--qb-font-ui); font-size: .9375rem;
}
.qb-section .sp-field input:focus { border-color: var(--qb-primary); outline: none; box-shadow: 0 0 0 3px rgba(27,67,50,.1); }
.qb-section .sp-submit-btn { background: var(--qb-primary); color: #fff; border-radius: 4px; font-family: var(--qb-font-ui); }

/* Links */
.qb-section a { color: var(--qb-primary); }

/* Divider refinement */
.qb-divider { height: 2px; max-width: 80px; background: var(--qb-accent); opacity: .6; }