/*
Theme Name: EdgePress Lite
Theme URI: https://example.com/edgepress-lite
Author: OpenAI
Description: A lightweight, responsive, edge-to-edge WordPress theme for Gutenberg posts, pages, custom HTML tools, and food reference articles.
Version: 1.0.1
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: edgepress-lite
Tags: blog, food-and-drink, custom-logo, featured-images, full-width-template, one-column, wide-blocks
*/

:root {
  --epl-page-gutter: clamp(16px, 3.2vw, 48px);
  --epl-content-max: 1200px;
  --epl-text-max: 820px;
  --epl-color-text: #20242a;
  --epl-color-muted: #626b75;
  --epl-color-border: #e7e9ec;
  --epl-color-background: #ffffff;
  --epl-color-surface: #f7f8fa;
  --epl-color-accent: #176b52;
  --epl-radius: 10px;
  --epl-line-height: 1.72;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-wrap: break-word;
}

body {
  margin: 0;
  color: var(--epl-color-text);
  background: var(--epl-color-background);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: var(--epl-line-height);
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg, iframe, embed, object {
  max-width: 100%;
}

img, video {
  height: auto;
}

iframe {
  border: 0;
}

a {
  color: var(--epl-color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #86c9b2;
  outline-offset: 3px;
}

button, input, textarea, select {
  max-width: 100%;
  font: inherit;
}

button, input[type="submit"], input[type="button"] {
  cursor: pointer;
}

.skip-link {
  position: absolute;
  z-index: 9999;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: #fff;
  background: #111;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  width: 100%;
  border-bottom: 1px solid var(--epl-color-border);
  background: #fff;
}
.header-inner {
  width: 100%;
  max-width: none;
  min-height: 68px;
  padding: 12px var(--epl-page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-branding { min-width: 0; }
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { display: block; width: auto; max-width: min(220px, 42vw); max-height: 56px; }
.site-title {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -0.025em;
}
.site-title a { color: inherit; text-decoration: none; }
.site-description {
  margin: 3px 0 0;
  color: var(--epl-color-muted);
  font-size: .875rem;
  line-height: 1.4;
}
.primary-navigation { margin-left: auto; }
.primary-navigation .menu,
.primary-navigation ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-navigation a {
  color: var(--epl-color-text);
  font-size: .94rem;
  text-decoration: none;
}
.primary-navigation a:hover { color: var(--epl-color-accent); }

.site-main { width: 100%; min-width: 0; }
.page-shell {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 56px) var(--epl-page-gutter);
}
.page-shell--wide { max-width: none; }
.entry-header { margin: 0 auto 28px; max-width: var(--epl-text-max); }
.entry-title, .archive-title {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  line-height: 1.12;
  letter-spacing: -.04em;
  font-weight: 780;
  text-wrap: balance;
}
.entry-meta, .archive-description, .entry-footer, .post-card-meta {
  color: var(--epl-color-muted);
  font-size: .9rem;
}
.entry-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.featured-image { margin: 0 auto 30px; max-width: none; }
.featured-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--epl-radius);
}
.entry-content {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  min-width: 0;
}
/* Keep ordinary reading text comfortable while allowing custom HTML tools and wide blocks to expand. */
.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > .wp-block-heading,
.entry-content > .wp-block-list {
  max-width: var(--epl-text-max);
  margin-left: auto;
  margin-right: auto;
}
.entry-content > * { min-width: 0; max-width: 100%; }
.entry-content > .wp-block-html {
  width: calc(100% + 2 * var(--epl-page-gutter));
  max-width: none;
  margin-left: calc(-1 * var(--epl-page-gutter));
  min-width: 0;
}
/* Custom HTML components often bring their own full-bleed CSS. Normalize the outer
   component here so 100vw/negative-margin hacks cannot create a scrollbar-width offset. */
.entry-content .wp-block-html .hff {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.entry-content .wp-block-html .hff table {
  display: table;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}
.entry-content > .alignwide {
  width: min(calc(100% + 160px), calc(100vw - 2 * var(--epl-page-gutter)));
  max-width: calc(100vw - 2 * var(--epl-page-gutter));
  margin-left: 50%;
  transform: translateX(-50%);
}
.entry-content > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.entry-content > .alignfull img,
.entry-content > .alignwide img { width: 100%; }
.entry-content p { margin: 0 0 1.25em; }
.entry-content h2 {
  margin: 1.8em 0 .65em;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.entry-content h3 {
  margin: 1.55em 0 .55em;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.3;
}
.entry-content h4 { margin: 1.4em 0 .5em; font-size: 1.12rem; }
.entry-content ul, .entry-content ol { padding-left: 1.5em; margin: 0 0 1.35em; }
.entry-content li { margin: .28em 0; }
.entry-content blockquote {
  margin: 1.6em 0;
  padding: 1em 1.25em;
  border-left: 4px solid var(--epl-color-accent);
  background: var(--epl-color-surface);
}
.entry-content table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.entry-content > table,
.entry-content .wp-block-table {
  max-width: 100%;
  overflow-x: auto;
}
.entry-content .wp-block-table table { min-width: 0; }
.entry-content .wp-block-html .hff .tw {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
.entry-content th, .entry-content td {
  padding: 10px 12px;
  border: 1px solid var(--epl-color-border);
  text-align: left;
}
.entry-content pre {
  max-width: 100%;
  overflow: auto;
  padding: 16px;
  border-radius: 8px;
  background: var(--epl-color-surface);
  font-size: .9rem;
}
.entry-content code { overflow-wrap: anywhere; }
.entry-content figure { max-width: 100%; margin: 1.5em 0; }
.entry-content figure img { display: block; }
.entry-content .wp-block-embed,
.entry-content .wp-block-video,
.entry-content .wp-block-audio { max-width: 100%; }
.entry-content .wp-block-embed iframe { width: 100%; }
.entry-content .wp-block-button__link {
  display: inline-block;
  border-radius: 7px;
  padding: .7em 1.1em;
  text-decoration: none;
}
.entry-content input,
.entry-content select,
.entry-content textarea { max-width: 100%; }
.entry-content .wp-block-html { width: 100%; max-width: 100%; min-width: 0; }
.entry-content .wp-block-html > * { max-width: 100%; box-sizing: border-box; }
.entry-content .wp-block-html .hff,
.entry-content .wp-block-html .hff * { box-sizing: border-box; }
.entry-content .wp-block-html .hff img,
.entry-content .wp-block-html .hff iframe,
.entry-content .wp-block-html .hff video { max-width: 100%; }
.entry-content .wp-block-columns { gap: clamp(16px, 2.5vw, 32px); }

.post-list {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(min(100%, 260px), 1fr) );
  gap: clamp(18px, 2.5vw, 30px);
}
.post-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--epl-color-border);
  border-radius: var(--epl-radius);
  background: #fff;
}
.post-card-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--epl-color-surface); }
.post-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 18px; }
.post-card-title { margin: 0 0 8px; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.3; letter-spacing: -.02em; }
.post-card-title a { color: inherit; text-decoration: none; }
.post-card-title a:hover { color: var(--epl-color-accent); }
.post-card-excerpt { margin: 8px 0 0; color: var(--epl-color-muted); font-size: .95rem; }
.pagination, .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}
.page-numbers {
  display: inline-flex;
  min-width: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--epl-color-border);
  border-radius: 7px;
  text-decoration: none;
}
.page-numbers.current { color: #fff; background: var(--epl-color-accent); border-color: var(--epl-color-accent); }
.post-navigation { display: flex; justify-content: space-between; gap: 20px; margin: 36px auto 0; max-width: var(--epl-text-max); }
.post-navigation a { overflow-wrap: anywhere; }
.site-footer {
  margin-top: 40px;
  border-top: 1px solid var(--epl-color-border);
  color: var(--epl-color-muted);
}
.footer-inner {
  width: 100%;
  padding: 24px var(--epl-page-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: .9rem;
}
.footer-inner p { margin: 0; }
.footer-navigation ul { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
.footer-navigation a { color: inherit; }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fff; clip: auto !important; clip-path: none; color: #111;
  display: block; height: auto; left: 8px; padding: 12px 16px;
  top: 8px; width: auto; z-index: 100000;
}
.alignleft { float: left; margin: .4em 1.4em .8em 0; }
.alignright { float: right; margin: .4em 0 .8em 1.4em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { color: var(--epl-color-muted); font-size: .875rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.gallery-item { margin: 0; max-width: 100%; }
.gallery-icon img { display: block; width: 100%; height: auto; }
.sticky { display: block; }
.bypostauthor { display: block; }
.error-404 { text-align: center; }

@media (max-width: 720px) {
  .header-inner { align-items: flex-start; flex-direction: column; gap: 12px; }
  .primary-navigation { width: 100%; margin-left: 0; }
  .primary-navigation .menu, .primary-navigation ul { gap: 8px 16px; }
  .entry-content > .alignwide { width: 100%; max-width: 100%; margin-left: 0; transform: none; }
  .entry-content > .alignfull { width: calc(100% + 2 * var(--epl-page-gutter)); max-width: none; margin-left: calc(-1 * var(--epl-page-gutter)); transform: none; }
  .entry-content > .alignfull img { border-radius: 0; }
  .post-navigation { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}