/* ============================================================
   AQ Poetry — Custom Stylesheet
   Layered on top of Canvas style.css
   ============================================================ */

/* ── 1. Google Fonts ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── 2. CSS Custom Properties ────────────────────────────── */
:root {
    --aq-gold:        #C9A84C;
    --aq-gold-light:  #E8C96D;
    --aq-gold-dark:   #9B7D30;
    --aq-dark:        #0D1B2A;
    --aq-dark2:       #152232;
    --aq-dark3:       #1E3045;
    --aq-parchment:   #FAF7F0;
    --aq-parchment2:  #F2EBD9;
    --aq-text:        #2C1810;
    --aq-muted:       #7A6552;
    --aq-border:      rgba(201, 168, 76, 0.25);
    --aq-shadow:      0 4px 24px rgba(13, 27, 42, 0.10);
    --aq-radius:      8px;
    --aq-font-urdu:   'Noto Nastaliq Urdu', 'Arial Unicode MS', serif;
    --aq-font-roman:  'Playfair Display', Georgia, serif;
    --aq-font-ui:     'DM Sans', -apple-system, sans-serif;
    --cnvs-themecolor: #C9A84C;
    --cnvs-themecolor-rgb: 201, 168, 76;
}

/* ── 3. Base Resets & Body ───────────────────────────────── */
body {
    font-family: var(--aq-font-ui);
    background-color: var(--aq-parchment);
    color: var(--aq-text);
}

/* Urdu RTL body */
body[dir="rtl"] {
    font-family: var(--aq-font-urdu);
    line-height: 2.2;
    letter-spacing: 0;
}

/* ── 4. Reading Progress Bar ─────────────────────────────── */
#aq-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--aq-gold), var(--aq-gold-light));
    z-index: 9999;
    transition: width 0.1s linear;
}

/* ── 5. Header Overrides ─────────────────────────────────── */
#header {
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

#header.not-dark {
    border-bottom-color: var(--aq-border);
    background: rgba(13, 27, 42, 0.97) !important;
    backdrop-filter: blur(10px);
}

/* Logo Text SVG */
.aq-logo-svg {
    height: 44px;
    width: auto;
}

/* Language Switcher Pill */
.aq-lang-switcher {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 50px;
    padding: 3px;
    gap: 2px;
}

.aq-lang-switcher a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /* Default: dark text — safe on any background */
    color: rgba(0,0,0,0.55) !important;
    text-decoration: none !important;
    transition: all 0.2s;
}

/* On dark header (transparent top or scrolled dark): light text */
#header.dark .aq-lang-switcher a,
#header.not-dark .aq-lang-switcher a {
    color: rgba(255,255,255,0.65) !important;
}


.aq-lang-switcher a.active,
.aq-lang-switcher a:hover {
    background: var(--aq-gold);
    color: var(--aq-dark) !important;
}

/* ── Mobile: pin lang switcher absolutely in header bar ──────────────
   Sits right of the logo, left of the hamburger button.
   Avoids all Canvas flex-ordering conflicts on mobile.           */
@media (max-width: 991.98px) {

    /* Anchor relative to the header inner row */
    #header .container {
        position: relative;
    }

    .aq-lang-header-misc {
        position: absolute;
        right: 54px;          /* hamburger is ~44px wide + 10px gap */
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
    }

    /* Slightly smaller pill on mobile so it fits comfortably */
    .aq-lang-header-misc .aq-lang-switcher {
        padding: 2px;
    }
    .aq-lang-header-misc .aq-lang-switcher a {
        padding: 3px 9px;
        font-size: 10px;
        letter-spacing: 0;
    }
}

/* Mobile: slightly smaller pill so it doesn't crowd the logo */
@media (max-width: 991.98px) {
    .aq-lang-switcher a {
        padding: 3px 9px;
        font-size: 10px;
        letter-spacing: 0;
    }
}

/* Nav menu gold accent on active/hover */
#header .menu-container > .menu-item > .menu-link:hover > div,
#header .menu-container > .current > .menu-link > div {
    color: var(--aq-gold) !important;
}

