/* ============================================================
   OCEX Blog
   Colours and sizes are CSS custom properties with neutral defaults: a theme can override
   them on :root (see the README). Dark mode follows data-ocex-theme="dark" on the html element.
   ============================================================ */
:root {
  --ocex-blog-accent: #229ac8;       /* backgrounds: the contents tab, tag hover */
  --ocex-blog-accent-text: #fff;     /* text on the accent colour */
  --ocex-blog-link: #1b7fa5;         /* accent-coloured text: hover links, prices */
  --ocex-blog-text: #2b3440;
  --ocex-blog-muted: #6b7280;
  --ocex-blog-border: rgba(0,0,0,.1);
  --ocex-blog-surface: #fff;
  --ocex-blog-chip: #eceff3;
  --ocex-blog-gap: 15px;
}
[data-ocex-theme="dark"] {
  --ocex-blog-link: #8ec0ea;
  --ocex-blog-text: #c8d0da;
  --ocex-blog-muted: #98a2b0;
  --ocex-blog-border: rgba(255,255,255,.14);
  --ocex-blog-surface: #262a33;
  --ocex-blog-chip: #333846;
}

/* --- Article typography ------------------------------------ */
.ocex-blog-post #content > ul.list-inline { margin-bottom: 18px; }

.ocex-blog-article p,
.ocex-blog-article li { line-height: 1.75; }
.ocex-blog-article > p,
.ocex-blog-article > ul,
.ocex-blog-article > ol,
.ocex-blog-lead { max-width: 72ch; }
.ocex-blog-article img { max-width: 100%; height: auto; }

/* Article lead paragraph (short description): the summary under the title. Larger and paler
   than the body text - visually distinct, but not loud. */
.ocex-blog-lead {
  font-size: 1.12em;
  line-height: 1.6;
  color: var(--ocex-blog-muted);
  margin: 0 0 20px;
  padding-left: 14px;
  border-left: 3px solid var(--ocex-blog-border);
}

/* Header image above the text */
.ocex-blog-hero { margin: 0 0 20px; }
.ocex-blog-hero .thumbnail { margin-bottom: 0; }
.ocex-blog-hero img { margin: 0 auto; }

/* --- Table of contents: tab sticking out from the right edge ---
   It lives OUTSIDE the text flow (at the end of the body, position: fixed), so it
   pushes nothing aside and does not overlap the content. On mouse hover or keyboard
   focus it slides open; on touch screens a tap on the tab opens it (the JS adds the
   .open class). */
.ocex-toc {
  position: fixed;
  right: 0;
  top: 28vh;
  z-index: 1030;
  display: flex;
  align-items: flex-start;
  transform: translateX(calc(100% - 38px));
  transition: transform .22s ease;
  font-size: 13px;
}
.ocex-toc:hover,
.ocex-toc:focus-within,
.ocex-toc.open { transform: translateX(0); }

.ocex-toc-tab {
  flex: 0 0 38px;
  width: 38px;
  border: 0;
  border-radius: 4px 0 0 4px;
  background: var(--ocex-blog-accent);
  color: var(--ocex-blog-accent-text);
  padding: 14px 0 16px;
  cursor: pointer;
  box-shadow: -1px 1px 6px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ocex-toc-tab span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
}
.ocex-toc-tab:focus { outline: 2px solid rgba(255,255,255,.6); outline-offset: -4px; }

.ocex-toc-panel {
  width: 268px;
  max-height: 62vh;
  overflow-y: auto;
  background: var(--ocex-blog-surface);
  border: 1px solid var(--ocex-blog-border);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  box-shadow: -2px 2px 12px rgba(0,0,0,.12);
  padding: 12px 14px;
}
.ocex-toc-panel ul { list-style: none; margin: 0; padding: 0; }
.ocex-toc-panel li { margin: 2px 0; line-height: 1.4; }
.ocex-toc-l3,
.ocex-toc-l4 { padding-left: 14px; font-size: .95em; }
.ocex-toc-panel a {
  display: block;
  padding: 4px 6px;
  border-radius: 3px;
  color: var(--ocex-blog-text);
  text-decoration: none;
}
.ocex-toc-panel a:hover,
.ocex-toc-panel a:focus { background: rgba(127,127,127,.14); color: var(--ocex-blog-link); text-decoration: none; }

