/*
 * WoJ Blog Template — article reading view
 *
 * Layered on top of templates/woj_template/css/template.css.
 * Only contains overrides and additions specific to the blog template.
 *
 * Body wrapper carries both 'insideblog' and 'insidewide', so the existing
 * wide-content styling from template.css applies; this file only adds the
 * blog-specific tweaks on top.
 */

/* Load Lato 400 + 700 explicitly. The template's existing Google Fonts link
 * only requests the default weight (400), so any <strong> or font-weight:700
 * rule in the body falls back to faux-bold which barely registers at 18px.
 * Importing 700 here makes inline bold actually look bold. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');


/* ---------- Article column ---------- */

#inside.insideblog #main_content {
    padding: 40px 0 60px;
    background: #fff;
}

#inside.insideblog #main_content > .row.container > .main {
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
}


/* ---------- Article typography ---------- */

#inside.insideblog .main .item-page,
#inside.insideblog .main .blog {
    font-family: 'Lato', Arial, sans-serif;
}

#inside.insideblog .main .item-page h1,
#inside.insideblog .main .item-page .page-header h2,
#inside.insideblog .main .item-page > h2:first-child {
    font-size: 56px;
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 24px !important;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}

#inside.insideblog .main .item-page h2 {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    margin: 48px 0 20px !important;
    color: #1a1a1a;
}

#inside.insideblog .main .item-page h3 {
    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;
    margin: 36px 0 14px !important;
    color: #1a1a1a;
}

#inside.insideblog .main .item-page p,
#inside.insideblog .main .item-page li {
    font-size: 18px;
    line-height: 1.7;
    color: #2a2a2a;
    margin: 0 0 20px;
}

#inside.insideblog .main .item-page ul,
#inside.insideblog .main .item-page ol {
    margin: 0 0 24px;
    padding-left: 24px;
}

#inside.insideblog .main .item-page li {
    margin-bottom: 8px;
}

#inside.insideblog .main .item-page a {
    color: #3ca0e9;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

#inside.insideblog .main .item-page a:hover {
    color: #1e87d4;
}

#inside.insideblog .main .item-page blockquote {
    border-left: 3px solid #3ca0e9;
    margin: 28px 0;
    padding: 4px 0 4px 20px;
    font-size: 20px;
    line-height: 1.6;
    color: #333;
    font-style: italic;
}

#inside.insideblog .main .item-page strong,
#inside.insideblog .main .item-page b {
    font-weight: 700;
}


/* ---------- Featured / inline images ---------- */

#inside.insideblog .main .item-page .item-image,
#inside.insideblog .main .item-page img {
    max-width: 100%;
    height: auto;
    margin: 0 0 28px;
    border: 0;
    box-shadow: none;
    padding: 0;
    background: none;
}

#inside.insideblog .main .item-page .item-image {
    border: 0;
    padding: 0;
    background: none;
}

#inside.insideblog .main .item-page .item-image img {
    width: 100%;
    border-radius: 2px;
    border: 0;
}


/* ---------- Article meta band (date, author) ---------- */

#inside.insideblog .main .item-page .page-header {
    margin: 0 0 8px;
}

#inside.insideblog .main .item-page .article-info {
    margin: 32px 0 32px;
    padding: 0 0 18px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    color: #6a6a6a;
}

#inside.insideblog .main .item-page .article-info dd {
    display: inline-block;
    margin: 0 16px 0 0;
}


/* ---------- Breadcrumbs ---------- */

#inside.insideblog #breadcrumbs .row.container {
    padding: 12px 0;
    font-size: 14px;
    color: #555;
}

#inside.insideblog #breadcrumbs a {
    color: #3ca0e9;
    text-decoration: none;
}

#inside.insideblog #breadcrumbs a:hover {
    text-decoration: underline;
}


/* ---------- Below-article zone ---------- */

#inside.insideblog #blog-below {
    padding: 40px 0;
}


/* ---------- Category blog list view (multiple article cards) ---------- */

#inside.insideblog .main .blog .items-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0 0 24px;
}

#inside.insideblog .main .blog .items-row > div {
    flex: 1 1 320px;
    display: flex;
}

#inside.insideblog .main .blog .item {
    background: #fff;
    border: 1px solid #ececec;
    padding: 32px 36px;
    border-radius: 4px;
    width: 100%;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

#inside.insideblog .main .blog .item:hover {
    border-color: #b8b8b8;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

#inside.insideblog .main .blog .item .page-header {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

#inside.insideblog .main .blog .item h2 {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
}

#inside.insideblog .main .blog .item h2 a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 180ms ease;
}

#inside.insideblog .main .blog .item h2 a:hover {
    color: #3ca0e9;
}

/* Date and category meta (rendered when enabled in menu item options) */
#inside.insideblog .main .blog .item .article-info,
#inside.insideblog .main .blog .item .published,
#inside.insideblog .main .blog .item .category-name {
    font-size: 12px;
    color: #6a6a6a;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

/* Intro image (rendered when enabled in menu item options) */
#inside.insideblog .main .blog .item .item-image {
    margin: 0 0 20px;
}

#inside.insideblog .main .blog .item .item-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* Read more button: hides Joomla's "Read more ..." default, swaps in "Read article →" */
#inside.insideblog .main .blog .item .readmore {
    margin: 20px 0 0;
}

