/*
Theme Name:  Safer Food
Description: A clean, friendly theme for food safety training: a full-width header, centred menu bar, a ready-made home page (editable in Customize → Home Page), an FAQ accordion page template, and a simple news/blog layout.
Version:     1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License:     GPL-2.0-or-later
Text Domain: safer-food
Tags:        blog, education, custom-header, custom-logo, custom-menu, featured-images, threaded-comments, one-column
*/

/* ─── Variables ──────────────────────────────────────────────── */
:root {
  --bg:            #ffffff;
  --surface:       #ffffff;
  --text:          #3b4a43;
  --text-title:    #12251c;
  --text-muted:    #56655d;
  --text-light:    #8a968f;
  --accent:        #a55200;          /* overridden by Customizer: buttons, links, FAQ band (bronze) */
  --gold:          #d9ad4f;          /* menu bar hover / current item */
  --deep:          #014370;          /* overridden by Customizer: quick facts, contact band, footer, menu bar (blue) */
  --tint:          #f9f3ed;          /* overridden: a pale version of the accent */
  --warm:          #d9692b;
  --border:        #e0e9e3;

  --font-body:     'Open Sans', Arial, sans-serif;
  --font-heading:  'Playfair Display', Georgia, serif;
  --font-ui:       'Open Sans', Arial, sans-serif;

  --site-w:    1160px;
  --sidebar-w: 270px;
  --gutter:    70px;
  --wide-w:    100%;

  --header-h:  300px;                /* overridden by Customizer */
  --nav-h:     60px;
  --radius:    0;
  --ease:      0.2s ease;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html  { font-size: 15px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body  {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
img   { max-width: 100%; height: auto; display: block; }
iframe, embed, video { max-width: 100%; }
a     { color: var(--accent); text-decoration: none; transition: color var(--ease), opacity var(--ease); }
a:hover { opacity: 0.8; }
ul, ol { list-style: none; }
button { cursor: pointer; border: 0; background: none; font: inherit; color: inherit; padding: 0; }
input, textarea, select { font: inherit; outline: 0; border-radius: 0; }
table { border-collapse: collapse; border-spacing: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: normal;
  color: var(--text-title);
  clear: both;
}

.clear-fix::after, .clearfix::after { content: ''; display: table; clear: both; }
.boxed-wrapper { max-width: var(--site-w); margin: 0 auto; }

.skip-link:focus {
  position: fixed; top: 10px; left: 10px; z-index: 99999;
  width: auto; height: auto; clip: auto; overflow: visible;
  padding: 10px 16px; background: #fff; color: #000; box-shadow: 0 0 6px rgba(0,0,0,.3);
}

/* ─── 1. Header image + logo ─────────────────────────────────── */
/* The header image fills the banner. The logo (or, with no logo, the site
   title) is pinned to the top-left corner so it never sits in the middle
   of the picture. */
.site-hero {
  position: relative;
  overflow: hidden;
  height: var(--header-h);
  background-color: #16503a;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.16));
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero-outer, .hero-inner { display: block; height: 100%; padding: 0; }

.header-logo {
  position: absolute;
  top: 22px;
  left: 30px;
  z-index: 2;
  max-width: calc(100% - 60px);
  text-align: left;
}
.header-logo .site-title { margin: 0; font-family: var(--font-heading); font-weight: 400; }
.header-logo .site-title a {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.header-logo .site-title a:hover { opacity: 1; }
.header-logo .custom-logo-link { display: block; line-height: 0; }
.header-logo .custom-logo { display: block; width: auto; height: auto; margin: 0; }
.header-logo .site-description {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.brand-mark { display: block; margin: 0 0 10px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)); }

/* ─── 2. Menu bar ────────────────────────────────────────────── */
#main-nav {
  position: relative;
  z-index: 1100;
  min-height: var(--nav-h);
  background: var(--deep);     /* same dark blue as the footer */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
  text-align: center;
}
.nav-inner {
  position: relative;
  max-width: var(--site-w);
  margin: 0 auto;
  padding: 0 40px;
}

#main-menu, #mobile-menu { margin: 0; padding: 0; }
#main-menu li { position: relative; }
#main-menu > li { display: inline-block; vertical-align: top; list-style: none; }

#main-menu li a {
  display: block;
  position: relative;
  padding: 0 16px;
  margin-left: 5px;
  font-size: 15px;
  line-height: var(--nav-h);
  letter-spacing: 1px;
  font-weight: 600;
  color: #000;
  text-decoration: none;
}
#main-menu li:first-child > a { margin-left: 0; }
#main-menu li a:hover,
#main-menu li.current-menu-item > a,
#main-menu li.current_page_item > a,
#main-menu li.current-menu-ancestor > a,
#main-menu li.current-page-ancestor > a { color: var(--accent); opacity: 1; }

/* Drop-down arrow */
#main-menu li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin: 0 0 3px 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
#main-menu .sub-menu li.menu-item-has-children > a::after {
  float: right; margin: 12px 0 0 0;
  transform: rotate(-45deg);
}

/* Drop-downs */
#main-menu .sub-menu {
  display: none;
  position: absolute;
  z-index: 130;
  top: 100%;
  left: 0;
  width: 200px;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
#main-menu .sub-menu .sub-menu { top: -1px; left: 100%; }
#main-menu li:hover > .sub-menu,
#main-menu li:focus-within > .sub-menu { display: block; }
#main-menu .sub-menu > li { display: block; }
#main-menu .sub-menu > li > a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 15px;
  font-size: 13px;
  line-height: 26px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
#main-menu .sub-menu > li:last-child > a { border-bottom: 0; }

/* Menu bar is the footer's dark blue with white text; hovered item
   turns gold (text only, no background). Top-level items only; the white
   drop-down panels keep dark text. */
#main-nav #main-menu > li > a,
#main-nav .mobile-menu-btn,
#main-nav .nav-icon-btn,
#main-nav #mobile-menu li a,
#main-nav .sub-toggle { color: #fff; }
#main-nav #main-menu > li > a:hover,
#main-nav #main-menu > li > a:focus-visible,
#main-nav #main-menu > li:hover > a,
#main-nav .mobile-menu-btn:hover,
#main-nav .nav-icon-btn:hover { background: none; color: var(--gold); opacity: 1; }
#main-nav #mobile-menu li a:hover,
#main-nav #mobile-menu li a:focus-visible { color: var(--gold); opacity: 1; }
#main-nav .nav-search { background: var(--deep); }
#main-nav .nav-search input[type="search"] { color: #fff; }
#main-nav .nav-search input::placeholder { color: rgba(255, 255, 255, 0.8); }

/* Sticky menu bar (Customize → Layout → Sticky menu bar). --stick-top leaves
   room for the WordPress admin bar when you are logged in. */
body.sticky-nav { --stick-top: 0px; }
body.sticky-nav.admin-bar { --stick-top: 32px; }
@media (max-width: 782px) { body.sticky-nav.admin-bar { --stick-top: 46px; } }
@media (max-width: 600px) { body.sticky-nav.admin-bar { --stick-top: 0px; } }  /* admin bar scrolls away here */
body.sticky-nav #main-nav { position: sticky; top: var(--stick-top); }
/* Jump links (#aboutus, #faqs, headings) stop just below the bar, not under it */
body.sticky-nav [id] { scroll-margin-top: calc(var(--sticky-h, var(--nav-h)) + var(--stick-top) + 8px); }
/* Home-page section anchors sit exactly at the top edge of their section, so
   land that edge right under the bar (1px tucked under) with no sliver of the
   previous section showing */
body.sticky-nav .sf-anchor { scroll-margin-top: calc(var(--sticky-h, var(--nav-h)) + var(--stick-top) - 3px); }
/* A long phone menu scrolls inside the bar instead of running off-screen */
body.sticky-nav .mobile-menu-container {
  max-height: calc(100vh - var(--sticky-h, var(--nav-h)) - var(--stick-top));
  max-height: calc(100dvh - var(--sticky-h, var(--nav-h)) - var(--stick-top));
  overflow-y: auto;
}

/* Logo at the left end of the bar */
.nav-brand {
  position: absolute; top: 0; left: 40px; z-index: 2;
  display: flex; align-items: center;
  height: var(--nav-h);
}
.nav-brand .custom-logo-link { display: block; line-height: 0; }
.nav-brand .custom-logo { display: block; width: auto; height: auto; max-height: 44px; max-width: 200px; margin: 0; }
.nav-brand-title {
  font-family: var(--font-heading); font-size: 20px; line-height: 1.1;
  letter-spacing: 1px; text-transform: uppercase; color: #fff;
}
.nav-brand-title:hover { color: var(--gold); opacity: 1; }

/* Search icon + overlay */
.main-nav-icons {
  position: absolute;
  top: 0; right: 40px;
  z-index: 2;
  height: var(--nav-h);
}
.nav-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--nav-h);
  padding: 0 4px;
  color: #000;
}
.nav-icon-btn:hover { color: var(--accent); }  /* overridden for the dark bar below */