/* Mobile: narrower tab, and the panel is almost full width - here it may overlap the content */
@media (max-width: 767px) {
  .ocex-toc { top: auto; bottom: 72px; transform: translateX(calc(100% - 34px)); }
  .ocex-toc-tab { flex-basis: 34px; width: 34px; padding: 11px 0 13px; }
  .ocex-toc-tab span { display: none; }
  .ocex-toc-panel { width: 76vw; max-width: 320px; max-height: 56vh; }
}

/* Hidden when printing */
@media print { .ocex-toc { display: none; } }

/* --- Tags --------------------------------------------------- */
.ocex-blog-tags { margin: 26px 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ocex-blog-tags-label { color: var(--ocex-blog-muted); font-size: 13px; margin-right: 3px; }
.ocex-tag {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 11px;
  background: var(--ocex-blog-chip);
  color: var(--ocex-blog-text);
  font-size: 12px;
  line-height: 17px;
  text-decoration: none;
}
.ocex-tag:hover,
.ocex-tag:focus { background: var(--ocex-blog-accent); color: var(--ocex-blog-accent-text); text-decoration: none; }

/* --- Blocks at the end of the article / on the product page ---- */
.ocex-blog-block { margin: 30px 0 6px; clear: both; }
.ocex-blog-block > h3 {
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ocex-blog-muted);
  border-bottom: 1px solid var(--ocex-blog-border);
  padding-bottom: 7px;
  margin-bottom: 14px;
}

/* --- Gallery ------------------------------------------------ */
.ocex-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.ocex-gal-item { display: block; overflow: hidden; border-radius: 4px; border: 1px solid var(--ocex-blog-border); }
.ocex-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.ocex-gal-item:hover img { transform: scale(1.04); }

/* --- Cards (category page, search, related posts, product page, featured block) ---- */
.ocex-card .thumbnail {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
  overflow: hidden;
  background: var(--ocex-blog-surface);
  border-color: var(--ocex-blog-border);
}
.ocex-card-image { display: block; }
.ocex-card-image img { width: 100%; height: auto; display: block; }
.ocex-card .caption { flex: 1 1 auto; padding: 14px 6px 6px; min-width: 0; }
.ocex-card .caption h4 { margin-top: 0; font-size: 17px; line-height: 1.35; }
.ocex-card .caption p { font-size: 14px; }
/* the button of a post card sits at the bottom edge, whatever the length of the title and the text */
.ocex-card .thumbnail > .caption { display: flex; flex-direction: column; }
.ocex-card .thumbnail > .caption > .btn { align-self: flex-start; margin-top: auto; }

/* the product card of the related-products block keeps the look of the .product-thumb of the theme */
.ocex-card .product-thumb { height: 100%; margin-bottom: 0; }
.ocex-card .product-thumb .button-group button { width: 100%; float: none; }

/* Category / search result grid: the columns follow the real width of the content area (with or
   without side columns); min(100%, ...) keeps the single column inside a narrow phone screen. */
.ocex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

/* Cards in a row that scrolls sideways (plain CSS, no carousel library). The number of cards
   per screen width comes from --ocex-n* custom properties (the featured block sets them from
   its settings); the defaults are 3 / 3 / 3 / 2 / 1 for the widest to the narrowest screens. */
.ocex-scroller {
  --ocex-per-row: var(--ocex-n, 3);
  display: flex;
  gap: var(--ocex-blog-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 8px;
}
@media (max-width: 1199px) { .ocex-scroller { --ocex-per-row: var(--ocex-n-1199, 3); } }
@media (max-width: 980px)  { .ocex-scroller { --ocex-per-row: var(--ocex-n-980, 3); } }
@media (max-width: 768px)  { .ocex-scroller { --ocex-per-row: var(--ocex-n-768, 2); } }
@media (max-width: 479px)  { .ocex-scroller { --ocex-per-row: var(--ocex-n-479, 1); } }
.ocex-scroller > .ocex-card {
  flex: 0 0 calc((100% - (var(--ocex-per-row) - 1) * var(--ocex-blog-gap)) / var(--ocex-per-row));
  min-width: 0;
  scroll-snap-align: start;
}
.ocex-featured { margin-bottom: 20px; }
@media (prefers-reduced-motion: reduce) { .ocex-scroller { scroll-behavior: auto; } }