/* ── 6. Page Title / Inner Banner ────────────────────────── */
.aq-page-title {
    background: var(--aq-dark);
    padding: 80px 0 50px;
    position: relative;
    overflow: hidden;
}

.aq-page-title::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 1;
}

.aq-page-title h1 {
    font-family: IS_URDU ? var(--aq-font-urdu) : var(--aq-font-roman);
    color: #fff;
    position: relative;
    z-index: 1;
}

.aq-page-title .aq-breadcrumb {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    position: relative;
    z-index: 1;
}

.aq-page-title .aq-breadcrumb a {
    color: var(--aq-gold);
    text-decoration: none;
}

.aq-page-title .aq-breadcrumb span {
    margin: 0 8px;
    opacity: 0.4;
}

/* ── 7. Sher / Couplet Display Block ─────────────────────── */
.sher-block {
    border-right: 3px solid var(--aq-gold);
    padding: 20px 24px;
    margin-bottom: 28px;
    background: rgba(201, 168, 76, 0.04);
    border-radius: 0 var(--aq-radius) var(--aq-radius) 0;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}

body[dir="rtl"] .sher-block {
    border-right: none;
    border-left: 3px solid var(--aq-gold);
    border-radius: var(--aq-radius) 0 0 var(--aq-radius);
}

.sher-block:hover {
    background: rgba(201, 168, 76, 0.08);
}

.sher-block .sher-text {
    font-family: var(--aq-font-urdu);
    font-size: 1.45rem;
    line-height: 2.4;
    color: var(--aq-text);
    direction: rtl;
    text-align: right;
}

body:not([dir="rtl"]) .sher-block .sher-text-roman {
    font-family: var(--aq-font-roman);
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--aq-text);
    font-style: italic;
    margin-top: 6px;
}

/* Copy & Share buttons on sher */
.sher-actions {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

body[dir="rtl"] .sher-actions {
    left: auto;
    right: 12px;
}

.sher-block:hover .sher-actions {
    opacity: 1;
}

.sher-actions a, .sher-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(13, 27, 42, 0.07);
    border: 1px solid var(--aq-border);
    color: var(--aq-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 13px;
}

.sher-actions a:hover, .sher-actions button:hover {
    background: var(--aq-gold);
    color: var(--aq-dark);
    border-color: var(--aq-gold);
}

/* ── 8. Poetry Card (listing pages) ─────────────────────── */
.aq-poetry-card {
    background: #fff;
    border: 1px solid var(--aq-border);
    border-radius: var(--aq-radius);
    padding: 28px;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.aq-poetry-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--aq-gold), var(--aq-gold-light));
    transform: scaleX(0);
    transition: transform 0.3s;
}

.aq-poetry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--aq-shadow);
    border-color: var(--aq-gold);
}

.aq-poetry-card:hover::before {
    transform: scaleX(1);
}

.aq-poetry-card .aq-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(201, 168, 76, 0.12);
    color: var(--aq-gold-dark);
    margin-bottom: 14px;
}

.aq-poetry-card .card-title-urdu {
    font-family: var(--aq-font-urdu);
    font-size: 1.3rem;
    line-height: 2;
    direction: rtl;
    text-align: right;
    color: var(--aq-dark);
    margin-bottom: 6px;
}

.aq-poetry-card .card-title-roman {
    font-family: var(--aq-font-roman);
    font-size: 1rem;
    color: var(--aq-muted);
    font-style: italic;
    margin-bottom: 14px;
}

.aq-poetry-card .card-meta {
    font-size: 12px;
    color: var(--aq-muted);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.aq-poetry-card .card-meta i {
    color: var(--aq-gold);
}

/* ── 9. Sher of the Day Section ──────────────────────────── */
.aq-sotd {
    background: var(--aq-dark);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

.aq-sotd::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C9A84C' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/svg%3E");
}

.aq-sotd-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--aq-gold);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.aq-sotd-label::before,
.aq-sotd-label::after {
    content: '';
    flex: 1;
    max-width: 60px;
    height: 1px;
    background: var(--aq-gold);
    opacity: 0.4;
}

