/*
Theme Name: SpeakRecipe Child
Theme URI: https://speakrecipe.com
Description: SpeakRecipe Child Theme for Twenty Twenty
Author: SpeakRecipe
Template: twentytwenty
Version: 1.0.0
*/

/* ── SPEAKRECIPE BRAND COLORS & FONTS ── */
:root {
  --sr-cream: #fdf6ec;
  --sr-amber: #e8a020;
  --sr-amber-light: #fef3dc;
  --sr-green: #4a7c59;
  --sr-green-light: #eaf2ed;
  --sr-green-dark: #2d5a3d;
  --sr-text: #2c2c2c;
  --sr-text-muted: #888888;
  --sr-white: #ffffff;
  --sr-border: #e0d5c5;
  --sr-red: #c0392b;
  --sr-radius: 16px;
}

/* ── GLOBAL BODY ── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Georgia, serif;
  background-color: var(--sr-cream);
  color: var(--sr-text);
}

/* ── SITE HEADER ── */
#site-header {
  background-color: var(--sr-green-dark);
  border-bottom: 3px solid var(--sr-amber);
}

.header-inner {
  padding: 12px 24px;
}

/* ── SITE TITLE ── */
.site-title a,
.site-title a:visited {
  color: var(--sr-white);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-decoration: none;
}

.site-title a:hover {
  color: var(--sr-amber);
}

/* ── SITE DESCRIPTION ── */
.site-description {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}

/* ── NAVIGATION ── */
.primary-menu-wrapper {
  background-color: var(--sr-green-dark);
}

.primary-menu > li > a,
.primary-menu > li > .toggle {
  color: var(--sr-white);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.primary-menu > li > a:hover {
  color: var(--sr-amber);
}

/* ── MOBILE MENU TOGGLE ── */
.menu-toggle {
  color: var(--sr-white);
}

/* ── THIN MENU (used on app pages) ── */
body.thin-menu #site-header {
  padding: 0;
}

body.thin-menu .header-inner {
  padding: 8px 20px;
  min-height: unset;
}

body.thin-menu .site-title a {
  font-size: 16px;
}

body.thin-menu .site-description {
  display: none;
}

/* ── HIDE PAGE TITLE (when option selected) ── */
body.hide-title .entry-header,
body.hide-title .page-header {
  display: none;
}

/* ── CONTENT AREA ── */
.entry-content {
  max-width: 100%;
}

/* ── LINKS ── */
a {
  color: var(--sr-green);
}

a:hover {
  color: var(--sr-green-dark);
}

/* ── BUTTONS ── */
.wp-block-button__link,
button,
input[type="submit"] {
  background-color: var(--sr-green);
  color: var(--sr-white);
  border-radius: var(--sr-radius);
  border: none;
  font-weight: 600;
  padding: 14px 28px;
  transition: background 0.2s;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
  background-color: var(--sr-green-dark);
  color: var(--sr-white);
}

/* ── FOOTER ── */
#site-footer {
  background-color: var(--sr-green-dark);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  padding: 20px;
  text-align: center;
}

#site-footer a {
  color: var(--sr-amber);
}

/* ── BLANK PAGE — no header, no footer, no padding ── */
body.blank-page-template {
  background: var(--sr-cream);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.blank-page-template #site-header,
body.blank-page-template #site-footer,
body.blank-page-template .footer-nav,
body.blank-page-template #comments {
  display: none !important;
}

body.blank-page-template #page,
body.blank-page-template #content,
body.blank-page-template #primary,
body.blank-page-template .entry-header,
body.blank-page-template .post-inner,
body.blank-page-template .content-inner,
body.blank-page-template .section-inner {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

body.blank-page-template .entry-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

/* ── THIN MENU PAGE — slim header, no footer ── */
body.thin-menu-template #site-footer,
body.thin-menu-template .footer-nav,
body.thin-menu-template #comments {
  display: none !important;
}

body.thin-menu-template #page,
body.thin-menu-template #content,
body.thin-menu-template #primary,
body.thin-menu-template .entry-header,
body.thin-menu-template .post-inner,
body.thin-menu-template .content-inner,
body.thin-menu-template .section-inner {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

body.thin-menu-template .entry-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

body.thin-menu-template #site-header {
  padding: 0;
}

body.thin-menu-template .header-inner {
  padding: 6px 20px;
  min-height: unset;
}

body.thin-menu-template .site-title a {
  font-size: 15px;
}

body.thin-menu-template .site-description {
  display: none;
}