/*
Theme Name: RecipeBite
Theme URI: https://example.com/
Author: OpenAI
Description: Modern, responsive food recipe blog theme with recipe cards, categories, search, and clean recipe post layouts.
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: recipebite
*/

:root {
  --rb-primary: #e85d04;
  --rb-primary-dark: #c94d00;
  --rb-accent: #2a9d8f;
  --rb-text: #252525;
  --rb-muted: #6b7280;
  --rb-border: #e8e8e8;
  --rb-bg: #fffaf5;
  --rb-card: #ffffff;
  --rb-dark: #171717;
  --rb-radius: 18px;
  --rb-shadow: 0 10px 30px rgba(20,20,20,.07);
  --rb-container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--rb-text);
  background: #fff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--rb-primary); }
button, input, textarea, select { font: inherit; }
.container { width: min(var(--rb-container), calc(100% - 36px)); margin-inline: auto; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--rb-border); backdrop-filter: blur(12px); }
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 28px; }
.site-branding { display:flex; align-items:center; gap:12px; margin-right:auto; }
.custom-logo { max-height: 48px; width:auto; }
.site-title { font-size: 25px; font-weight: 850; letter-spacing: -1px; }
.site-description { display:none; }
.main-navigation ul { list-style:none; display:flex; align-items:center; gap:25px; margin:0; padding:0; }
.main-navigation li { position:relative; }
.main-navigation .sub-menu { position:absolute; top:100%; left:0; min-width:190px; display:block; padding:8px 0; margin:10px 0 0; background:#fff; border:1px solid var(--rb-border); border-radius:12px; box-shadow:var(--rb-shadow); opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s ease; z-index:20; }
.main-navigation .sub-menu li { display:block; width:100%; }
.main-navigation .sub-menu a { display:block; padding:8px 15px; white-space:nowrap; }
.main-navigation li:hover > .sub-menu, .main-navigation li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); }
.main-navigation .sub-menu .sub-menu { top:-9px; left:100%; margin-left:4px; margin-top:0; }
.main-navigation a { font-weight:650; font-size:14px; }
.mobile-menu { border-top:1px solid var(--rb-border); background:#fff; }
.mobile-primary-menu, .mobile-primary-menu ul { list-style:none; margin:0; padding:8px 0; }
.mobile-primary-menu li { border-bottom:1px solid #f0f0f0; }
.mobile-primary-menu a { display:block; padding:10px 0; font-weight:650; }
.mobile-primary-menu .sub-menu { padding-left:18px; }
.header-search { width: 220px; }
.header-search form { display:flex; align-items:center; background:#f7f7f7; border:1px solid var(--rb-border); border-radius:999px; overflow:hidden; }
.header-search input { border:0; outline:0; background:transparent; width:100%; padding:9px 13px; font-size:13px; }
.header-search button { border:0; background:transparent; padding:8px 12px; cursor:pointer; }
.menu-toggle { display:none; border:0; background:var(--rb-text); color:#fff; border-radius:10px; padding:8px 11px; }

/* Hero */
.hero { background: linear-gradient(135deg,#fff4e8 0%,#fffaf5 55%,#f1faf8 100%); padding:70px 0 62px; }
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:54px; }
.eyebrow { color:var(--rb-primary); text-transform:uppercase; letter-spacing:2px; font-size:12px; font-weight:850; margin:0 0 10px; }
.hero h1 { font-size: clamp(40px,5.5vw,70px); line-height:1.02; letter-spacing:-3px; margin:0 0 20px; max-width:680px; }
.hero p { color:var(--rb-muted); font-size:18px; max-width:600px; margin:0 0 28px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button, .wp-block-button__link {
  display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px;
  background:var(--rb-primary); color:#fff; font-weight:750; padding:12px 20px; cursor:pointer;
}
.button:hover { background:var(--rb-primary-dark); color:#fff; }
.button.secondary { background:#fff; color:var(--rb-text); border:1px solid var(--rb-border); }
.hero-image { border-radius:30px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.13); transform:rotate(1deg); }
.hero-image img { width:100%; aspect-ratio: 4/3; object-fit:cover; }

/* Sections */
.section { padding:65px 0; }
.section.alt { background:var(--rb-bg); }
.section-head { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:28px; }
.section-head h2 { margin:0; font-size:clamp(27px,3vw,38px); letter-spacing:-1.5px; line-height:1.15; }
.section-head p { margin:7px 0 0; color:var(--rb-muted); }
.view-all { color:var(--rb-primary); font-weight:750; white-space:nowrap; }

/* Cards */
.recipe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.recipe-card { background:var(--rb-card); border:1px solid var(--rb-border); border-radius:var(--rb-radius); overflow:hidden; box-shadow:var(--rb-shadow); transition:transform .2s ease, box-shadow .2s ease; }
.recipe-card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(20,20,20,.1); }
.card-image { position:relative; background:#f2f2f2; }
.card-image img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.card-body { padding:19px; }
.category-label { color:var(--rb-primary); text-transform:uppercase; letter-spacing:1px; font-size:11px; font-weight:850; }
.card-title { margin:6px 0 8px; font-size:21px; line-height:1.2; letter-spacing:-.5px; }
.card-excerpt { color:var(--rb-muted); font-size:14px; margin:0 0 14px; }
.recipe-meta { display:flex; flex-wrap:wrap; gap:12px; color:var(--rb-muted); font-size:12px; font-weight:650; }
.rating { color:#f59e0b; }
.featured-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:25px; }
.featured-card { position:relative; min-height:450px; border-radius:24px; overflow:hidden; color:#fff; background:#333; }
.featured-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.featured-card:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.03) 70%); }
.featured-content { position:absolute; z-index:2; bottom:0; left:0; right:0; padding:30px; }
.featured-content h3 { font-size:36px; line-height:1.08; margin:8px 0 10px; letter-spacing:-1.2px; }
.featured-content p { color:rgba(255,255,255,.85); max-width:650px; }
.mini-stack { display:grid; gap:18px; }
.mini-card { display:grid; grid-template-columns:125px 1fr; gap:15px; align-items:center; padding:12px; border:1px solid var(--rb-border); border-radius:17px; background:#fff; }
.mini-card img { width:125px; height:105px; object-fit:cover; border-radius:13px; }
.mini-card h4 { margin:5px 0; font-size:17px; line-height:1.25; }

/* Categories */
.category-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.category-tile { min-height:115px; display:flex; align-items:end; padding:15px; border-radius:18px; color:#fff; position:relative; overflow:hidden; background:#333; }
.category-tile:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.05)); }
.category-tile span { position:relative; z-index:2; font-weight:800; font-size:15px; }
.category-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Single */
.page-hero { background:var(--rb-bg); padding:55px 0; }
.page-title { font-size:clamp(35px,5vw,58px); line-height:1.05; letter-spacing:-2px; margin:0; }
.breadcrumbs { color:var(--rb-muted); font-size:13px; margin-bottom:12px; }
.content-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:50px; }
.post-header .entry-title { font-size:clamp(36px,5vw,62px); line-height:1.05; letter-spacing:-2px; margin:10px 0 15px; }
.post-meta { color:var(--rb-muted); display:flex; flex-wrap:wrap; gap:14px; font-size:13px; }
.featured-post-image { margin:30px 0; border-radius:24px; overflow:hidden; }
.featured-post-image img { width:100%; max-height:620px; object-fit:cover; }
.entry-content { font-size:17px; }
.entry-content h2, .entry-content h3 { line-height:1.2; margin-top:35px; }
.entry-content ul, .entry-content ol { padding-left:24px; }
.entry-content img { border-radius:16px; }
.sidebar-widget { border:1px solid var(--rb-border); border-radius:18px; padding:20px; margin-bottom:20px; }
.sidebar-widget h3 { margin-top:0; font-size:18px; }

/* Recipe box */
.recipe-box { border:1px solid var(--rb-border); border-radius:22px; overflow:hidden; margin:35px 0; box-shadow:var(--rb-shadow); background:#fff; }
.recipe-box-head { padding:25px; background:linear-gradient(135deg,#fff4e8,#fff); border-bottom:1px solid var(--rb-border); }
.recipe-box-head h2 { margin:0 0 7px; font-size:30px; }
.recipe-summary { color:var(--rb-muted); margin:0; }
.recipe-stats { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--rb-border); }
.recipe-stat { padding:17px; text-align:center; border-right:1px solid var(--rb-border); }
.recipe-stat:last-child { border-right:0; }
.recipe-stat strong { display:block; font-size:17px; }
.recipe-stat span { color:var(--rb-muted); font-size:11px; text-transform:uppercase; letter-spacing:.7px; }
.recipe-columns { display:grid; grid-template-columns:.8fr 1.2fr; gap:0; }
.recipe-ingredients, .recipe-instructions { padding:25px; }
.recipe-ingredients { border-right:1px solid var(--rb-border); background:#fffaf5; }
.recipe-ingredients h3, .recipe-instructions h3 { margin-top:0; }
.recipe-ingredients ul { list-style:none; padding:0; margin:0; }
.recipe-ingredients li { padding:9px 0; border-bottom:1px dashed #ddd; }
.recipe-instructions ol { padding-left:23px; }
.recipe-instructions li { padding:6px 0; }

/* Forms */
.search-page-form { display:flex; max-width:650px; margin:25px 0 40px; }
.search-page-form input { flex:1; border:1px solid var(--rb-border); border-radius:999px 0 0 999px; padding:14px 18px; outline:none; }
.search-page-form button { border:0; background:var(--rb-primary); color:#fff; padding:0 25px; border-radius:0 999px 999px 0; font-weight:700; }

/* Footer */
.site-footer { background:#171717; color:#fff; padding:60px 0 25px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:35px; }
.site-footer .site-title { color:#fff; }
.footer-heading { font-size:15px; margin:0 0 14px; }
.site-footer ul { list-style:none; margin:0; padding:0; }
.site-footer li { margin:7px 0; color:#bbb; font-size:14px; }
.site-footer a:hover { color:#fff; }
.footer-bottom { border-top:1px solid #333; margin-top:40px; padding-top:20px; color:#999; font-size:13px; display:flex; justify-content:space-between; gap:15px; }

/* Pagination */
.pagination { margin-top:35px; display:flex; gap:8px; flex-wrap:wrap; }
.pagination a, .pagination span { border:1px solid var(--rb-border); padding:8px 13px; border-radius:9px; }
.pagination .current { background:var(--rb-primary); color:#fff; border-color:var(--rb-primary); }

/* WordPress */
.alignwide { max-width:var(--rb-container); margin-left:auto; margin-right:auto; }
.wp-caption { max-width:100%; }
.wp-caption-text { color:var(--rb-muted); font-size:12px; }
blockquote { margin:25px 0; padding:15px 20px; border-left:4px solid var(--rb-primary); background:var(--rb-bg); }

/* Responsive */
@media (max-width: 1050px) {
  .main-navigation { display:none; }
  .header-search { display:none; }
  .menu-toggle { display:block; }
  .hero-grid, .featured-grid { grid-template-columns:1fr; }
  .category-grid { grid-template-columns:repeat(3,1fr); }
  .recipe-grid { grid-template-columns:repeat(2,1fr); }
  .content-layout { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 680px) {
  .container { width:min(var(--rb-container), calc(100% - 24px)); }
  .header-inner { min-height:64px; }
  .hero { padding:48px 0; }
  .hero h1 { letter-spacing:-2px; }
  .section { padding:45px 0; }
  .recipe-grid { grid-template-columns:1fr; }
  .category-grid { grid-template-columns:repeat(2,1fr); }
  .featured-card { min-height:380px; }
  .featured-content h3 { font-size:28px; }
  .recipe-stats { grid-template-columns:repeat(2,1fr); }
  .recipe-stat:nth-child(2) { border-right:0; }
  .recipe-stat { border-bottom:1px solid var(--rb-border); }
  .recipe-columns { grid-template-columns:1fr; }
  .recipe-ingredients { border-right:0; border-bottom:1px solid var(--rb-border); }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
  .section-head { align-items:start; flex-direction:column; }
}