.aq-sotd-verse {
    font-family: var(--aq-font-urdu);
    font-size: 2rem;
    line-height: 2.5;
    color: #fff;
    direction: rtl;
    text-align: center;
}

.aq-sotd-attribution {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    margin-top: 16px;
}

.aq-sotd-attribution strong {
    color: var(--aq-gold);
}

/* ── 10. Section Heading Style ───────────────────────────── */
.aq-section-title {
    text-align: center;
    margin-bottom: 50px;
}

.aq-section-title .aq-eyebrow {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--aq-gold);
    margin-bottom: 12px;
}

.aq-section-title h2 {
    font-family: var(--aq-font-roman);
    font-size: 2rem;
    color: var(--aq-dark);
    margin-bottom: 14px;
}

body[dir="rtl"] .aq-section-title h2 {
    font-family: var(--aq-font-urdu);
    font-size: 1.8rem;
    line-height: 2;
}

.aq-section-title .aq-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.aq-section-title .aq-divider::before,
.aq-section-title .aq-divider::after {
    content: '';
    width: 50px;
    height: 1px;
    background: var(--aq-gold);
    opacity: 0.5;
}

.aq-section-title .aq-divider-icon {
    width: 8px;
    height: 8px;
    background: var(--aq-gold);
    transform: rotate(45deg);
}

/* ── 11. Masumeen Card ───────────────────────────────────── */
.aq-masum-card {
    text-align: center;
    padding: 30px 20px;
    border: 1px solid var(--aq-border);
    border-radius: var(--aq-radius);
    background: #fff;
    transition: all 0.25s;
    text-decoration: none !important;
    display: block;
}

.aq-masum-card:hover {
    border-color: var(--aq-gold);
    transform: translateY(-3px);
    box-shadow: var(--aq-shadow);
}

.aq-masum-card .aq-masum-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid var(--aq-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--aq-gold-dark);
    font-family: var(--aq-font-roman);
}

.aq-masum-card .aq-masum-name-urdu {
    font-family: var(--aq-font-urdu);
    font-size: 1.05rem;
    line-height: 2;
    color: var(--aq-dark);
    direction: rtl;
}

.aq-masum-card .aq-masum-name-roman {
    font-size: 12px;
    color: var(--aq-muted);
    margin-top: 4px;
}

/* ── 12. Poet Card ───────────────────────────────────────── */
.aq-poet-card {
    position: relative;
    border-radius: var(--aq-radius);
    overflow: hidden;
    background: var(--aq-dark2);
    transition: transform 0.25s;
    display: block;
    text-decoration: none !important;
}

.aq-poet-card:hover {
    transform: translateY(-4px);
}

.aq-poet-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.aq-poet-card:hover img {
    opacity: 0.5;
}

.aq-poet-card .aq-poet-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(13,27,42,0.95) 60%, transparent);
}

.aq-poet-card .aq-poet-name-urdu {
    font-family: var(--aq-font-urdu);
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.8;
    direction: rtl;
}

.aq-poet-card .aq-poet-name-roman {
    font-size: 12px;
    color: var(--aq-gold);
}

/* ── 13. Aqwaal / Quote Ticker ───────────────────────────── */
.aq-ticker-wrap {
    background: var(--aq-dark2);
    padding: 18px 0;
    overflow: hidden;
    border-top: 1px solid var(--aq-border);
    border-bottom: 1px solid var(--aq-border);
}

.aq-ticker-inner {
    display: flex;
    gap: 60px;
    animation: ticker-scroll 40s linear infinite;
    white-space: nowrap;
}

.aq-ticker-inner:hover {
    animation-play-state: paused;
}

.aq-ticker-item {
    font-family: var(--aq-font-urdu);
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    direction: rtl;
    white-space: nowrap;
}