.nav-search {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  background: #fff;
  padding: 0 40px;
}
#main-nav.search-open .nav-search { display: flex; }
.nav-search form { flex: 1; }
.nav-search input[type="search"] {
  width: 100%;
  padding: 0 40px;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: var(--nav-h);
  color: #000;
  -webkit-appearance: none;
}
.nav-search input::placeholder { color: rgba(0, 0, 0, 0.55); }
.nav-search .nav-icon-btn { position: absolute; right: 40px; top: 0; }

/* Mobile menu */
.mobile-menu-btn {
  display: none;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: var(--nav-h);
  height: var(--nav-h);
  color: #000;
}
.mobile-menu-btn svg { margin-left: 6px; vertical-align: middle; transition: transform var(--ease); }
#main-nav.menu-open .mobile-menu-btn svg { transform: rotate(180deg); }
.mobile-menu-btn:hover { color: var(--accent); }

.mobile-menu-container { display: none; clear: both; padding-bottom: 15px; }
#main-nav.menu-open .mobile-menu-container { display: block; }
#mobile-menu li { position: relative; width: 100%; text-align: center; }
#mobile-menu li a {
  display: inline-block;
  position: relative;
  font-size: 15px;
  line-height: 38px;
  letter-spacing: 1px;
  font-weight: 600;
  color: #000;
}
#mobile-menu li a:hover,
#mobile-menu li.current-menu-item > a,
#mobile-menu li.current_page_item > a { color: var(--accent); opacity: 1; }
#mobile-menu .sub-menu { display: none; }
#mobile-menu li.sub-open > .sub-menu { display: block; }
#mobile-menu .sub-menu li a { font-size: 13px; line-height: 32px; letter-spacing: 0.5px; }
.sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 38px; color: #000; vertical-align: top; }
.sub-toggle svg { transition: transform var(--ease); }
li.sub-open > .sub-toggle svg { transform: rotate(180deg); }

