/*
Theme Name: Best of Knitting
Template: codilight-lite
Description: Best of Knitting magazine layout - project finder, coloured category labels and curated collection cards. Built on Codilight Lite, same stack as Daily Crochet.
Author: Gabriela
Version: 1.0
*/

/* ==================================================================
   1. Category labels
   ================================================================== */

.bok-badge,
a.entry-category,
.meta-category a {
    display: inline-block;
    padding: 4px 9px;
    font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fff !important;
    background: #e74c3c;
    border-radius: 2px;
    text-decoration: none;
}

.bok-badge:hover,
a.entry-category:hover,
.meta-category a:hover {
    opacity: .85;
    color: #fff !important;
}

/* one colour per section, so a reader learns the page */
/* The four colours the site actually used, read off the February 2023
   archive rather than invented: the flagship orange-red, the cyan group,
   Amigurumi's yellow, and the theme's teal carrying everything else. */
.bok-badge--free-crochet-patterns,
.category-free-crochet-patterns a.entry-category { background: #fa4b2a; }

.bok-badge--baby-blankets,
.category-baby-blankets a.entry-category,
.bok-badge--crochet-for-beginners,
.category-crochet-for-beginners a.entry-category,
.bok-badge--crochet-stitches,
.category-crochet-stitches a.entry-category,
.bok-badge--crochet-for-baby-children,
.category-crochet-for-baby-children a.entry-category { background: #00c8ff; }

/* Yellow needs dark text or nobody can read it. */
.bok-badge--crochet-amigurumi-patterns,
.category-crochet-amigurumi-patterns a.entry-category {
	background: #ffd800;
	color: #222 !important;
}

/* A little separation for the next biggest sections, kept inside the
   same family so the page still reads as one palette. */
.bok-badge--crochet-afghan-and-blanket-patterns,
.category-crochet-afghan-and-blanket-patterns a.entry-category { background: #2f8f7c; }
.bok-badge--granny-squares-patterns,
.category-granny-squares-patterns a.entry-category { background: #f2803a; }
.bok-badge--seasonal-crochet,
.category-seasonal-crochet a.entry-category { background: #d1495b; }
.bok-badge--knitting,
.category-knitting a.entry-category { background: #6d7f8c; }

/* Everything else falls back to the site's accent teal, which is how the
   original looked - most labels shared one colour. */

/* ==================================================================
   2. Featured mosaic
   ================================================================== */

.bok-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 30px;
}

.bok-mosaic--overlay { grid-auto-rows: 168px; }

.bok-tile {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #efefef;
}

.bok-tile--lead {
    grid-column: span 2;
    grid-row: span 2;
}

.bok-tile__thumb {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bok-tile__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.bok-tile:hover .bok-tile__thumb img { transform: scale(1.05); }

/* a picture we do not have should look deliberate, not broken */
.bok-thumb-placeholder,
.entry-thumb--empty {
    display: block;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(45deg, #f0efec 0 10px, #eae8e4 10px 20px);
}

/* --- overlay style --- */

.bok-mosaic--overlay .bok-tile__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 38px 15px 13px;
    background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.5) 52%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

.bok-mosaic--overlay .bok-tile__body a { pointer-events: auto; }

.bok-mosaic--overlay .bok-tile__cat { display: block; margin-bottom: 7px; }

.bok-mosaic--overlay .bok-tile__title {
    margin: 0;
    font-size: 14px;
    line-height: 1.34;
}

.bok-mosaic--overlay .bok-tile--lead .bok-tile__title {
    font-size: 23px;
    line-height: 1.26;
}

.bok-mosaic--overlay .bok-tile__title a {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

.bok-mosaic--overlay .bok-tile__title a:hover { color: #fff; text-decoration: underline; }

/* --- card style --- */

.bok-mosaic--cards {
    gap: 24px 20px;
    align-items: start;
}

.bok-mosaic--cards .bok-tile {
    background: none;
    overflow: visible;
}

.bok-mosaic--cards .bok-tile__thumb {
    height: auto;
    margin-bottom: 11px;
    background: #efefef;
}

.bok-mosaic--cards .bok-tile__thumb img,
.bok-mosaic--cards .bok-thumb-placeholder {
    aspect-ratio: 16 / 11;
    height: auto;
}

.bok-mosaic--cards .bok-tile--lead .bok-tile__thumb img,
.bok-mosaic--cards .bok-tile--lead .bok-thumb-placeholder {
    aspect-ratio: 4 / 3;
}

.bok-mosaic--cards .bok-tile__cat { display: block; margin-bottom: 9px; }

.bok-mosaic--cards .bok-tile__title {
    margin: 0 0 6px;
    font-size: 14.5px;
    line-height: 1.36;
}

.bok-mosaic--cards .bok-tile--lead .bok-tile__title {
    font-size: 25px;
    line-height: 1.24;
}

.bok-mosaic--cards .bok-tile__title a { color: #222; }
.bok-mosaic--cards .bok-tile__title a:hover { color: #2E4A3D; }

.bok-mosaic--cards .bok-tile__meta {
    margin-bottom: 9px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #a0a0a0;
}

.bok-mosaic--cards .bok-tile__excerpt {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: #777;
}

@media (max-width: 991px) {
    .bok-mosaic { grid-template-columns: repeat(2, 1fr); }
    .bok-mosaic--overlay { grid-auto-rows: 150px; }
    .bok-mosaic--overlay .bok-tile--lead .bok-tile__title { font-size: 18px; }
    .bok-mosaic--cards .bok-tile--lead .bok-tile__title { font-size: 21px; }
}

@media (max-width: 560px) {
    .bok-mosaic { grid-template-columns: 1fr; }
    .bok-mosaic--overlay { grid-auto-rows: 200px; }
    .bok-tile--lead { grid-column: span 1; grid-row: span 1; }
}

/* ==================================================================
   3. Random article bar
   ================================================================== */

.bok-random-bar {
    display: flex;
    align-items: stretch;
    margin: 0 0 30px;
    background: #f6f6f6;
    border: 1px solid #ececec;
}

.bok-random-bar__label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 13px 42px 13px 20px;
    font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #fff;
    background: #2E4A3D;
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}

.bok-random-bar__title {
    display: flex;
    align-items: center;
    padding: 13px 20px 13px 4px;
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}

.bok-random-bar__title a { color: #333; }
.bok-random-bar__title a:hover { color: #2E4A3D; }

@media (max-width: 600px) {
    .bok-random-bar { display: block; }
    .bok-random-bar__label { clip-path: none; padding: 9px 20px; }
    .bok-random-bar__title { padding: 13px 20px; }
}

/* ==================================================================
   4. Sidebar - Popular Posts
   The parent floats these, which collapses the widget and lets the next
   widget ride up over it. Flex row with a fixed picture instead.
   ================================================================== */

.block4_widget .block4_widget_content { overflow: hidden; }

.block4_widget .block-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 0 0 15px;
    margin: 0 0 15px;
    border-bottom: 1px solid #f0f0f0;
    float: none;
    width: auto;
    clear: both;
}

.block4_widget .block-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.block4_widget .block-thumb {
    flex: 0 0 92px;
    width: 92px;
    height: 66px;
    margin: 0;
    overflow: hidden;
    background: #efefef;
    border-radius: 2px;
}

.block4_widget .block-thumb a { display: block; width: 100%; height: 100%; }

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

.block4_widget .block-content {
    flex: 1 1 auto;
    min-width: 0;
}

.block4_widget .block-title {
    margin: 0 0 5px;
    font-size: 13.5px;
    line-height: 1.42;
}

.block4_widget .block-title a { color: #333; }
.block4_widget .block-title a:hover { color: #2E4A3D; }

.block4_widget .block-meta {
    font-size: 11px;
    letter-spacing: .04em;
    color: #a5a5a5;
}

/* the widgets below must never overlap it */
#secondary .widget,
.widget-area .widget,
.sidebar .widget {
    clear: both;
    margin-bottom: 34px;
}

#secondary .widget_categories li,
.widget_categories li {
    padding: 7px 0;
    border-bottom: 1px solid #f2f2f2;
}

.widget_categories li:last-child { border-bottom: 0; }

/* ==================================================================
   5. The feed and the archive grid
   ================================================================== */

.block1_list .entry-thumb,
.block1_grid .entry-thumb {
    overflow: hidden;
    background: #efefef;
}

.block1_list .entry-thumb img,
.block1_grid .entry-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 25 / 17;
    object-fit: cover;
}

/* a card with no picture keeps the row aligned instead of leaving a hole */
.block1_grid .entry-thumb:empty,
.block1_list .entry-thumb:empty {
    aspect-ratio: 25 / 17;
    background:
        repeating-linear-gradient(45deg, #f0efec 0 10px, #eae8e4 10px 20px);
}

.block1_list article,
.block1_grid article {
    margin-bottom: 30px;
}

.block1_list .entry-title,
.block1_grid .entry-title {
    line-height: 1.32;
}

.block1_list .entry-excerpt,
.block1_grid .entry-excerpt {
    color: #777;
    line-height: 1.68;
}

.block1_list .entry-category,
.block1_grid .entry-category {
    margin-bottom: 8px;
}

/* ==================================================================
   6. "Next page" button on the split posts
   ================================================================== */

.bok-nextpage {
    margin: 26px 0 30px;
    text-align: center;
}

.bok-nextpage__btn {
    display: inline-block;
    padding: 13px 30px;
    font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #fff !important;
    background: #2E4A3D;
    border-radius: 3px;
    text-decoration: none;
    transition: background .18s ease;
}

.bok-nextpage__btn:hover {
    background: #37826f;
    color: #fff !important;
}

/* the theme's own page links, for readers who scroll past the button */
.page-links {
    clear: both;
    margin: 22px 0;
    font-size: 13px;
}

.page-links a,
.page-links > span {
    display: inline-block;
    padding: 5px 11px;
    margin: 0 3px 4px 0;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
}

.page-links a:hover { border-color: #2E4A3D; color: #2E4A3D; }

/* ==================================================================
   7. Masthead, pagination and footer
   ================================================================== */

.site-branding .site-title a { letter-spacing: .045em; }

.site-branding .site-description {
    font-style: italic;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-size: 11px;
    color: #9a9a9a;
}

.home-sidebar { margin-bottom: 4px; }

.ft-paginate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.site-footer .footer-menu,
.site-footer .menu-footer-menu-container ul,
.site-footer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 26px;
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

.site-footer .footer-menu li,
.site-footer ul li {
    float: none;
    margin: 0;
    padding: 0;
}

.site-footer a { color: #2E4A3D; }
.site-footer a:hover { color: #37826f; }

/* ==================================================================
   8. Single post: breadcrumbs, tags, sharing, related posts
   ================================================================== */

.bok-crumbs {
    padding: 0 0 14px;
    margin: 0 0 22px;
    border-bottom: 1px solid #efefef;
    font-size: 12.5px;
    color: #999;
    line-height: 1.6;
}

.bok-crumbs a { color: #777; }
.bok-crumbs a:hover { color: #2E4A3D; }
.bok-crumbs__sep { margin: 0 5px; color: #c8c8c8; }
.bok-crumbs__current { color: #b0b0b0; }

.bok-block-heading {
    margin: 0 0 12px;
    font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #999;
}

/* --- tags --- */

.bok-tags { margin: 30px 0 0; }

.bok-tags__list { display: flex; flex-wrap: wrap; gap: 7px; }

.bok-tags__list a {
    display: inline-block;
    padding: 5px 11px;
    font-size: 12px;
    color: #666;
    background: #f4f4f4;
    border-radius: 3px;
}

.bok-tags__list a:hover { color: #fff; background: #2E4A3D; }

/* --- sharing --- */

.bok-share { margin: 28px 0 0; }

.bok-share__list { display: flex; flex-wrap: wrap; gap: 8px; }

.bok-share__btn {
    display: inline-block;
    padding: 9px 20px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .03em;
    color: #fff !important;
    background: #555;
    border-radius: 3px;
    text-decoration: none;
    transition: opacity .15s ease;
}

.bok-share__btn:hover { opacity: .87; color: #fff !important; }

.bok-share__btn--facebook  { background: #1877f2; }
.bok-share__btn--pinterest { background: #e60023; }
.bok-share__btn--x         { background: #14171a; }
.bok-share__btn--email     { background: #2E4A3D; }

/* --- related posts --- */

.bok-related {
    margin: 40px 0 0;
    padding-top: 28px;
    border-top: 1px solid #efefef;
}

.bok-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.bok-related__item { min-width: 0; }

.bok-related__thumb {
    display: block;
    margin-bottom: 10px;
    overflow: hidden;
    background: #efefef;
}

.bok-related__thumb img,
.bok-related__thumb .bok-thumb-placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 25 / 17;
    object-fit: cover;
    transition: transform .4s ease;
}

.bok-related__item:hover .bok-related__thumb img { transform: scale(1.05); }

.bok-related__cat { display: block; margin-bottom: 8px; }

.bok-related__title {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.36;
}

.bok-related__title a { color: #222; }
.bok-related__title a:hover { color: #2E4A3D; }

@media (max-width: 660px) {
    .bok-related__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
    .bok-related__grid { grid-template-columns: 1fr; }
}

/* ==================================================================
   9. Wider canvas, bigger pictures
   The parent theme caps every container at 1175px. That cap is what
   kept the featured images small - the grid can only be as wide as
   the box holding it. Open the box and the pictures grow with it.
   ================================================================== */

html body #content.container,
html body .site-content.container,
html body .site-header .container,
html body .header-main .container,
html body .navbar .container,
html body .topbar .container,
html body .site-footer .container,
html body .footer-widgets .container {
	max-width: min(1680px, 96vw);
	width: 100%;
}

/* Tiles scale to the new width. The lead spans two columns and two rows,
   so this height is doubled for the big one. */
html body .bok-mosaic { gap: 6px; }
html body .bok-mosaic--overlay { grid-auto-rows: 248px; }

html body .bok-mosaic--overlay .bok-tile--lead .bok-tile__title { font-size: 30px; }
html body .bok-mosaic--overlay .bok-tile__title { font-size: 16px; }

@media (max-width: 1240px) {
	html body .bok-mosaic--overlay { grid-auto-rows: 200px; }
	html body .bok-mosaic--overlay .bok-tile--lead .bok-tile__title { font-size: 25px; }
}
@media (max-width: 860px) {
	html body .bok-mosaic { grid-template-columns: repeat(2, 1fr); }
	html body .bok-mosaic--overlay { grid-auto-rows: 155px; }
	html body .bok-tile--lead { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 520px) {
	html body .bok-mosaic--overlay { grid-auto-rows: 128px; }
	html body .bok-mosaic--overlay .bok-tile--lead .bok-tile__title { font-size: 20px; }
}

/* ==================================================================
   10. The Cozy Stitch signup
   ================================================================== */

.bok-signup {
	background: #f7f5f1;
	border-top: 3px solid #2E4A3D;
	padding: 22px 20px 24px;
	margin-bottom: 26px;
	text-align: center;
}

.bok-signup__kicker {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #2E4A3D;
	font-weight: 700;
	margin: 0 0 6px;
}

.bok-signup__title {
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	font-size: 26px;
	font-weight: 600;
	margin: 0 0 8px;
	color: #222;
}

.bok-signup__text {
	font-size: 13.5px;
	color: #666;
	line-height: 1.5;
	margin: 0 0 14px;
}

.bok-signup__foot { margin: 12px 0 0; font-size: 12px; }
.bok-signup__foot a { color: #2E4A3D; text-decoration: none; }
.bok-signup__foot a:hover { text-decoration: underline; }

/* below the feed it has room to be a proper invitation rather than a box */
.home-sidebar-4 .bok-signup,
.home-sidebar.home-sidebar-4 .bok-signup {
	padding: 40px 30px 42px;
	margin-top: 10px;
}
.home-sidebar-4 .bok-signup__title { font-size: 36px; }
.home-sidebar-4 .bok-signup__text { font-size: 15px; max-width: 46ch; margin-inline: auto; }

/* ==================================================================
   11. Dropdown widgets - archives and categories
   Eleven years of months and 67 categories are unusable as lists.
   ================================================================== */

html body .widget select,
html body .widget_archive select,
html body .widget_categories select {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	background: #fff;
	font-size: 13.5px;
	color: #444;
	border-radius: 2px;
	cursor: pointer;
}
html body .widget select:focus {
	outline: none;
	border-color: #2E4A3D;
}

/* ==================================================================
   12. The full-width band at the top of the homepage
   The two mosaics and the random-article bar now sit ABOVE
   .content-inside, so nothing stands beside them. The sidebar and the
   newsletter box start below, alongside the numbered feed.
   ================================================================== */

html body .bok-home-top {
	width: 100%;
	margin: 0 0 34px;
}

html body .bok-home-top .home-sidebar { margin-bottom: 0; }

/* The band is ~1390px instead of 872px, so the tiles are wider and the
   rows need more height or the pictures go letterbox-shaped. */
html body .bok-home-top .bok-mosaic--overlay { grid-auto-rows: 272px; }

@media (max-width: 1240px) {
	html body .bok-home-top .bok-mosaic--overlay { grid-auto-rows: 215px; }
}
@media (max-width: 860px) {
	html body .bok-home-top .bok-mosaic--overlay { grid-auto-rows: 165px; }
}
@media (max-width: 520px) {
	html body .bok-home-top .bok-mosaic--overlay { grid-auto-rows: 135px; }
}

/* ==================================================================
   13. Type sized for the people who actually read this site
   Her readers are women of 50, 60 and 70. The theme shipped 15px grey
   body text; thecrochetcrowd.com - a Mediavine site in the same niche,
   measured live - runs 20px on a 36px line in near-black, with 28px
   list headings. These are those numbers.
   ================================================================== */

html body {
	font-size: 22px;
	line-height: 1.82;
	color: #1f1f1f;
}

/* --- article body --- */

html body .entry-content,
html body .entry-content p,
html body .entry-content li,
html body .entry-content td,
html body .entry-content th,
html body .entry-content dd,
html body .entry-content blockquote {
	font-size: 22px;
	line-height: 40px;
	color: #1f1f1f;
}

html body .entry-content p { margin-bottom: 1.35em; }
html body .entry-content li { margin-bottom: .5em; }


/* In-body links: the theme accent teal is about 2.6:1 on white, which is
   below the readable threshold. Darker, and underlined so it reads as a
   link without relying on colour alone. */
html body .entry-content a {
	color: #2c7c69;
	text-decoration: underline;
	text-underline-offset: 2px;
}
html body .entry-content a:hover { color: #1d5c4d; }

/* --- headings --- */

html body .entry-title,
html body.single .entry-title {
	color: #2B2B2B;
	font-weight: 700;
}

html body.single .entry-title,
html body.page .entry-title {
	font-size: 40px;
	line-height: 1.22;
}

html body .entry-content h2 {
	font-size: 30px;
	line-height: 1.32;
	font-weight: 700;
	color: #2B2B2B;
	margin-top: 1.5em;
}

html body .entry-content h3 {
	font-size: 25px;
	line-height: 1.35;
	font-weight: 700;
	color: #2B2B2B;
	margin-top: 1.4em;
}

html body .entry-content h4 {
	font-size: 21px;
	line-height: 1.4;
	font-weight: 700;
	color: #2B2B2B;
}

/* --- the homepage / archive feed --- */

html body .block1_list .entry-title,
html body .block1_grid .entry-title {
	font-size: 28px;
	line-height: 1.28;
	font-weight: 700;
	color: #2B2B2B;
}

html body .block1_list .entry-title a,
html body .block1_grid .entry-title a { color: #2B2B2B; }
html body .block1_list .entry-title a:hover,
html body .block1_grid .entry-title a:hover { color: #2c7c69; }

html body .block1_list .entry-excerpt,
html body .block1_grid .entry-excerpt {
	font-size: 18px;
	line-height: 1.7;
	color: #4a4a4a;
}

html body .entry-meta,
html body .block1_list .entry-meta,
html body .block1_grid .entry-meta {
	font-size: 14px;
	color: #6b6b6b;
}

/* --- the mosaics --- */

html body .bok-mosaic--overlay .bok-tile__title { font-size: 19px; line-height: 1.34; }
html body .bok-mosaic--overlay .bok-tile--lead .bok-tile__title { font-size: 34px; line-height: 1.22; }

html body .bok-mosaic--cards .bok-tile__title {
	font-size: 20px;
	line-height: 1.32;
	font-weight: 700;
}
html body .bok-mosaic--cards .bok-tile--lead .bok-tile__title { font-size: 30px; line-height: 1.22; }
html body .bok-mosaic--cards .bok-tile__title a { color: #2B2B2B; }

html body .bok-mosaic--cards .bok-tile__excerpt {
	font-size: 17px;
	line-height: 1.65;
	color: #555;
}
html body .bok-mosaic--cards .bok-tile__meta { font-size: 13px; color: #7a7a7a; }

@media (max-width: 1240px) {
	html body .bok-mosaic--overlay .bok-tile--lead .bok-tile__title { font-size: 28px; }
	html body .bok-mosaic--overlay .bok-tile__title { font-size: 17px; }
}
@media (max-width: 520px) {
	html body .bok-mosaic--overlay .bok-tile--lead .bok-tile__title { font-size: 22px; }
}

/* --- random article bar --- */

html body .bok-random-bar__label { font-size: 14px; }
html body .bok-random-bar__title { font-size: 20px; line-height: 1.4; }
html body .bok-random-bar__title a { color: #2B2B2B; }

/* --- category labels --- */

html body .bok-badge,
html body a.entry-category,
html body .meta-category a {
	font-size: 12px;
	padding: 5px 11px;
}

/* --- navigation --- */

html body .main-navigation a,
html body .navbar .menu > li > a,
html body #site-navigation a {
	font-size: 17px;
}

/* --- sidebar --- */

html body #secondary .widget,
html body .widget-area .widget { font-size: 18px; line-height: 1.7; }

html body .widget-title,
html body #secondary .widget-title {
	font-size: 20px;
	font-weight: 700;
	color: #2B2B2B;
}

html body .block4_widget .block-title { font-size: 17px; line-height: 1.4; }
html body .block4_widget .block-title a { color: #2B2B2B; }
html body .block4_widget .block-meta { font-size: 13px; color: #6f6f6f; }

html body #secondary .widget li,
html body .widget-area .widget li { font-size: 18px; line-height: 1.6; }

html body .widget select,
html body .widget_archive select,
html body .widget_categories select { font-size: 17px; padding: 12px 14px; }

/* --- single-post furniture --- */

html body .bok-crumbs { font-size: 15px; color: #6b6b6b; }
html body .bok-crumbs a { color: #5a5a5a; }
html body .bok-crumbs__current { color: #8a8a8a; }

html body .bok-block-heading { font-size: 14px; color: #6b6b6b; }

html body .bok-tags__list a { font-size: 15px; padding: 7px 14px; color: #4a4a4a; }

html body .bok-share__btn { font-size: 15px; padding: 11px 24px; }

html body .bok-related__title { font-size: 19px; line-height: 1.34; font-weight: 700; }
html body .bok-related__title a { color: #2B2B2B; }

/* --- the newsletter box --- */

html body .bok-signup__kicker { font-size: 12px; }
html body .bok-signup__title { font-size: 30px; }
html body .bok-signup__text { font-size: 18px; line-height: 1.6; color: #4a4a4a; }
html body .bok-signup__foot { font-size: 16px; }
html body .home-sidebar-4 .bok-signup__title { font-size: 40px; }
html body .home-sidebar-4 .bok-signup__text { font-size: 20px; }

/* --- pagination and footer --- */

html body .ft-paginate,
html body .ft-paginate a,
html body .ft-paginate .page-numbers { font-size: 17px; }

html body .site-footer,
html body .site-footer a,
html body .site-info { font-size: 17px; line-height: 1.7; }

html body .bok-nextpage__btn { font-size: 16px; padding: 15px 34px; }
html body .page-links { font-size: 16px; }

/* --- small screens: 20px is right on a phone too, but the big display
       sizes have to come down or they wrap to five words a line --- */

@media (max-width: 782px) {
	html body .block1_list .entry-title,
	html body .block1_grid .entry-title { font-size: 24px; }
	html body.single .entry-title,
	html body.page .entry-title { font-size: 30px; }
	html body .entry-content h2 { font-size: 26px; }
	html body .entry-content h3 { font-size: 22px; }
	html body .home-sidebar-4 .bok-signup__title { font-size: 30px; }
}

@media (max-width: 520px) {
	html body .entry-content,
	html body .entry-content p,
	html body .entry-content li { font-size: 20px; line-height: 1.78; }
	html body.single .entry-title,
	html body.page .entry-title { font-size: 27px; }
}

/* ==================================================================
   14. Phone gutters
   The parent theme pads .container AND .content-inside, then adds a
   margin on top of both, so a 375px phone was left a 265px column -
   110px of a small screen spent on empty margin. Most of her readers
   arrive from Facebook and Pinterest, on a phone. One gutter is enough.
   ================================================================== */

@media (max-width: 782px) {
	html body .site-content.container,
	html body #content.container {
		max-width: 100%;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-left: 16px;
		padding-right: 16px;
	}

	html body .site-content .content-inside {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	html body .bok-home-top { margin-bottom: 26px; }
}

/* ==================================================================
   15. The mosaic on a phone
   Two columns on a 375px screen leaves each small tile about 165px
   wide, and these titles run long ("7 Free Top-Down Raglan Crochet
   Cardigan Patterns (No Seaming Stress!)"). At 19px that is six lines
   and the picture disappears behind its own headline. Taller rows and
   a slightly smaller tile headline - still larger than the 14px the
   theme shipped, and this is a caption over a photograph, not the
   body text the size complaint was about.
   ================================================================== */

@media (max-width: 560px) {
	html body .bok-home-top .bok-mosaic--overlay { grid-auto-rows: 168px; }

	html body .bok-mosaic--overlay .bok-tile__title {
		font-size: 16px;
		line-height: 1.3;
	}

	html body .bok-mosaic--overlay .bok-tile--lead .bok-tile__title {
		font-size: 22px;
		line-height: 1.24;
	}

	html body .bok-mosaic--overlay .bok-tile__body { padding: 30px 12px 11px; }

	html body .bok-mosaic--overlay .bok-tile__cat { margin-bottom: 5px; }

	html body .bok-badge,
	html body a.entry-category,
	html body .meta-category a {
		font-size: 11px;
		padding: 4px 8px;
		letter-spacing: .06em;
	}
}

/* WhatsApp joins the share row (added with the other two sites, 2026-09-03). */
html body .bok-share__btn--whatsapp { background: #1da851; }

/* ==================================================================
   16. Article column width - CORRECTED 2026-09-03
   The first attempt held the prose to 728px INSIDE an 872px content
   area. That gave the right line length but left a 206px strip of dead
   white between the end of every line and the sidebar, which is what
   Gabi circled in red. Pictures kept the full 872px, so they no longer
   lined up with the text either.
   The fix is to narrow the COLUMN, not the paragraphs inside it - which
   is what thecrochetcrowd.com and makeanddocrew.com actually do. Text
   and images then share one edge and the sidebar sits right beside them.
   ================================================================== */

html body.single #content.site-content.container,
html body.page #content.site-content.container {
	max-width: min(1180px, 96vw);
}

/* Pictures that are narrower than the column look accidental when the
   text runs wider than they do. Centre them instead of stranding them
   on the left. */
html body.single .entry-content > figure,
html body.single .entry-content > p > img,
html body.page .entry-content > figure {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

html body .entry-content img {
	height: auto;
}

/* ==================================================================
   17. Share icons under the featured image, and categories
   Icons only up here - the tags belong at the foot of the post, once.
   ================================================================== */

html body .bok-share-icons {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 26px;
}

html body .bok-share-icons__label {
	font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6b6b6b;
	margin-right: 2px;
}

html body .bok-share-icons__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: #fff !important;
	background: #555;
	text-decoration: none !important;
	transition: transform .14s ease, opacity .14s ease;
}

html body .bok-share-icons__btn:hover,
html body .bok-share-icons__btn:focus {
	opacity: .88;
	transform: translateY(-2px);
	color: #fff !important;
}

html body .bok-share-icons__btn:focus-visible {
	outline: 3px solid #2B2B2B;
	outline-offset: 2px;
}

html body .bok-share-icons__btn svg { display: block; }

html body .bok-share-icons__btn--facebook  { background: #1877f2; }
html body .bok-share-icons__btn--pinterest { background: #e60023; }
html body .bok-share-icons__btn--x         { background: #14171a; }

/* --- categories at the foot --- */

html body .bok-cats { margin: 30px 0 0; }

html body .bok-cats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

html body .bok-cats__list a {
	display: inline-block;
	padding: 8px 16px;
	font-size: 15px;
	font-weight: 600;
	color: #fff !important;
	background: #9C3B2E;
	border-radius: 3px;
	text-decoration: none !important;
}

html body .bok-cats__list a:hover { opacity: .87; color: #fff !important; }

@media (max-width: 520px) {
	html body .bok-share-icons { gap: 8px; }
	html body .bok-share-icons__label { font-size: 12px; }
}

/* ==================================================================
   18. Square share buttons, and the floating rail
   Round icons up top and square ones at the foot read as two
   different sets of buttons. They are the same thing, so they now
   look the same thing: square, everywhere.
   ================================================================== */

html body .bok-share-icons__btn { border-radius: 3px; }

html body .bok-share-rail {
	position: fixed;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 900;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 10px;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}

html body .bok-share-rail__label {
	font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #7a7a7a;
	margin-bottom: 2px;
}

html body .bok-share-rail__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 3px;
	color: #fff !important;
	background: #555;
	text-decoration: none !important;
	transition: transform .14s ease, opacity .14s ease;
}

html body .bok-share-rail__btn:hover,
html body .bok-share-rail__btn:focus {
	opacity: .88;
	transform: translateX(2px);
	color: #fff !important;
}

html body .bok-share-rail__btn:focus-visible {
	outline: 3px solid #2B2B2B;
	outline-offset: 2px;
}

html body .bok-share-rail__btn svg { display: block; }

html body .bok-share-rail__btn--facebook  { background: #1877f2; }
html body .bok-share-rail__btn--pinterest { background: #e60023; }
html body .bok-share-rail__btn--x         { background: #14171a; }

/* No room beside the article below this width - it would cover the text. */
@media (max-width: 1200px) {
	html body .bok-share-rail { display: none; }
}

/* ------------------------------------------------------------------
   Pattern card grid - added 2026-09-13 for the butterfly hub.
   Reusable on any roundup: wrap cards in .bok-pattern-grid.
   ------------------------------------------------------------------ */
.bok-pattern-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
	gap:26px 22px;
	margin:26px 0 34px;
}
.bok-pattern-card{
	display:flex;
	flex-direction:column;
}
.bok-pattern-card .bok-thumb{
	position:relative;
	display:block;
	overflow:hidden;
	border-radius:6px;
	background:#f1ecef;
	aspect-ratio:4/3;
	line-height:0;
}
.bok-pattern-card .bok-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .35s ease;
}
.bok-pattern-card .bok-thumb:hover img,
.bok-pattern-card .bok-thumb:focus-visible img{
	transform:scale(1.045);
}
.bok-pattern-card .bok-free{
	position:absolute;
	left:8px;
	bottom:8px;
	background:#9C3B2E;
	color:#fff;
	font-size:11px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	line-height:1;
	padding:5px 8px;
	border-radius:3px;
}
.bok-pattern-card .bok-card-title{
	margin:11px 0 0;
	font-size:16px;
	font-weight:600;
	line-height:1.34;
}
.bok-pattern-card .bok-card-title a{
	color:inherit;
	text-decoration:none;
}
.bok-pattern-card .bok-card-title a:hover{
	color:#9C3B2E;
	text-decoration:underline;
}
.bok-pattern-card .bok-card-note{
	margin:5px 0 0;
	font-size:14px;
	line-height:1.45;
	color:#5F6B5C;
}
@media (max-width:480px){
	.bok-pattern-grid{
		grid-template-columns:repeat(2,1fr);
		gap:20px 14px;
	}
	.bok-pattern-card .bok-card-title{font-size:14.5px;}
	.bok-pattern-card .bok-card-note{display:none;}
}

/* ------------------------------------------------------------------
   Reference tables + callouts - added 2026-09-14 for the crochet
   abbreviations page. Reusable on any chart or reference article.
   ------------------------------------------------------------------ */
.bok-ref-wrap{
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	margin:22px 0 30px;
	border:1px solid #E0DBCF;
	border-radius:6px;
}
table.bok-ref{
	width:100%;
	min-width:460px;
	border-collapse:collapse;
	font-size:16px;
	line-height:1.5;
	margin:0;
}
table.bok-ref th{
	background:#9C3B2E;
	color:#fff;
	text-align:left;
	font-weight:600;
	font-size:13px;
	letter-spacing:.05em;
	text-transform:uppercase;
	padding:11px 14px;
	white-space:nowrap;
}
table.bok-ref td{
	padding:11px 14px;
	border-top:1px solid #EFE9DD;
	vertical-align:top;
}
table.bok-ref tbody tr:nth-child(even){background:#faf6f9;}
table.bok-ref tbody tr:hover{background:#F2EDE1;}
table.bok-ref .bok-abbr{
	font-weight:700;
	color:#9C3B2E;
	white-space:nowrap;
}
table.bok-ref .bok-uk{color:#5F6B5C;}

/* highlighted row - used for the US/UK terms that collide */
table.bok-ref tr.bok-watch td{background:#EFE9DD;}
table.bok-ref tr.bok-watch:hover td{background:#fbecd2;}

.bok-callout{
	background:#f6eaf1;
	border-left:4px solid #9C3B2E;
	border-radius:0 6px 6px 0;
	padding:18px 22px;
	margin:24px 0 30px;
}
.bok-callout p{margin:0 0 10px;}
.bok-callout p:last-child{margin-bottom:0;}
.bok-callout strong{color:#5d1b4c;}

.bok-example{
	background:#f7f5f6;
	border:1px solid #E0DBCF;
	border-radius:6px;
	padding:18px 22px;
	margin:22px 0 26px;
}
.bok-example .bok-line{
	font-family:Consolas,Menlo,"Courier New",monospace;
	font-size:15px;
	line-height:1.65;
	background:#fff;
	border:1px solid #EFE9DD;
	border-radius:4px;
	padding:12px 14px;
	margin:0 0 14px;
	overflow-x:auto;
}
.bok-example ol{margin:0;padding-left:22px;}
.bok-example li{margin-bottom:7px;}

@media (max-width:600px){
	table.bok-ref{font-size:15px;}
	table.bok-ref th,table.bok-ref td{padding:9px 11px;}
}

/* chart figures */
figure.bok-chart{margin:26px 0 30px;text-align:center;}
figure.bok-chart img{max-width:min(560px,100%);height:auto;border:1px solid #E0DBCF;border-radius:8px;display:inline-block;}
figure.bok-chart figcaption{margin:12px auto 0;max-width:560px;font-size:14.5px;line-height:1.5;color:#5F6B5C;font-style:italic;}

/* update notice - a pattern that is no longer free or no longer available */
.bok-notice{background:#EFE9DD;border:1px solid #edd9ae;border-left:4px solid #d69e2e;border-radius:6px;padding:16px 20px;margin:0 0 26px;}
.bok-notice p{margin:0;font-size:16px;line-height:1.55;color:#7a4f10;}
.bok-notice strong{color:#5c3a08;}

/* ==================================================================
   BEST OF KNITTING PALETTE  -  locked 2026-09-23
   pine #2E4A3D | ochre #D69A2D | oat #EFE9DD | charcoal #2B2B2B
   Page background stays white so Ezoic units sit clean.
   ================================================================== */
:root{
  --bok-pine:#2E4A3D;
  --bok-pine-dk:#22372D;
  --bok-ochre:#D69A2D;
  --bok-ochre-ink:#3A2606;
  --bok-oat:#EFE9DD;
  --bok-oat-line:#DDD6C7;
  --bok-charcoal:#2B2B2B;
  --bok-madder:#9C3B2E;
}

/* --- BEST FOR label: the recurring editorial device ------------- */
.bok-bestfor{
  display:inline-block;
  background:var(--bok-ochre);
  color:var(--bok-ochre-ink);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:4px;
  margin-bottom:8px;
}

/* --- WATCH FOR: the honest-limitation line ---------------------- */
.bok-watchfor{
  color:var(--bok-madder);
  font-size:.95em;
}
.bok-watchfor::before{
  content:"Watch for: ";
  font-weight:600;
}

/* --- THE FINDER: homepage hero grid ----------------------------- */
.bok-finder{
  background:var(--bok-oat);
  border-radius:12px;
  padding:22px 20px;
  margin:0 0 32px;
}
.bok-finder__head{
  margin:0 0 14px;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#5D6B5C;
}
.bok-finder__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
}
.bok-finder__tile{
  display:block;
  background:#fff;
  border:1px solid var(--bok-oat-line);
  border-radius:8px;
  padding:14px 10px;
  text-align:center;
  font-size:15px;
  color:var(--bok-pine);
  text-decoration:none;
  transition:background .15s,color .15s,border-color .15s;
}
.bok-finder__tile:hover{
  background:var(--bok-pine);
  border-color:var(--bok-pine);
  color:#fff;
}

/* --- category badge set: muted yarn dyes, not a rainbow --------- */
.bok-badge{background:var(--bok-pine); color:#fff;}
.bok-badge--patterns{background:#C9862A; color:#3A2606;}
.bok-badge--yarn{background:var(--bok-madder); color:#fff;}
.bok-badge--learn{background:#46617A; color:#fff;}
.bok-badge--tools{background:#6B4266; color:#fff;}
.bok-badge--seasonal{background:#7A8B4F; color:#1E2410;}