.aq-ticker-item::before {
    content: '❝';
    color: var(--aq-gold);
    margin-left: 8px;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── 14. Joke Flip Card ──────────────────────────────────── */
.aq-flip-card {
    perspective: 1000px;
    height: 220px;
    cursor: pointer;
}

.aq-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.aq-flip-card.flipped .aq-flip-inner {
    transform: rotateY(180deg);
}

.aq-flip-front, .aq-flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: var(--aq-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.aq-flip-front {
    background: #fff;
    border: 1px solid var(--aq-border);
}

.aq-flip-back {
    background: var(--aq-dark);
    transform: rotateY(180deg);
}

.aq-flip-front .flip-title {
    font-family: var(--aq-font-urdu);
    font-size: 1.1rem;
    direction: rtl;
    color: var(--aq-dark);
    line-height: 2;
}

.aq-flip-front .flip-hint {
    font-size: 11px;
    color: var(--aq-gold);
    margin-top: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.aq-flip-back .flip-punchline {
    font-family: var(--aq-font-urdu);
    font-size: 1.1rem;
    direction: rtl;
    color: #fff;
    line-height: 2;
}

/* ── 15. Filter Tabs (Poetry Listing) ────────────────────── */
.aq-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
    justify-content: center;
}

.aq-filter-tabs a {
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    border: 1px solid var(--aq-border);
    color: var(--aq-muted);
    background: #fff;
    transition: all 0.2s;
}

.aq-filter-tabs a:hover,
.aq-filter-tabs a.active {
    background: var(--aq-gold);
    border-color: var(--aq-gold);
    color: var(--aq-dark);
}

/* ── 16. Footer ──────────────────────────────────────────── */
#footer.aq-footer {
    background: var(--aq-dark) !important;
    border-top: 1px solid var(--aq-border);
}

.aq-footer-logo-text {
    font-family: var(--aq-font-urdu);
    font-size: 2rem;
    color: var(--aq-gold);
    line-height: 1.8;
    direction: rtl;
}

.aq-footer-tagline {
    font-family: var(--aq-font-urdu);
    font-size: 0.95rem;
    color: rgba(255,255,255,0.45);
    direction: rtl;
    line-height: 2;
}

#footer.aq-footer .widget h4 {
    color: var(--aq-gold);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(201,168,76,0.2);
    padding-bottom: 10px;
    margin-bottom: 16px;
}

#footer.aq-footer .widget_links ul li a {
    color: rgba(255,255,255,0.5);
    font-size: 13.5px;
    transition: color 0.2s, padding 0.2s;
}

#footer.aq-footer .widget_links ul li a:hover {
    color: var(--aq-gold);
    padding-left: 5px;
}

body[dir="rtl"] #footer.aq-footer .widget_links ul li a:hover {
    padding-left: 0;
    padding-right: 5px;
}

#footer.aq-footer #copyrights {
    border-top: 1px solid rgba(201,168,76,0.15);
    color: rgba(255,255,255,0.35);
    font-size: 12.5px;
}

#footer.aq-footer #copyrights a {
    color: var(--aq-gold);
    opacity: 0.7;
}

#footer.aq-footer #copyrights a:hover {
    opacity: 1;
}

/* ── 17. View Counter Badge ──────────────────────────────── */
.aq-views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--aq-muted);
}

.aq-views i { color: var(--aq-gold); font-size: 11px; }

/* ── 18. Copy Notification Toast ─────────────────────────── */
.aq-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--aq-dark);
    color: var(--aq-gold);
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 13px;
    border: 1px solid var(--aq-border);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    z-index: 9999;
    white-space: nowrap;
}

.aq-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── 19. Responsive ──────────────────────────────────────── */
@media (max-width: 767px) {
    .aq-sotd-verse { font-size: 1.35rem; }
    .sher-block .sher-text { font-size: 1.1rem; }
    .aq-poetry-card { padding: 20px; }
    .aq-filter-tabs a { padding: 6px 14px; font-size: 12px; }
}

/* ── 20. Dark Section Utility ────────────────────────────── */
.aq-section-dark {
    background: var(--aq-dark);
}

.aq-section-dark .aq-section-title h2 {
    color: #fff;
}

/* Gold underline on links inside content */
.aq-content a {
    color: var(--aq-gold-dark);
    border-bottom: 1px solid rgba(201,168,76,0.3);
    text-decoration: none;
}

.aq-content a:hover {
    color: var(--aq-gold);
    border-bottom-color: var(--aq-gold);
}