/* ─── 3. Content layout ──────────────────────────────────────── */
.page-content { background: #fff; }
.main-content {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  padding: 40px;
}
.main-container { flex: 1 1 auto; min-width: 0; }

/* No sidebar → one centred column */
body:not(.has-sidebar) .main-content { justify-content: center; }
body:not(.has-sidebar) .main-container { max-width: 820px; margin: 0 auto; }

.sidebar-right { flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); }

/* ─── 4. Blog list (index / archive / search) ────────────────── */
.blog-grid { list-style: none; }
.blog-post {
  margin-bottom: 50px;
  padding-bottom: 45px;
  border-bottom: 1px solid var(--border);
}

/* Card photos on blog / category / search lists: smaller, centred.
   Change 440px to make them bigger or smaller. Single posts are unaffected. */
.blog-post .post-media { max-width: 440px; margin-left: auto; margin-right: auto; }
.post-media { position: relative; margin-bottom: 18px; }
.post-media > a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.post-media img { width: 100%; }

.post-header { text-align: center; }

.post-categories a {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}

.post-title, .page-title {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: 0.5px;
  color: var(--text-title);
}
.post-title { margin-bottom: 13px; }
.post-title a { color: var(--text-title); }
.post-title a:hover { color: rgba(3, 3, 3, 0.75); opacity: 1; }
.page-title { margin-bottom: 24px; }

.post-meta {
  margin-bottom: 20px;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--text-light);
}
.post-meta a, .post-meta time { color: var(--text-light); }
.post-meta .meta-sep { display: inline; margin: 0 4px; }

.post-excerpt {
  max-width: 560px;
  margin: 0 auto 24px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

.post-content { overflow: hidden; }
.post-content > p { text-align: justify; margin-bottom: 15px; }
.post-content > p:last-child { margin-bottom: 0; }

.read-more { margin: 25px 0 5px; text-align: center; }
.read-more a {
  display: inline-block;
  padding: 0 25px;
  border: 1px solid var(--text-title);
  font-size: 13px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-title);
  transition: all var(--ease);
}
.read-more a:hover { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; }

.no-result-found { text-align: center; margin: 50px auto 100px; }
.no-result-found h3 { font-family: var(--font-body); font-size: 30px; letter-spacing: 2px; margin-bottom: 20px; }
.no-result-found p { color: var(--text-muted); margin-bottom: 25px; }

