/* Little India blog: additions on top of li-shop.css (the shop's own styles).
   The pages reuse the shop's blog markup (#blog-list, #blog-show, .thumbnail, .tinymce_html,
   .sidebar-widget), so most of the look comes from li-shop.css. This file adds only what the
   new posts need: an even card grid instead of the shop's JS masonry, product photos, tables,
   the FAQ, the product box and the related-posts list. Brand orange is the shop's #F4622E. */

:root {
  --li-orange: #F4622E;      /* brand orange: large areas and borders only */
  --li-orange-text: #BF4317; /* text and buttons in the blog content: 5.2:1 on white (WCAG AA) */
  --li-ink: #171717;
  --li-muted: #6E6E6E;       /* 5.1:1 on white */
  --li-line: #eaeaea;
  --li-soft: #f7f7f7;
}

/* Header: the shop's script shows the horizontal menu and hides the "more" button once the
   menu fits (inline styles in the live DOM); the static copy does it here. */
#header-navbar .horizontal-categories { visibility: visible; height: auto; }
#header-navbar .horizontal-categories > li.dropdown.more { display: none; }

/* Listing: category filter */
#blog-list #blog-category a.active { text-decoration: underline; }
#blog-list #blog-category { margin-bottom: 18px; }
#blog-list .li-intro { color: var(--li-muted); margin: 4px 0 20px; max-width: 760px; }
#blog-list .title h1 { margin-bottom: 6px; }

/* Listing: even grid (the shop uses JS masonry; equal-height rows need no script) */
#blog-list .li-grid { display: flex; flex-wrap: wrap; }
#blog-list .li-grid > .item { display: flex; margin-bottom: 30px; }
#blog-list .li-grid > .item > .thumbnail { width: 100%; margin-bottom: 0; display: flex; flex-direction: column; }
#blog-list .li-grid .thumbnail > .row { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0; }
#blog-list .li-grid .thumbnail .top { width: 100%; }
#blog-list .li-cat { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--li-orange-text); margin-top: 8px; }
#blog-list .caption .name { font-size: 1.15rem; line-height: 1.35; }
#blog-list .caption .name a { color: var(--li-ink); }
#blog-list .description { color: #444; }

/* Product photos are packshots on white: show the whole pack, never crop it */
.product .image { display: block; }
.product .image > a.li-photo, .li-photo { display: block; padding: 0; }
.product .image a.li-photo > img, .li-photo img { display: block; width: 100%; max-width: none !important; }
.li-photo { display: block; position: relative; background: #fff; aspect-ratio: 4 / 3; overflow: hidden; }
.li-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.li-photo--empty { background: var(--li-soft); display: flex; align-items: center; justify-content: center; }
.li-photo--empty span { font-family: 'Open Sans', sans-serif; font-size: 1.25rem; color: var(--li-orange-text); padding: 0 16px; text-align: center; }

/* Post */
#blog-show .li-meta { color: var(--li-muted); font-size: .9333rem; margin: 4px 0 18px; }
#blog-show .li-meta a { color: var(--li-muted); }
#blog-show .li-hero { display: flex; gap: 20px; align-items: center; border: 1px solid var(--li-line); padding: 14px; margin: 0 0 24px; background: #fff; }
#blog-show .li-hero .li-photo { flex: 0 0 220px; aspect-ratio: 1 / 1; }
#blog-show .li-hero figcaption { font-size: .95rem; }
#blog-show .li-hero figcaption .li-hero-name { display: block; font-weight: 600; margin: 4px 0 10px; color: var(--li-ink); }
#blog-show .li-hero .btn { margin: 0; }
@media (max-width: 600px) {
  #blog-show .li-hero { flex-direction: column; align-items: stretch; }
  #blog-show .li-hero .li-photo { flex-basis: auto; aspect-ratio: 4 / 3; }
}

#blog-show .tinymce_html { font-size: 1.0667rem; line-height: 1.65; color: #222; }
#blog-show .tinymce_html p { margin: 0 0 14px; }
#blog-show .tinymce_html h2 { font-size: 1.6rem; margin: 30px 0 12px; line-height: 1.3; }
#blog-show .tinymce_html h3 { font-size: 1.2rem; margin: 22px 0 8px; font-weight: 600; line-height: 1.35; }
#blog-show .tinymce_html li { margin-bottom: 6px; }
#blog-show .tinymce_html a:not(.btn) { color: var(--li-orange-text); }
#blog-show .tinymce_html strong { font-weight: 600; }
#blog-show .li-table { overflow-x: auto; margin: 0 0 18px; -webkit-overflow-scrolling: touch; }
#blog-show .li-table table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: .95rem; }
#blog-show .li-table th { background: var(--li-soft); font-weight: 600; text-align: left; }
#blog-show .li-table th, #blog-show .li-table td { border: 1px solid var(--li-line); padding: 8px 10px; vertical-align: top; }

/* FAQ: question as h3, answer below, set off as one block */
#blog-show .li-faq { background: var(--li-soft); border-left: 3px solid var(--li-orange); padding: 6px 20px 8px; margin: 28px 0 10px; }
#blog-show .li-faq h2 { margin-top: 16px; }
#blog-show .li-faq h3 { margin-top: 16px; }

/* Sidebar */
#blog-show .sidebar .sidebar-widget ul { padding-left: 18px; }
#blog-show .sidebar .sidebar-widget li { margin-bottom: 6px; }
#blog-show .sidebar .li-count { color: var(--li-muted); }
.li-products { list-style: none; padding: 0 !important; margin: 0; }
.li-products li { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--li-line); margin: 0 !important; }
.li-products .li-photo { flex: 0 0 64px; aspect-ratio: 1 / 1; }
.li-products .li-photo img { padding: 2px; }
.li-products a { color: var(--li-ink); }
.li-related { list-style: none; padding: 0 !important; }
.li-related li { padding: 8px 0; border-bottom: 1px solid var(--li-line); margin: 0 !important; }
.li-related a { color: var(--li-ink); }
.li-related small { display: block; color: var(--li-muted); }

/* Footer link added by li-blog.js */
footer .li-cookie-settings { cursor: pointer; }

/* 404 page */
.li-404 .li-404-lead { font-size: 1.1rem; color: #444; margin: 6px 0 18px; max-width: 640px; }
.li-404 .li-404-search { max-width: 520px; margin-bottom: 18px; }
.li-404 .li-404-search .input-group { width: 100%; }
.li-404 .li-404-links .btn { margin: 0 8px 10px 0; }
.li-404 .li-404-links .btn-default { border: 1px solid var(--li-line); }

/* Accessibility (Lighthouse, 2026-10-23): button contrast and tap targets */
#blog-show .li-hero .btn-primary, .li-404 .btn-primary { background-color: var(--li-orange-text); border-color: var(--li-orange-text); color: #fff; }
#blog-show .li-hero .btn-primary:hover, .li-404 .btn-primary:hover { background-color: #9E3812; border-color: #9E3812; }
#blog-list #blog-category li { margin: 0 4px 6px 0; }
#blog-list #blog-category li a { display: inline-block; padding: 6px 6px; min-height: 32px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }