/* ==========================================================================
   BaharLink Theme - layout.css
   Structural layout: containers, header, footer, sections, grids, sidebar.
   No component visual styling (that's in components.css).
   ========================================================================== */

/* ---- Container ---------------------------------------------------------- */
.bl-container {
    width: 100%;
    max-width: var(--bl-container);
    margin-inline: auto;
    padding-inline: var(--bl-container-pad);
}

.bl-container--narrow {
    max-width: var(--bl-container-narrow);
}

.bl-container--wide {
    max-width: var(--bl-container-wide);
}

/* ---- Main --------------------------------------------------------------- */
.bl-main {
    min-height: 60vh;
    outline: none;
}

/* ---- Announcement bar --------------------------------------------------- */
.bl-announcement {
    background: var(--bl-primary);
    color: var(--bl-text-on-primary);
    font-size: var(--bl-fs-sm);
    line-height: 1.4;
}

.bl-announcement__inner {
    display: flex;
    justify-content: center;
    padding-block: var(--bl-space-2);
    text-align: center;
}

.bl-announcement__link,
.bl-announcement__text {
    color: inherit;
    text-decoration: none;
    font-weight: var(--bl-fw-medium);
}

.bl-announcement__link:hover {
    color: inherit;
    text-decoration: underline;
}

/* ---- Header ------------------------------------------------------------- */
.bl-header {
    position: sticky;
    top: 0;
    z-index: var(--bl-z-sticky);
    background: color-mix(in srgb, var(--bl-surface) 85%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-block-end: 1px solid var(--bl-border);
    transition: background var(--bl-transition), border-color var(--bl-transition);
}

@supports not (backdrop-filter: blur(12px)) {
    .bl-header {
        background: var(--bl-surface);
    }
}

.bl-header__inner {
    display: flex;
    align-items: center;
    gap: var(--bl-space-4);
    min-height: var(--bl-header-h);
    padding-block: var(--bl-space-2);
}

.bl-header__actions {
    display: flex;
    align-items: center;
    gap: var(--bl-space-2);
    margin-inline-start: auto;
}

.bl-header__cta {
    white-space: nowrap;
}

.bl-header__menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--bl-radius);
    color: var(--bl-text);
}

.bl-header__menu-btn:hover {
    background: var(--bl-surface-2);
}

.bl-header__menu-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 22px;
}

.bl-header__menu-icon span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--bl-transition), opacity var(--bl-transition);
}

/* ---- Brand -------------------------------------------------------------- */
.bl-brand__link {
    display: inline-flex;
    align-items: center;
    gap: var(--bl-space-3);
    color: inherit;
    text-decoration: none;
}

.bl-brand__link:hover {
    text-decoration: none;
    color: inherit;
}

.bl-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.bl-brand__title {
    font-size: var(--bl-fs-md);
    font-weight: var(--bl-fw-bold);
    color: var(--bl-text);
}

.bl-brand__desc {
    font-size: var(--bl-fs-xs);
    color: var(--bl-text-muted);
}

.bl-brand__logo,
.bl-brand__logo--dark,
.bl-footer__logo,
.bl-footer__logo--dark {
    max-height: 40px;
    width: auto;
}

/* Show dark logo only in dark mode */
.bl-brand__logo--dark,
.bl-footer__logo--dark {
    display: none;
}

[data-theme="dark"] .bl-brand__logo:not(.bl-brand__logo--dark),
[data-theme="dark"] .bl-footer__logo:not(.bl-footer__logo--dark) {
    display: none;
}

[data-theme="dark"] .bl-brand__logo--dark,
[data-theme="dark"] .bl-footer__logo--dark {
    display: block;
}

/* Custom logo wrapper fix */
.bl-brand .custom-logo-link,
.bl-footer .custom-logo-link {
    display: inline-flex;
}

/* ---- Primary nav -------------------------------------------------------- */
.bl-nav-primary__list {
    display: flex;
    align-items: center;
    gap: var(--bl-space-1);
    list-style: none;
    padding: 0;
    margin: 0;
}

.bl-nav-primary__item {
    position: relative;
}

.bl-nav-primary__link {
    display: inline-flex;
    align-items: center;
    gap: var(--bl-space-1);
    padding: var(--bl-space-2) var(--bl-space-3);
    color: var(--bl-text);
    text-decoration: none;
    border-radius: var(--bl-radius);
    font-size: var(--bl-fs-sm);
    font-weight: var(--bl-fw-medium);
    transition: background var(--bl-transition-fast), color var(--bl-transition-fast);
}

