/*
Theme Name: Tabula Child
Template: tabula
Theme URI: http://tabula.bold-themes.com
Description: WordPress theme for art, acting, music, language and dancing schools and classes.
Version: 1.1.9
Author: BoldThemes
Author URI: http://bold-themes.com
Tags: one-column, right-sidebar, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: tabula
License: GNU General Public License version 3.0 & Envato Regular/Extended License
License URI:  http://www.gnu.org/licenses/gpl-3.0.html & http://themeforest.net/licenses

*/

/* ==========================================================================
   Design tokens

   Read from the live page source, not sampled from a screenshot:
   - #EB2628, #F3BB22, #191919, #f2edeb, #efefef come from the theme's
     generated inline stylesheet (tabula-style-inline-css).
   - #082E51 and #FBE8B4 come from Additional CSS in the Customizer.
   - Font families are the ones Theme Options is generating.
   ========================================================================== */

:root {
    /* Brand */
    --bc-red: #EB2628;
    --bc-red-dark: #b41112;   /* theme's own darker red, used on hover */
    --bc-gold: #F3BB22;
    --bc-gold-pale: #FBE8B4;
    --bc-navy: #082E51;
    --bc-ink: #191919;

    /* Surfaces */
    --bc-beige: #f2edeb;
    --bc-grey: #efefef;
    --bc-white: #ffffff;

    /* Neutrals for body copy and rules */
    --bc-body: #4e4e4e;
    --bc-muted: #8a8a8a;
    --bc-rule: #e0e0e0;
    --bc-hairline: rgba(25, 25, 25, 0.1);

    /* Type — matching what Theme Options generates */
    --bc-font-display: "Mali", Arial, Helvetica, sans-serif;
    --bc-font-body: "Roboto", Arial, Helvetica, sans-serif;
    --bc-font-ui: "Montserrat", Arial, Helvetica, sans-serif;

    /* Radii */
    --bc-r-sm: 10px;
    --bc-r-md: 20px;
    --bc-r-pill: 100px;

    /* Measure */
    --bc-measure: 720px;
    --bc-measure-wide: 1140px;

    /* Clearance for the transparent header.
       The body carries btTransparentDarkHeader, so .mainHeader overlays the
       content, and btHideHeadline means there is no headline block to push
       content down. The logo is 120px tall; this adds breathing room.
       Inspect .mainHeader and use its rendered height if this is off. */
    --bc-header-offset: 150px;
}

/* ==========================================================================
   Shared

   These blocks render inside .btContent, which Tabula's header.php opens.
   ========================================================================== */

.bc-article,
.bc-faq {
    max-width: var(--bc-measure);
    margin: 0 auto;
    padding: var(--bc-header-offset) 0 64px;
}

.bc-index {
    max-width: var(--bc-measure-wide);
    margin: 0 auto;
    padding: var(--bc-header-offset) 0 64px;
}

.bc-article__head,
.bc-faq__head,
.bc-index__head {
    padding: 0 0 28px;
    margin: 0 0 36px;
    border-bottom: 1px solid var(--bc-rule);
}

.bc-article__title,
.bc-faq__title,
.bc-index__title {
    font-family: var(--bc-font-display);
    font-size: 2.375rem;
    line-height: 1.25;
    color: var(--bc-navy);
    margin: 0 0 14px;
}

.bc-article__meta,
.bc-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--bc-font-ui);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--bc-muted);
    margin: 0;
}

.bc-article__cat,
.bc-card__cat {
    color: var(--bc-red);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.bc-article__cat::after,
.bc-card__cat::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    background: var(--bc-rule);
    margin: 0 0 -1px 10px;
}

.bc-faq__standfirst {
    font-family: var(--bc-font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--bc-body);
    margin: 0;
}

.bc-empty {
    font-size: 1.0625rem;
    color: var(--bc-body);
}

/* ==========================================================================
   Article body
   ========================================================================== */

.bc-article__figure {
    margin: 0 0 36px;
    border-radius: var(--bc-r-md);
    overflow: hidden;
}

.bc-article__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.bc-article__body p,
.faq-answer p {
    font-family: var(--bc-font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--bc-body);
    margin: 0 0 22px;
}

.bc-article__body h2,
.bc-article__body h3,
.bc-article__body h4 {
    font-family: var(--bc-font-display);
    color: var(--bc-navy);
}