/* Pagination — Older / Newer */
.blog-pagination { position: relative; overflow: hidden; padding: 0 0 50px; }
.blog-pagination .previous-page { float: left; }
.blog-pagination .next-page { float: right; }
.blog-pagination a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-title);
}
.blog-pagination a:hover { color: var(--accent); opacity: 1; }

/* ─── 5. Archive / search heading ────────────────────────────── */
.archive-header {
  overflow: hidden;
  margin-bottom: 40px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.archive-label {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent); margin-bottom: 6px;
}
.archive-title { font-size: 34px; line-height: 1.2; }
.archive-description { display: block; max-width: 700px; margin: 12px auto 0; color: var(--text-muted); }
.archive-header .search-form { margin-top: 20px; }

/* ─── 6. Single post ─────────────────────────────────────────── */
.single-post .post-media,
.page-article .post-media { margin-bottom: 25px; }

.entry-content {
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
}
.entry-content > * + * { margin-top: 1.4rem; }
.entry-content::after { content: ''; display: table; clear: both; }

.entry-content h2 { font-size: 30px; line-height: 1.25; margin-top: 2.5rem; }
.entry-content h3 { font-size: 24px; line-height: 1.3; margin-top: 2.1rem; }
.entry-content h4 { font-size: 19px; line-height: 1.35; margin-top: 1.7rem; }

.entry-content a              { border-bottom: 1px solid transparent; }
.entry-content a:hover        { border-bottom-color: var(--accent); opacity: 1; }
.entry-content ul             { list-style: disc;    padding-left: 1.5rem; }
.entry-content ol             { list-style: decimal; padding-left: 1.5rem; }
.entry-content li + li        { margin-top: 0.35rem; }

.entry-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 15px;
  color: var(--text-title);
}
.entry-content blockquote p {
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 30.7px;
  letter-spacing: 0.5px;
  opacity: 0.9;
}
.entry-content blockquote cite {
  display: block; font-style: normal;
  font-size: 13px; color: var(--text-light); margin-top: 0.5rem;
}

.entry-content hr   { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.entry-content code { background: #f6f3ee; padding: 0.1em 0.4em; font-size: 0.9em; }
.entry-content pre  { background: #1e1e1e; color: #eee; padding: 1.25rem 1.5rem; overflow-x: auto; font-size: 0.85em; }
.entry-content pre code { background: none; padding: 0; color: inherit; }
.entry-content table { width: 100%; font-size: 14px; }
.entry-content th, .entry-content td { padding: 8px 10px; border: 1px solid var(--border); text-align: left; }

.entry-content figure       { margin: 2rem 0; }
.entry-content .wp-caption  { max-width: 100%; }

/* Image captions */
.entry-content figcaption,
.entry-content .wp-caption-text,
.entry-content .wp-element-caption,
.entry-content .gallery-caption {
  font-size: 13px;
  color: var(--text-light);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Alignment classes */
.entry-content .alignleft   { float: left;  margin: 0.5rem 1.5rem 1rem 0; max-width: 45%; }
.entry-content .alignright  { float: right; margin: 0.5rem 0 1rem 1.5rem; max-width: 45%; }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.entry-content .alignwide,
.entry-content .alignfull   { max-width: 100%; margin-left: auto; margin-right: auto; }

.page-links { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }

/* ─── Gallery & Lightbox (unchanged from previous version) ────── */
/* ─── Gallery: Block Editor ──────────────────────────────────── */
/*
  Note: Images link to Media File → the lightbox JS uses link.href
  which will be the Cloudflare CDN URL after the offloader plugin runs.
*/

.entry-content .wp-block-gallery {
  max-width: 100%;
  margin-left:  auto !important;
  margin-right: auto !important;
}

.entry-content .wp-block-gallery.is-layout-flex {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
  align-items: flex-start;
}

.entry-content .wp-block-gallery .wp-block-image {
  flex: 1 1 180px;
  margin: 0 !important;
  min-width: 0;
}

.entry-content .wp-block-gallery .wp-block-image a {
  display: block;
  border: none;
  line-height: 0;
}

.entry-content .wp-block-gallery .wp-block-image img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: var(--radius);
  cursor: zoom-in;
  transition: opacity var(--ease);
}
.entry-content .wp-block-gallery .wp-block-image img:hover { opacity: 0.88; }

/* ─── Gallery: Classic shortcode [gallery] ───────────────────── */
/*
  Use [gallery link="file"] or set link="file" in gallery settings.
  WordPress will output the full-size URL as the href.
*/

.entry-content .gallery {
  display: grid;
  gap: 5px;
  max-width: 100%;
  margin-left:  auto !important;
  margin-right: auto !important;
  clear: both;
}
.entry-content .gallery-columns-1 { grid-template-columns: 1fr; }
.entry-content .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.entry-content .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.entry-content .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.entry-content .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.entry-content .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.entry-content .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.entry-content .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.entry-content .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

.entry-content .gallery-item {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 1;
  margin: 0;
}
.entry-content .gallery-item a    { display: block; width: 100%; height: 100%; border: none; line-height: 0; }
.entry-content .gallery-item img  {
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.35s ease;
}
.entry-content .gallery-item:hover img { transform: scale(1.06); }

/* ─── Lightbox ───────────────────────────────────────────────── */
.lb-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 10, 0.95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lb-overlay.open { opacity: 1; visibility: visible; }

.lb-img-wrap {
  max-width: 92vw;
  max-height: 90vh;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.75rem;
  position: relative;
}

.lb-img {
  max-width: 92vw;
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius);
  user-select: none;
  display: block;
}

.lb-caption {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  text-align: center;
  max-width: 600px;
  padding: 0 1rem;
}

.lb-close {
  position: fixed; top: 1rem; right: 1.25rem;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #fff; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--ease);
}
.lb-close:hover { background: rgba(255,255,255,0.22); }

.lb-btn {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #fff; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--ease);
  user-select: none;
}
.lb-btn:hover { background: rgba(255,255,255,0.22); }
.lb-prev { left: 1.25rem; }
.lb-next { right: 1.25rem; }

.lb-count {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-ui); font-size: 0.72rem;
  color: rgba(255,255,255,0.4); letter-spacing: 1px;
}


/* ─── 7. Post footer (tags + navigation) ─────────────────────── */
.post-footer {
  margin-top: 40px;
  padding-top: 25px;
  border-top: 1px solid var(--border);
}

.post-tags { margin-bottom: 22px; }
.post-tags-label {
  display: inline-block; margin-right: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-title);
}
.tag-pill {
  display: inline-block;
  margin: 0 5px 5px 0;
  padding: 0 12px;
  font-size: 12px;
  line-height: 24px;
  color: var(--text-light);
  border: 1px solid var(--border);
}
.tag-pill:hover { color: var(--accent); border-color: var(--accent); opacity: 1; }