.bl-nav-primary__link:hover {
    background: var(--bl-surface-2);
    color: var(--bl-primary);
    text-decoration: none;
}

.bl-nav-primary__link.is-current,
.bl-nav-primary__link[aria-current="page"] {
    color: var(--bl-primary);
    background: var(--bl-primary-soft);
}

.bl-nav-primary__sub {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    min-width: 200px;
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius);
    box-shadow: var(--bl-shadow-lg);
    padding: var(--bl-space-2);
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--bl-transition-fast), transform var(--bl-transition-fast), visibility var(--bl-transition-fast);
}

.bl-nav-primary__item--has-children:hover > .bl-nav-primary__sub,
.bl-nav-primary__item--has-children:focus-within > .bl-nav-primary__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bl-nav-primary__toggle {
    display: none;
}

/* ---- Sections ----------------------------------------------------------- */
.bl-section {
    padding-block: var(--bl-space-16);
}

.bl-section--compact {
    padding-block: var(--bl-space-12);
}

.bl-section__header {
    margin-block-end: var(--bl-space-8);
    text-align: center;
}

.bl-section__title {
    margin-block: 0 var(--bl-space-2);
    font-size: var(--bl-fs-xl);
}

.bl-section__subtitle {
    color: var(--bl-text-muted);
    font-size: var(--bl-fs-md);
    max-width: 60ch;
    margin-inline: auto;
}

.bl-section__cta {
    margin-block-start: var(--bl-space-8);
    text-align: center;
}

/* ---- Footer ------------------------------------------------------------- */
.bl-footer {
    background: var(--bl-surface);
    border-block-start: 1px solid var(--bl-border);
    padding-block: var(--bl-space-16) var(--bl-space-6);
    margin-block-start: var(--bl-space-20);
}

.bl-footer__inner {
    width: 100%;
    max-width: var(--bl-container);
    margin-inline: auto;
    padding-inline: var(--bl-container-pad);
}

.bl-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--bl-space-8);
    margin-block-end: var(--bl-space-10);
}

.bl-footer__brand-col {
    display: flex;
    flex-direction: column;
    gap: var(--bl-space-4);
}

.bl-footer__brand-title {
    font-size: var(--bl-fs-lg);
    margin: 0;
}

.bl-footer__tagline {
    color: var(--bl-text-muted);
    font-size: var(--bl-fs-sm);
    line-height: var(--bl-lh-relaxed);
    max-width: 36ch;
}

.bl-footer__col-title {
    font-size: var(--bl-fs-sm);
    font-weight: var(--bl-fw-semibold);
    color: var(--bl-text);
    margin-block: 0 var(--bl-space-4);
    text-transform: none;
    letter-spacing: 0;
}

.bl-footer__link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bl-space-3);
}

.bl-footer__link-list a {
    color: var(--bl-text-muted);
    text-decoration: none;
    font-size: var(--bl-fs-sm);
    transition: color var(--bl-transition-fast);
}

.bl-footer__link-list a:hover {
    color: var(--bl-primary);
    text-decoration: none;
}

.bl-footer__contact-text {
    color: var(--bl-text-muted);
    font-size: var(--bl-fs-sm);
    margin-block: 0 var(--bl-space-4);
    line-height: var(--bl-lh-relaxed);
}

.bl-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--bl-space-4);
    padding-block-start: var(--bl-space-6);
    border-block-start: 1px solid var(--bl-border);
    flex-wrap: wrap;
}

.bl-footer__copyright {
    font-size: var(--bl-fs-sm);
    color: var(--bl-text-muted);
    margin: 0;
}

.bl-footer__top-link {
    display: inline-flex;
    align-items: center;
    gap: var(--bl-space-2);
    color: var(--bl-text-muted);
    text-decoration: none;
    font-size: var(--bl-fs-sm);
    padding: var(--bl-space-2);
    border-radius: var(--bl-radius);
    transition: color var(--bl-transition-fast);
}

.bl-footer__top-link:hover {
    color: var(--bl-primary);
    text-decoration: none;
}

.bl-footer__debug {
    text-align: center;
    padding-block: var(--bl-space-2);
    color: var(--bl-text-subtle);
    font-size: var(--bl-fs-xs);
}

/* ---- Social icons in footer -------------------------------------------- */
.bl-footer__social ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--bl-space-2);
}