.bc-article__body h2 {
    font-size: 1.75rem;
    line-height: 1.3;
    margin: 44px 0 14px;
}

.bc-article__body h3 {
    font-size: 1.3125rem;
    line-height: 1.35;
    margin: 34px 0 12px;
}

.bc-article__body h4 {
    font-size: 1.125rem;
    line-height: 1.4;
    margin: 28px 0 10px;
}

.bc-article__body ul,
.bc-article__body ol {
    margin: 0 0 22px;
    padding-left: 22px;
}

.bc-article__body li {
    font-family: var(--bc-font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--bc-body);
    margin: 0 0 10px;
}

.bc-article__body a,
.faq-answer a {
    color: var(--bc-red);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.bc-article__body a:hover,
.faq-answer a:hover {
    color: var(--bc-red-dark);
    text-decoration: none;
}

.bc-article__body strong,
.faq-answer strong {
    color: var(--bc-ink);
}

/* The theme already styles blockquote in Mali at 1.3em with a 100px right
   pad, which is a pull-quote treatment. Inside an article it reads better
   as a tinted panel. */
.bc-article__body blockquote {
    font-family: var(--bc-font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.7;
    margin: 32px 0;
    padding: 24px 28px;
    background: var(--bc-beige);
    border-left: 4px solid var(--bc-gold);
    border-radius: var(--bc-r-sm);
}

.bc-article__body blockquote p:last-child {
    margin-bottom: 0;
}

.bc-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--bc-r-sm);
}

.bc-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 28px;
    font-size: 1rem;
}

.bc-article__body th {
    background: var(--bc-gold);
    color: var(--bc-ink);
    font-family: var(--bc-font-ui);
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--bc-gold);
}

.bc-article__body td {
    padding: 12px 14px;
    border: 1px solid var(--bc-rule);
    color: var(--bc-body);
    vertical-align: top;
}

.bc-article--faq .bc-article__title {
    font-size: 2rem;
}

.bc-eyebrow {
    font-family: var(--bc-font-ui);
    font-size: 0.875rem;
    margin: 0 0 18px;
}

.bc-eyebrow a {
    color: var(--bc-red);
    text-decoration: none;
    font-weight: 600;
}

.bc-eyebrow a:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ==========================================================================
   Blog index cards
   ========================================================================== */

.bc-index__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 36px 28px;
}

.bc-card {
    display: flex;
    flex-direction: column;
}

.bc-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: var(--bc-white);
    border-radius: var(--bc-r-md);
    overflow: hidden;
    box-shadow: 0 2px 30px -15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bc-card__link:hover {
    transform: translate(0, -10px);
    box-shadow: 0 25px 30px -10px rgba(0, 0, 0, 0.2);
}

.bc-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bc-beige);
}

.bc-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bc-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 26px;
}

.bc-card__meta {
    margin: 0 0 10px;
}

.bc-card__title {
    font-family: var(--bc-font-display);
    font-size: 1.1875rem;
    line-height: 1.35;
    color: var(--bc-navy);
    margin: 0 0 10px;
}

.bc-card__excerpt {
    font-family: var(--bc-font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--bc-body);
    margin: 0 0 18px;
}

.bc-card__cue {
    margin-top: auto;
    font-family: var(--bc-font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bc-red);
    transition: color 0.2s ease;
}

.bc-card__link:hover .bc-card__cue {
    color: var(--bc-navy);
}

/* ==========================================================================
   FAQ accordion

   The open/close control is drawn from two pseudo-element bars rather than
   an icon font, so it renders even if an icon font fails to load.
   ========================================================================== */

.bc-faq__item {
    border-bottom: 1px solid var(--bc-rule);
}

.bc-faq__item:first-child {
    border-top: 1px solid var(--bc-rule);
}

.bc-faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--bc-font-display);
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--bc-navy);
    transition: color 0.2s ease;
}

.bc-faq__q::-webkit-details-marker {
    display: none;
}

.bc-faq__q::marker {
    content: "";
}

.bc-faq__q:hover {
    color: var(--bc-red);
}

.bc-faq__q:focus-visible {
    outline: 2px solid var(--bc-red);
    outline-offset: 4px;
}

.bc-faq__q-text {
    flex: 1;
}

.bc-faq__icon {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 6px;
}