/* Previous / next */
.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.post-nav-item a { display: block; color: inherit; }
.post-nav-item.right { text-align: right; }
.post-nav-label {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-light); margin-bottom: 4px;
}
.post-nav-title { font-family: var(--font-heading); font-size: 18px; line-height: 1.3; color: var(--text-title); }
.post-nav-item a:hover { opacity: 1; }
.post-nav-item a:hover .post-nav-title { color: var(--accent); }

/* ─── 8. Comments ────────────────────────────────────────────── */
.comments-area { margin-top: 40px; padding-bottom: 20px; }

.comments-title {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; text-align: center;
  margin-bottom: 30px;
}

.comment-list, .comment-list .children { list-style: none; display: flex; flex-direction: column; gap: 25px; }
.comment-list .children { margin-top: 25px; padding-left: 40px; }

.comment-wrap          { display: flex; gap: 15px; }
.comment-avatar        { flex-shrink: 0; }
.comment-avatar img    { border-radius: 50%; width: 40px; height: 40px; }
.comment-author-name   { font-size: 14px; font-weight: 600; color: var(--text-title); margin-right: 8px; }
.comment-time          { font-size: 12px; font-style: italic; color: var(--text-light); }
.comment-time a        { color: inherit; }
.comment-meta          { margin-bottom: 6px; }
.comment-body p        { font-size: 14px; line-height: 1.7; }
.comment-reply-link    { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; display: inline-block; margin-top: 6px; }

/* Comment form */
.comment-respond { margin-top: 45px; padding-top: 30px; border-top: 1px solid var(--border); }
.comment-reply-title {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; text-align: center; margin-bottom: 20px;
}
.comment-notes, .comment-awaiting-moderation { font-size: 13px; color: var(--text-light); margin-bottom: 18px; }

.comment-form label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-title); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--border);
  font-size: 14px; color: var(--text);
  background: #fff; transition: border-color var(--ease);
  margin-bottom: 16px;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--accent); }