#inside.insideblog .main .blog .item .readmore a {
    display: inline-block;
    padding: 11px 22px;
    background: #3ca0e9;
    color: #fff;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    border-radius: 3px;
    transition: background 180ms ease;
}

#inside.insideblog .main .blog .item .readmore a::before {
    content: "Read article";
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.3px;
}

#inside.insideblog .main .blog .item .readmore a::after {
    content: " \2192";
    font-size: 14px;
    line-height: 1.2;
    margin-left: 6px;
    display: inline-block;
    transition: transform 180ms ease;
}

#inside.insideblog .main .blog .item .readmore a:hover {
    background: #1e87d4;
}

#inside.insideblog .main .blog .item .readmore a:hover::after {
    transform: translateX(3px);
}

/* Force single-item rows to span full article width */
#inside.insideblog .main .blog .items-row > div:only-child,
#inside.insideblog .main .blog .items-row > .span4:only-child,
#inside.insideblog .main .blog .items-row > .span6:only-child {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
}


/* ---------- Collapse blog-specific zones when no modules are assigned ---------- */

#inside.insideblog #breadcrumbs:not(:has(.moduletable)):not(:has(.custom)),
#inside.insideblog #blog-below:not(:has(.moduletable)):not(:has(.custom)) {
    display: none;
}


/* ---------- Individual article view: hide the index-only intro band ---------- */
/* index.php adds .view-article to #inside when Joomla is rendering a single
   article (view=article). The blog-index intro rows become noise on those
   pages (the article has its own title) so they're hidden and replaced by a
   thin yellow rule across the top of the reading area. */

#inside.view-article #firstrow,
#inside.view-article #secondrow {
    display: none;
}

/* On the blog index, override the inherited dashed-yellow rule under firstrow */
#inside.view-list #firstrow {
    border-bottom: 0;
}


/* ---------- Mobile ---------- */

@media (max-width: 900px) {
    #inside.insideblog .main .item-page h1,
    #inside.insideblog .main .item-page .page-header h2,
    #inside.insideblog .main .item-page > h2:first-child {
        font-size: 42px;
    }

    #inside.insideblog .main .item-page h2 {
        font-size: 22px;
    }

    #inside.insideblog .main .item-page p,
    #inside.insideblog .main .item-page li {
        font-size: 17px;
    }
}

@media (max-width: 600px) {
    #inside.insideblog #main_content {
        padding: 20px 0 40px;
    }

    #inside.insideblog .main .item-page h1,
    #inside.insideblog .main .item-page .page-header h2,
    #inside.insideblog .main .item-page > h2:first-child {
        font-size: 32px;
    }

    #inside.insideblog .main .blog .item {
        padding: 24px 22px;
    }

    #inside.insideblog .main .blog .item h2 {
        font-size: 20px;
    }
}


/* ============================================================
 * Single article view: strip the listing-page furniture
 * ------------------------------------------------------------
 * On individual blog article pages (#inside.view-article), two
 * blocks designed for the listing page add noise around the
 * article:
 *
 *   - #slideshow renders a "Blog" <h1>, the subtitle ("Stories
 *     and guides from our 120-year-old print works"), and the
 *     yellow horizontal rule. On an article page this competes
 *     with the article's own <h1 itemprop="headline">.
 *   - #firstrow renders the intro paragraph ("There's a lot of
 *     mystery in print..."), which is landing-page copy.
 *
 * Hiding both on view-article leaves the article title as the
 * sole rendered <h1> and lets the reader land directly on the
 * piece.
 *
 * Scope: strictly #inside.view-article. The listing page
 * (#inside.view-list) and every other page on the main site
 * are untouched. CSS-only, reversible by removing this block.
 * ============================================================ */

#inside.view-article #slideshow,
#inside.view-article #firstrow {
    display: none;
}


/* ============================================================
 * FAQ block: shaded section that visually breaks the article
 * ------------------------------------------------------------
 * Articles can wrap their FAQ in <div class="faq-section">...
 * </div> to set the block apart from the main argument. Light
 * grey background, generous padding, rounded corners, tighter
 * heading spacing inside so the box doesn't read top-heavy.
 * ============================================================ */

#inside.insideblog .main .item-page .faq-section {
    background: #f7f7f7;
    padding: 40px 48px;
    margin: 56px 0;
    border-radius: 4px;
}

#inside.insideblog .main .item-page .faq-section h2 {
    margin: 0 0 24px !important;
}

#inside.insideblog .main .item-page .faq-section h3 {
    font-size: 19px;
    margin: 28px 0 10px !important;
}

#inside.insideblog .main .item-page .faq-section > .faq-item:first-of-type h3,
#inside.insideblog .main .item-page .faq-section > div:first-of-type h3 {
    margin-top: 8px !important;
}

#inside.insideblog .main .item-page .faq-section > .faq-item:last-of-type [itemprop="acceptedAnswer"] p,
#inside.insideblog .main .item-page .faq-section > div:last-of-type p:last-child,
#inside.insideblog .main .item-page .faq-section > p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    #inside.insideblog .main .item-page .faq-section {
        padding: 28px 24px;
        margin: 40px 0;
    }
}