/* Blynk SEO pages (owner's SEO brief, 2026-10-15): the area pages, category
   pages and the Sinhala / Tamil versions. Loaded after styles.css and only
   adds what those pages need; the look comes from styles.css. Served at
   /pages.css (apps/customer-site/pages/ is copied to the site root). */

/* Sinhala and Tamil: Outfit has no glyphs for them, so each script falls
   back to Noto Sans (loaded on those pages only). Tighter Latin letter
   spacing hurts these scripts, and they need more line height. */
html:lang(si) { font-family: 'Outfit', 'Noto Sans Sinhala', system-ui, sans-serif; }
html:lang(ta) { font-family: 'Outfit', 'Noto Sans Tamil', system-ui, sans-serif; }
html:lang(si) :is(h1, h2, h3, .hero__title, .how strong, .bento__big span),
html:lang(ta) :is(h1, h2, h3, .hero__title, .how strong, .bento__big span) { letter-spacing: 0; line-height: 1.25; }
html:lang(si) .hero__title, html:lang(ta) .hero__title { font-size: clamp(30px, 4.2vw, 56px); }
html:lang(ta) .hero__title { font-size: clamp(28px, 3.6vw, 50px); }
html:lang(si) .section h2, html:lang(si) .band h2,
html:lang(ta) .section h2, html:lang(ta) .band h2 { font-size: clamp(26px, 4vw, 46px); }
html:lang(ta) .cta__text strong, html:lang(si) .cta__text strong { white-space: normal; font-size: 18px; }
html:lang(ta) .perks li, html:lang(si) .perks li { font-size: 15px; }

/* Header: logo and one Order now button. */
.nav__order { margin-left: auto; }
@media (max-width: 600px) {
  .nav__order { min-height: 44px; padding: 0 16px; font-size: 15px; }
  html:lang(ta) .nav__order .i, html:lang(si) .nav__order .i { display: none; }
  html:lang(ta) .nav__order, html:lang(si) .nav__order, html:lang(ta) .nav__cta, html:lang(si) .nav__cta { font-size: 14px; padding: 0 14px; }
}

/* Page top: breadcrumb, language switch, title, Order now. */
.page-hero { padding: clamp(8px, 3vw, 40px) 0 clamp(36px, 6vw, 72px); }
.crumbs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: clamp(18px, 3vw, 32px); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 15px; color: var(--ink-3); }
.crumbs li + li::before { content: '/'; margin-right: 6px; }
.crumbs a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.page-hero h1 { margin: 0; max-width: 20ch; font-size: clamp(36px, 6vw, 68px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.page-hero .lead { max-width: 62ch; font-size: clamp(18px, 2vw, 21px); }
.page-hero__cta { display: grid; grid-template-columns: minmax(0, 380px); margin-top: clamp(24px, 4vw, 36px); }
.page-hero__cta .cta { text-decoration: none; }
.facts-line { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.facts-line li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--green-wash); color: var(--green); font-size: 15px; font-weight: 600; line-height: 1.3; }
.facts-line .i { width: 18px; height: 18px; }

/* Language switch (English / සිංහල / தமிழ்). */
.lang { display: flex; flex-wrap: wrap; gap: 6px; }
.lang a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: 15px; font-weight: 600; text-decoration: none; }
.lang a:hover { border-color: var(--ink); color: var(--ink); }
.lang a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.hero__copy > .lang { margin-bottom: 16px; }

/* About the area. */
.section--local { padding-block: clamp(40px, 6vw, 72px); }
.prose h2 { margin-bottom: 0; }
.prose p { max-width: 64ch; margin: 16px 0 0; color: var(--ink-2); font-size: 18px; line-height: 1.6; text-wrap: pretty; }

/* Categories as cards. */
.cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.cats li { padding: 20px 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.cats h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.01em; }
.cats p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Links to the other areas and categories. */
.links-title { margin: 0 0 16px; font-size: clamp(22px, 2.6vw, 30px) !important; letter-spacing: -0.02em; }
.links + .links-title { margin-top: 32px; }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; }
.links a:hover { border-color: var(--ink); }

/* Links styled as the home page's buttons. */
a.cta, a.nav__cta, .band__actions a.btn, .head--split a.btn { text-decoration: none; }

/* The longer Sinhala and Tamil hero copy reaches the bottom-left corner,
   where the home page's vegetables sit; leave them out there. */
html:lang(si) .deco--veggies, html:lang(ta) .deco--veggies { display: none; }
html:lang(si) .page-hero h1, html:lang(ta) .page-hero h1 { font-size: clamp(30px, 5vw, 58px); letter-spacing: 0; line-height: 1.2; }
html:lang(ta) .page-hero h1 { font-size: clamp(28px, 4.6vw, 54px); }