.comment-form textarea { min-height: 130px; resize: vertical; }
.comment-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.submit {
  display: inline-block;
  padding: 0 25px; line-height: 40px;
  background: transparent; color: var(--text-title);
  border: 1px solid var(--text-title);
  font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  transition: all var(--ease);
}
.submit:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── 9. Sidebar widgets ─────────────────────────────────────── */
.saferfood-widget { margin-bottom: 45px; font-size: 14px; }
.widget-title {
  position: relative;
  margin: 0 0 25px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600; line-height: 1;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-title);
}
.widget-title::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--border);
}
.widget-title span { position: relative; padding: 0 15px; background: #fff; }
.saferfood-widget ul li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.saferfood-widget ul li:last-child { border-bottom: 0; }
.saferfood-widget ul ul { padding-left: 15px; }
.saferfood-widget a { color: var(--text); }
.saferfood-widget a:hover { color: var(--accent); opacity: 1; }
.saferfood-widget img { max-width: 100%; }
.saferfood-widget .tagcloud a { display: inline-block; margin: 0 5px 5px 0; padding: 0 12px; font-size: 12px !important; line-height: 24px; border: 1px solid var(--border); color: var(--text-light); }

/* ─── 10. Static page / 404 ──────────────────────────────────── */
.page-article .page-title { text-align: center; margin-bottom: 30px; }
.not-found { text-align: center; padding: 40px 0 60px; }
.not-found-num   { font-family: var(--font-heading); font-size: 110px; line-height: 1; color: var(--border); }
.not-found-title { font-size: 34px; margin: 10px 0; }
.not-found-text  { color: var(--text-muted); margin-bottom: 25px; }
.not-found-back  { margin-top: 25px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }

/* ─── 11. Footer ─────────────────────────────────────────────── */
.site-footer { background: var(--deep); }
.site-footer .footer-inner { padding: 25px 40px; text-align: center; }
/* Logo to the left of the phone / email lines; stacks on phones */
.site-footer .footer-top { display: flex; align-items: center; justify-content: center; gap: 28px; margin-bottom: 14px; }
.site-footer .footer-top .footer-contact { margin: 0; text-align: left; line-height: 1.8; }
.site-footer .footer-logo { flex: none; }
@media (max-width: 600px) {
  .site-footer .footer-top { flex-direction: column; gap: 14px; }
  .site-footer .footer-top .footer-contact { text-align: center; }
}
.site-footer .custom-logo-link { display: inline-block; line-height: 0; }
.site-footer .custom-logo { display: block; width: auto; height: auto; max-height: 70px; max-width: 240px; margin: 0 auto; }
.site-footer .copyright-info { font-size: 13px; color: rgba(255,255,255,0.65); }
.site-footer .footer-contact { margin-bottom: 8px; font-size: 14px; color: rgba(255,255,255,0.85); }
.site-footer a { color: rgba(255,255,255,0.9); }
.site-footer a:hover { color: #fff; text-decoration: underline; opacity: 1; }

/* ─── 12. Search form (in content) ───────────────────────────── */
.search-form   { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.search-field  {
  flex: 1; min-width: 0; padding: 0 14px; line-height: 38px;
  border: 1px solid var(--border);
  font-size: 14px; background: #fff; color: var(--text);
  transition: border-color var(--ease);
}
.search-field:focus { border-color: var(--accent); }
.search-submit {
  padding: 0 20px; line-height: 38px; background: transparent; color: var(--text-title);
  border: 1px solid var(--text-title);
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  transition: all var(--ease);
}
.search-submit:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── 13. Back to top ────────────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 25px; right: 25px;
  width: 38px; height: 38px;
  background: #fff; border: 1px solid var(--border);
  color: var(--text-muted); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 5px rgba(0,0,0,.1); z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(5px);
  transition: all var(--ease);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover   { border-color: var(--accent); color: var(--accent); }

/* ─── Utilities / WordPress core ─────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.sticky {}
.bypostauthor {}
.wp-caption { max-width: 100%; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .main-content { gap: 45px; }
  :root { --sidebar-w: 240px; }
}

@media (max-width: 979px) {
  .header-logo { top: 18px; left: 30px; max-width: calc(100% - 60px); }
  .header-logo .site-title a { font-size: 28px; }
  .header-logo .site-description { font-size: 13px; }

  .nav-inner, .nav-search { padding-left: 30px; padding-right: 30px; }
  .nav-brand { left: 30px; }
  .nav-brand .custom-logo { max-width: 120px; }
  .nav-brand-title { font-size: 16px; max-width: 110px; }
  .main-nav-icons { right: 30px; }
  .nav-search .nav-icon-btn { right: 30px; }
  .main-content { padding: 30px; flex-direction: column; align-items: stretch; gap: 20px; }
  body:not(.has-sidebar) .main-container { max-width: none; }
  .sidebar-right { flex-basis: auto; width: 100%; max-width: 480px; margin: 20px auto 0; }

  .main-menu-container { display: none; }
  .mobile-menu-btn { display: inline-block; }
}

@media (max-width: 767px) {
  .site-hero { height: min(var(--header-h), 320px); }
  .header-logo .site-title a { font-size: 24px; }
  .post-title, .page-title { font-size: 30px; line-height: 36px; }
  .archive-title { font-size: 28px; }
  .entry-content h2 { font-size: 26px; }

  .post-nav { grid-template-columns: 1fr; gap: 18px; }
  .post-nav-item.right { text-align: left; }
  .comment-form .form-row { grid-template-columns: 1fr; }
  .post-content > p { text-align: left; }
  .entry-content .alignleft, .entry-content .alignright { float: none; margin: 1rem auto; max-width: 100%; }

  .entry-content .gallery-columns-4,
  .entry-content .gallery-columns-5,
  .entry-content .gallery-columns-6 { grid-template-columns: repeat(3, 1fr); }
  .entry-content .wp-block-gallery .wp-block-image img { height: 160px; }

  .lb-prev { left: 0.5rem; }
  .lb-next { right: 0.5rem; }
}

@media (max-width: 479px) {
  .nav-inner, .nav-search { padding-left: 20px; padding-right: 20px; }
  .nav-brand { left: 20px; }
  .nav-brand .custom-logo { max-width: 100px; max-height: 38px; }
  .main-nav-icons { right: 20px; }
  .nav-search .nav-icon-btn { right: 20px; }
  .main-content { padding: 25px 20px; }
  .site-hero { height: min(var(--header-h), 260px); }
  .header-logo { top: 14px; left: 20px; max-width: calc(100% - 40px); }
  .header-logo .site-title a { font-size: 20px; letter-spacing: 1px; }
  .nav-search input[type="search"] { padding: 0 36px; font-size: 14px; }

  .entry-content .gallery-columns-3,
  .entry-content .gallery-columns-4,
  .entry-content .gallery-columns-5,
  .entry-content .gallery-columns-6 { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Print ──────────────────────────────────────────────────── */
@media print {
  .site-hero, #main-nav, .site-footer, .post-nav, .sidebar-right,
  .comments-area, .back-to-top { display: none !important; }
  body { font-size: 11pt; background: #fff; }
  .main-content { display: block; padding: 0; }
}

/* ─── Home page (front-page.php) ─────────────────────────────── */
.page-content-home { background: #fff; }
.sf-wrap   { max-width: 1040px; margin: 0 auto; padding: 0 40px; }
.sf-narrow { max-width: 820px; }
.sf-center { text-align: center; }

.sf-section { padding: 72px 0; }
.sf-section p { font-size: 16px; line-height: 1.8; }
.sf-section p + p { margin-top: 1rem; }
.sf-tint { background: var(--tint); }

.sf-h2 { font-size: 34px; line-height: 1.25; margin-bottom: 18px; }
.sf-h3 { font-size: 22px; line-height: 1.3; margin-bottom: 10px; }

.sf-intro { padding: 72px 0 60px; text-align: center; }
.sf-kicker {
  margin-bottom: 16px;
  font-size: 18px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent);
}
.sf-kicker-line { display: block; }
.sf-intro-title { max-width: 820px; margin: 0 auto 20px; font-size: 46px; line-height: 1.2; }
.sf-lead { max-width: 640px; margin: 0 auto; font-size: 18px; line-height: 1.7; color: var(--text-muted); }
.sf-buttons { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.sf-btn {
  display: inline-block;
  padding: 0 28px;
  border: 1px solid var(--accent);
  font-size: 13px; font-weight: 700; line-height: 46px;
  letter-spacing: 2px; text-transform: uppercase;
  transition: all var(--ease);
}
.sf-btn-solid { background: var(--accent); color: #fff; }
.sf-btn-solid:hover { background: var(--deep); border-color: var(--deep); color: #fff; opacity: 1; }
.sf-btn-line { background: transparent; border-color: var(--deep); color: var(--deep); }
.sf-btn-line:hover { background: var(--deep); color: #fff; opacity: 1; }

/* Links inside body text on the home page (e.g. FOODSAFE Level 1) */
.sf-lead a,
.sf-section p a:not(.sf-btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sf-lead a:hover,
.sf-section p a:not(.sf-btn):hover { opacity: 1; text-decoration-thickness: 2px; }

/* Invisible jump-link targets */
.sf-anchor { display: block; height: 0; overflow: hidden; }

/* Quick facts */
.sf-facts { background: var(--deep); color: #fff; }
.sf-facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.sf-fact { padding: 34px 22px; text-align: center; border-left: 1px solid rgba(255,255,255,0.14); }
.sf-fact:first-child { border-left: 0; }
.sf-fact-num { display: block; font-family: var(--font-heading); font-size: 42px; line-height: 1.1; color: #fff; }
.sf-fact-label { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.78); }

/* Top banner with a picture: text shifts left, picture sits on the right.
   mix-blend-mode makes the picture's white background disappear into the page,
   so it needs no frame or box. */
.sf-intro-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.sf-intro-pic { text-align: left; }
.sf-intro-pic .sf-intro-title { margin-left: 0; margin-right: 0; font-size: 40px; }
.sf-intro-pic .sf-lead { margin-left: 0; margin-right: 0; max-width: none; }
.sf-intro-pic .sf-buttons { justify-content: flex-start; }
.sf-intro-img { margin: 0; }
.sf-intro-img img { width: 100%; max-width: 450px; margin: 0 auto; mix-blend-mode: multiply; }

/* Foodborne illness callout */
.sf-callout { padding: 34px 40px; background: #fff; border-left: 4px solid var(--warm); box-shadow: 0 10px 30px -18px rgba(0,0,0,0.35); }
.sf-callout .sf-h2 { margin-bottom: 12px; }

/* About Foodsafe */
.sf-two { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.sf-learn { padding: 30px 32px; background: var(--tint); border-top: 4px solid var(--accent); }
.sf-checks li { position: relative; margin-bottom: 12px; padding-left: 32px; font-size: 15px; line-height: 1.5; }
.sf-checks li:last-child { margin-bottom: 0; }
.sf-checks li::before {
  content: ''; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent);
}
.sf-checks li::after {
  content: ''; position: absolute; left: 7px; top: 5px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Tips */
.sf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.sf-card { padding: 30px 28px; background: #fff; border-top: 4px solid var(--warm); box-shadow: 0 10px 30px -20px rgba(0,0,0,0.4); }
.sf-card p { font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.sf-more { margin-top: 34px; }

/* FAQ strip and contact band */
.sf-faqstrip { background: var(--tint); color: var(--text); border-top: 1px solid var(--border); }
.sf-faqstrip .sf-h2 { color: var(--text-title); }
.sf-faqstrip p { color: var(--text); }
.sf-contact { background: var(--deep); color: #fff; }
.sf-contact .sf-h2 { color: #fff; }
.sf-contact-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }
.sf-contact .sf-btn-line { border-color: rgba(255,255,255,0.7); color: #fff; }
.sf-contact .sf-btn-line:hover { background: #fff; border-color: #fff; color: var(--deep); }

/* ─── FAQ accordion (page-faq.php) ───────────────────────────── */
.faq-list { margin-top: 28px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  position: relative;
  padding: 20px 44px 20px 0;
  font-family: var(--font-heading);
  font-size: 20px; line-height: 1.35;
  color: var(--text-title);
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font: 400 28px/1 var(--font-body);
  color: var(--accent);
}
.faq-item[open] > .faq-question::after { content: '\2013'; }
.faq-question:hover { color: var(--accent); }
.faq-answer { padding: 0 0 24px; }
.faq-answer > * + * { margin-top: 1rem; }

@media (max-width: 900px) {
  .sf-facts-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-fact:nth-child(3) { border-left: 0; }
  .sf-fact:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.14); }
  .sf-two { grid-template-columns: 1fr; gap: 32px; }
  .sf-intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .sf-intro-img img { max-width: 360px; }
  .sf-cards { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .sf-wrap { padding: 0 24px; }
  .sf-section { padding: 52px 0; }
  .sf-intro { padding: 48px 0 40px; }
  .sf-intro-title, .sf-intro-pic .sf-intro-title { font-size: 32px; }
  .sf-kicker { font-size: 15px; letter-spacing: 2px; }
  .sf-h2 { font-size: 28px; }
  .sf-callout { padding: 26px 24px; }
  .sf-fact-num { font-size: 34px; }
}
.sf-contact-lines .sf-btn { text-transform: none; letter-spacing: 0.6px; font-size: 15px; }