/* SKS custom blog article — ported from the Scottish_Kilt_Blog_standalone prototype.
   Most layout is inline on the elements; this file carries the hover states, the
   container-query responsive rules, and the prose rules that style blog.post.body. */

/* Cornerstone wraps the page block in .body > .container (max-width + side padding) and the
   theme's typography cascades in. The prototype is a full-bleed page (its own 1240px .skb-wrap)
   with base font Jost and rust links — neutralise the container exactly like sks-bc-page.css
   does for .sks-pdp/.sks-plp, then restate the prototype's .skb base rules here. */
.body > .container:has(.sks-blog-article) { padding-left: 0; padding-right: 0; max-width: none; }
.body:has(.sks-blog-article) { margin-top: 0 !important; padding-top: 0 !important; }

.sks-blog-article { container: skb / inline-size; background: #fff; }
/* hidden must beat inline display: — same trap as the landing page's empty-state box
   (e.g. #skb-prevnext is hidden + style="display:grid" until the JS fills it) */
.sks-blog-article [hidden] { display: none !important; }
.sks-blog-article *, .sks-blog-article *::before, .sks-blog-article *::after { box-sizing: border-box; min-width: 0; }

/* prototype .skb base — stops theme fonts/colors bleeding into the chrome */
.sks-blog-article { font-family: Jost, sans-serif; color: #1A1A1A; -webkit-font-smoothing: antialiased; }
.sks-blog-article a { color: #B8520A; text-decoration: none; }
.sks-blog-article a:hover { color: #8F3F07; }
.sks-blog-article :focus-visible { outline: 2px solid #B8520A; outline-offset: 2px; }
.sks-blog-article button { font-family: inherit; cursor: pointer; }
.sks-blog-article img { display: block; }
.sks-blog-article h1, .sks-blog-article h2, .sks-blog-article h3, .sks-blog-article h4, .sks-blog-article h5 { font-family: inherit; color: inherit; text-transform: none; }
.sks-blog-article p, .sks-blog-article li, .sks-blog-article td, .sks-blog-article th, .sks-blog-article figcaption { font-family: inherit; font-size: inherit; line-height: inherit; }

/* ---- prototype .skb-* interaction + defaults ---- */
.skb-crumbshort { display: none; }
.skb-tocm { display: none; }
.skb-card { transition: border-color .18s, box-shadow .18s; }
.skb-card:hover { border-color: #C9BFAE !important; box-shadow: 0 6px 18px rgba(26,26,26,.07); }
.skb-tl:hover { color: #B8520A !important; }
.skb-imgl img { transition: transform .4s; }
.skb-imgl:hover img { transform: scale(1.03); }
.skb-soc { transition: color .15s, border-color .15s, background .15s; }
.skb-soc:hover { background: #F5F0E8 !important; }
.skb-soc:hover span { transform: translateY(-1px); }
.skb-soc span { transition: transform .15s; }
.skb-btn-p:hover { background: #9A4408 !important; }
.skb-tocl:hover { color: #B8520A !important; }
.skb-tocl[aria-current="true"] { color: #B8520A !important; border-left-color: #B8520A !important; font-weight: 600 !important; }
.skb-pnl:hover .skb-pnarr { transform: translateX(-4px); }
.skb-pnr:hover .skb-pnarr { transform: translateX(4px); }
.skb-card:hover .skb-tl { color: #B8520A; }
.skb-read:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- prose: style blog.post.body inside .skb-bodyhtml ---- */
.skb-bodyhtml { font-family: Assistant, sans-serif; font-size: 18px; line-height: 1.7; color: #2A2622; text-wrap: pretty; }
.skb-bodyhtml > *:first-child { margin-top: 0; }
.skb-bodyhtml p { margin: 0 0 22px; }
.skb-bodyhtml a { color: #B8520A; text-decoration: underline; text-underline-offset: 3px; }
.skb-bodyhtml a:hover { color: #8B1F1F; }
.skb-bodyhtml h2 { font-family: Assistant, sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; margin: 44px 0 16px; scroll-margin-top: 96px; letter-spacing: -.01em; }
.skb-bodyhtml h3 { font-family: Assistant, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 32px 0 12px; scroll-margin-top: 96px; }

/* Posts written in the admin WYSIWYG carry pasted inline styles (font-size:16px;
   color:#808080; text-align:justify …) — force the design's prose look over them.
   figcaption/small/code keep their own sizes via the later rules. */
.skb-bodyhtml :is(p, li, b, strong, em, span, h2, h3, h4) { color: inherit !important; font-family: inherit !important; }
.skb-bodyhtml :is(p, li, span) { font-size: inherit !important; line-height: inherit !important; }
.skb-bodyhtml p { text-align: justify !important; }
.skb-bodyhtml h4 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; }
.skb-bodyhtml ul, .skb-bodyhtml ol { margin: 0 0 22px; padding-left: 22px; }
.skb-bodyhtml li { margin: 0 0 10px; }
.skb-bodyhtml img { max-width: 100%; height: auto; border-radius: 4px; }
.skb-bodyhtml figure { margin: 24px 0; }
.skb-bodyhtml figure img { display: block; width: 100%; border-radius: 4px; }
.skb-bodyhtml figcaption { margin-top: 8px; font-size: 13px; color: #8a8279; text-align: center; }
.skb-bodyhtml blockquote { border-left: 3px solid #8B1F1F; background: #faf6ef; padding: 14px 18px; margin: 20px 0; border-radius: 0 8px 8px 0; font-style: italic; }
.skb-bodyhtml iframe, .skb-bodyhtml video { max-width: 100%; }

/* tables */
.skb-bodyhtml table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.45; margin: 24px 0; border: 1px solid #e8dfd0; border-radius: 4px; overflow: hidden; }
.skb-bodyhtml th, .skb-bodyhtml td { border: 1px solid #e8dfd0; padding: 12px 16px; text-align: left; vertical-align: top; }
.skb-bodyhtml thead th { background: #f5f0e8; font-family: Jost, sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #4a4440; font-weight: 600; }

/* FAQ accordion (our body uses <section class="sks-faq"><details class="sks-faq__item">) */
.sks-blog-article .sks-faq { border-top: 1px solid #e8dfd0; margin: 20px 0 0; }
.sks-blog-article .sks-faq__item { border-bottom: 1px solid #e8dfd0; background: transparent; }
.sks-blog-article .sks-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 4px; font-family: Assistant, sans-serif; font-size: 18px; font-weight: 700; color: #1a1a1a; line-height: 1.3; }
.sks-blog-article .sks-faq__item summary::-webkit-details-marker { display: none; }
.sks-blog-article .sks-faq__item summary::after { content: '+'; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px; border: 1px solid #d9d2c5; display: grid; place-items: center; font-size: 18px; color: #B8520A; font-weight: 400; line-height: 1; }
.sks-blog-article .sks-faq__item[open] summary::after { content: '\2212'; }
.sks-blog-article .sks-faq__a { padding: 0 4px 20px; font-size: 17px; color: #2a2622; }
.sks-blog-article .sks-faq__a > *:first-child { margin-top: 0; }
.sks-blog-article .sks-faq__a > *:last-child { margin-bottom: 0; }

/* ---- responsive (container queries on .sks-blog-article) ---- */
@container skb (max-width: 1023px) {
  .skb-art { grid-template-columns: minmax(0, 1fr) !important; }
  .skb-tocside { display: none !important; }
  .skb-tocm { display: block !important; }
  .skb-related { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* keep the full Home / Blog / title crumb on mobile (the bare "‹ Blog" short
     crumb looked broken); ellipsize the title so it stays on one line */
  .skb-crumbfull { flex-wrap: nowrap !important; }
  .skb-crumbfull [aria-current="page"] { display: inline-block; max-width: 55vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .skb-ah1 { font-size: 32px !important; }
  .skb-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .skb-apanel { margin: -110px 20px 0 20px !important; padding: 28px 24px !important; }
}
@container skb (max-width: 639px) {
  /* "Our collections" tiles: 2fr/1fr grid -> single column (labels overflowed on phones) */
  .skb-tiles { grid-template-columns: 1fr !important; grid-template-rows: none !important; height: auto !important; }
  .skb-tiles .skb-tile { height: 200px; }
  .skb-tiles .skb-tile:first-child { grid-row: auto !important; height: 260px; }
  .skb-tiles .skb-tile span { font-size: 15px !important; letter-spacing: .18em !important; }
  .skb-nlform { flex-direction: column !important; }
  .skb-ahero { height: 320px !important; }
  .skb-apanel { margin: -80px 0 0 0 !important; padding: 24px 16px !important; max-width: none !important; }
  .skb-related { grid-template-columns: 1fr !important; }
  .skb-pn { grid-template-columns: 1fr !important; }
  .skb-cform { grid-template-columns: 1fr !important; }
  .skb-ah1 { font-size: 28px !important; }
  .skb-bodyhtml { font-size: 17px; }
}

/* ---- fixed 4-product strip (owner, 2026-10-09): 4 -> 2 -> 1 columns ---- */
@container skb (max-width: 1023px) { .skb-prods4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@container skb (max-width: 639px) { .skb-prods4 { grid-template-columns: 1fr !important; } }

/* ---- product strip: same foundation the collection grid gets from sks-bc-page.css ---- */
.skb-prods4 { --font-body-family: Assistant, sans-serif; --font-heading-family: Assistant, sans-serif; --font-body-scale: 1; --font-heading-scale: 1; --color-foreground: 18,18,18; --color-background: 255,255,255; font-family: Assistant, sans-serif; font-size: 16px; line-height: 1.8; color: rgba(18, 18, 18, 0.75); text-align: left; }
.skb-prods4 a { text-decoration: none; }

/* ---- FAQ relocated below the product strip (keeps the prose look outside the body wrapper) ---- */
.skb-faqwrap { margin: 40px 0 0; font-family: Assistant, sans-serif; font-size: 18px; line-height: 1.7; color: #2A2622; }
.skb-faqwrap h2 { font-family: Assistant, sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; margin: 0 0 16px; letter-spacing: -.01em; }
.skb-faqwrap h3 { font-family: Assistant, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0 0 12px; }