.bc-faq__icon::before,
.bc-faq__icon::after {
    content: "";
    position: absolute;
    background: var(--bc-red);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.bc-faq__icon::before {
    top: 8px;
    left: 0;
    width: 18px;
    height: 2px;
}

.bc-faq__icon::after {
    top: 0;
    left: 8px;
    width: 2px;
    height: 18px;
}

.bc-faq__item[open] .bc-faq__icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.bc-faq__a {
    padding: 0 40px 26px 0;
}

.bc-faq__a p {
    font-family: var(--bc-font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--bc-body);
    margin: 0 0 18px;
}

.bc-faq__a ul,
.bc-faq__a ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.bc-faq__a li {
    font-family: var(--bc-font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--bc-body);
    margin: 0 0 8px;
}

.bc-faq__a a {
    color: var(--bc-red);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.bc-faq__permalink {
    margin: 20px 0 0;
}

.bc-faq__permalink a {
    font-family: var(--bc-font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bc-red);
    text-decoration: none;
}

.bc-faq__permalink a:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ==========================================================================
   CTA and button

   The button mirrors the theme's own inset box-shadow fill, which is how
   Tabula animates every other button on the site.
   ========================================================================== */

.bc-cta {
    margin: 56px 0 0;
    padding: 34px;
    background: var(--bc-beige);
    border-radius: var(--bc-r-md);
    text-align: center;
}

.bc-cta__text {
    font-family: var(--bc-font-display);
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--bc-navy);
    margin: 0 0 20px;
}

.bc-btn {
    display: inline-block;
    font-family: var(--bc-font-ui);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bc-white);
    padding: 15px 36px;
    border-radius: var(--bc-r-pill);
    text-decoration: none;
    box-shadow: 0 0 0 3em var(--bc-red) inset;
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

.bc-btn:hover,
.bc-btn:focus {
    color: var(--bc-red);
    box-shadow: 0 0 0 1px var(--bc-red) inset;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.bc-index .navigation.pagination,
.bc-faq .navigation.pagination {
    margin: 48px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--bc-rule);
}

.bc-index .nav-links,
.bc-faq .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bc-index .page-numbers,
.bc-faq .page-numbers {
    display: inline-block;
    min-width: 42px;
    padding: 9px 15px;
    text-align: center;
    font-family: var(--bc-font-ui);
    font-size: 0.9375rem;
    color: var(--bc-red);
    text-decoration: none;
    border-radius: var(--bc-r-pill);
    box-shadow: 0 0 0 1px var(--bc-red) inset;
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

.bc-index .page-numbers:hover,
.bc-faq .page-numbers:hover,
.bc-index .page-numbers.current,
.bc-faq .page-numbers.current {
    color: var(--bc-white);
    box-shadow: 0 0 0 3em var(--bc-red) inset;
}

.bc-index .page-numbers.dots,
.bc-faq .page-numbers.dots {
    box-shadow: none;
    color: var(--bc-muted);
}

/* ==========================================================================
   Responsive — breakpoints matched to the theme's own
   ========================================================================== */

@media screen and (max-width: 1199px) {

    .bc-article,
    .bc-faq,
    .bc-index {
        padding-top: calc(var(--bc-header-offset) - 30px);
    }
}

@media screen and (max-width: 991px) {

    .bc-article__title,
    .bc-faq__title,
    .bc-index__title {
        font-size: 1.875rem;
    }

    .bc-article--faq .bc-article__title {
        font-size: 1.625rem;
    }

    .bc-index__grid {
        gap: 28px 20px;
    }
}

@media screen and (max-width: 767px) {

    .bc-article,
    .bc-faq,
    .bc-index {
        padding-top: 100px;
    }

    .bc-index__grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .bc-faq__q {
        font-size: 1.0625rem;
        padding: 18px 0;
    }

    .bc-faq__a {
        padding: 0 0 22px;
    }

    .bc-cta {
        padding: 26px 18px;
    }
}

@media screen and (max-width: 480px) {

    .bc-article__title,
    .bc-faq__title,
    .bc-index__title {
        font-size: 1.5rem;
    }

    .bc-article--faq .bc-article__title {
        font-size: 1.375rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .bc-card__link,
    .bc-btn,
    .bc-faq__icon::before,
    .bc-faq__icon::after {
        transition: none;
    }

    .bc-card__link:hover {
        transform: none;
    }
}