.bl-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--bl-radius);
    background: var(--bl-surface-2);
    color: var(--bl-text-muted);
    transition: background var(--bl-transition-fast), color var(--bl-transition-fast);
}

.bl-footer__social-link:hover {
    background: var(--bl-primary);
    color: var(--bl-text-on-primary);
    text-decoration: none;
}

/* ---- Article layout (single.php) --------------------------------------- */
.bl-article__header {
    text-align: center;
    padding-block: var(--bl-space-8) var(--bl-space-6);
}

.bl-article__thumb {
    margin-block: var(--bl-space-6) var(--bl-space-8);
}

.bl-article__thumb-img {
    width: 100%;
    border-radius: var(--bl-radius-lg);
    box-shadow: var(--bl-shadow-md);
}

.bl-article__thumb-caption {
    margin-block-start: var(--bl-space-2);
    color: var(--bl-text-subtle);
    font-size: var(--bl-fs-sm);
    text-align: center;
}

/* Article body: single column by default (max 760px centered).
   TOC appears as a collapsible <details> above the content.
   On desktop (1024px+), the layout switches to a 2-column grid
   with TOC as a sticky sidebar. */
.bl-article__body {
    max-width: var(--bl-container-narrow);
    margin-inline: auto;
}

.bl-article__content {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.bl-article__footer {
    width: 100%;
    margin: 0;
    padding-block: var(--bl-space-6);
    border-block-start: 1px solid var(--bl-border);
    margin-block-start: var(--bl-space-8);
}

/* ---- TOC sidebar -------------------------------------------------------- */
/* On mobile: appears as <details> above content (default). */
.bl-toc {
    margin-block-end: var(--bl-space-4);
}

.bl-toc[hidden] {
    display: none;
}

/* On desktop (1024px+): switch to 2-column grid with sticky TOC sidebar. */
@media (min-width: 1024px) {
    .bl-article__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: var(--bl-space-8);
        align-items: start;
        max-width: var(--bl-container);
    }

    /* In RTL, the first column (content) is on the right, second (TOC) on the left. */
    .bl-toc {
        position: sticky;
        top: calc(var(--bl-header-h) + var(--bl-space-4));
        align-self: start;
        margin-block-end: 0;
        max-height: calc(100vh - var(--bl-header-h) - var(--bl-space-8));
        overflow-y: auto;
    }
}

/* ---- Mobile: hide drawer trigger stuff by default ---------------------- */
@media (max-width: 1024px) {
    .bl-nav-primary {
        display: none;
    }

    .bl-header__menu-btn {
        display: inline-flex;
    }

    .bl-header__cta {
        display: none;
    }

    .bl-header__inner {
        min-height: var(--bl-header-h-mobile);
    }

    .bl-article__body {
        grid-template-columns: 1fr;
    }

    .bl-toc {
        position: static;
        top: auto;
    }

    .bl-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--bl-space-6);
    }

    .bl-footer__brand-col {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .bl-footer__grid {
        grid-template-columns: 1fr;
    }

    .bl-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- Bottom navigation (mobile only) ----------------------------------- */
.bl-bottom-nav {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--bl-z-sticky);
    background: color-mix(in srgb, var(--bl-surface) 95%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-block-start: 1px solid var(--bl-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bl-bottom-nav__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: var(--bl-bottom-nav-h);
}

.bl-bottom-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--bl-text-muted);
    text-decoration: none;
    font-size: var(--bl-fs-xs);
    padding-block: var(--bl-space-2);
    transition: color var(--bl-transition-fast);
    min-height: 44px;
}

.bl-bottom-nav__link:hover,
.bl-bottom-nav__link[aria-current="page"] {
    color: var(--bl-primary);
    text-decoration: none;
}

.bl-bottom-nav__item--search .bl-bottom-nav__link {
    background: var(--bl-primary);
    color: var(--bl-text-on-primary);
    margin: var(--bl-space-2);
    border-radius: var(--bl-radius-pill);
}

.bl-bottom-nav__item--search .bl-bottom-nav__link:hover {
    background: var(--bl-primary-hover);
    color: var(--bl-text-on-primary);
}

/* Add bottom padding to body when bottom nav is visible */
@media (max-width: 768px) {
    .bl-bottom-nav {
        display: block;
    }

    body {
        padding-bottom: calc(var(--bl-bottom-nav-h) + env(safe-area-inset-bottom, 0));
    }
}