/*
Theme Name: Magyar Konyha
Theme URI: https://example.com/magyar-konyha
Author: Your Name
Author URI: https://example.com
Description: A performance-focused, psychology-informed WordPress theme purpose-built for a Hungarian recipe blog. Designed around recipe discovery, contextual internal linking, Pinterest and search traffic, and sustainable ad monetization. Replace this placeholder description, author, and screenshot.png before launch.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: magyar-konyha
Tags: food-and-drink, blog, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, block-styles

This is the required WordPress stylesheet header above. The design system
below is organized as CSS custom properties so the entire visual identity
(color, type, spacing, motion) can be tuned from one place, and so a future
dark-mode or seasonal palette is a matter of overriding tokens, not rewriting
components. See assets/css/layout.css, components.css, templates.css and
print.css for everything built on top of this foundation.
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {

  /* --- Brand palette ---------------------------------------------------
     Paprika (the spice itself) is the primary accent. A deep indigo,
     drawn from Hungary's traditional kekfesto ("blue-dye") folk textile
     craft, is the secondary accent and the one real aesthetic risk of this
     system: it gives the theme a second confident hue instead of leaning
     on cream-plus-one-warm-accent alone, and it ties directly back to a
     specific, real piece of Hungarian visual heritage rather than
     decoration for its own sake. */
  --mk-paprika:        #C1440E;
  --mk-paprika-dark:    #8F3208;
  --mk-paprika-light:  #F5E1D6;
  --mk-indigo:          #1F3A5C;
  --mk-indigo-dark:    #14283F;
  --mk-indigo-light:    #E7ECF1;
  --mk-gold:            #B27E13;
  --mk-gold-dark:      #8C6310;
  --mk-gold-light:      #F6EAD2;
  --mk-cream:          #FBF5EA;
  --mk-cream-deep:      #F3E7D4;
  --mk-charcoal:        #2E2620;
  --mk-brown-muted:    #6B5D52;
  --mk-sage:            #55693F;
  --mk-border:          #E3D6BE;
  --mk-white:          #FFFFFF;
  --mk-success:        #3F6B3A;
  --mk-danger:          #A3311C;

  /* --- Semantic aliases (components reference these, not the raw names) */
  --color-bg:                var(--mk-cream);
  --color-bg-alt:            var(--mk-cream-deep);
  --color-bg-dark:            var(--mk-indigo-dark);
  --color-surface:            var(--mk-white);
  --color-text:                var(--mk-charcoal);
  --color-text-muted:        var(--mk-brown-muted);
  --color-text-on-dark:        var(--mk-cream);
  --color-text-on-dark-muted: #C9C2B6;
  --color-border:            var(--mk-border);
  --color-border-on-dark:    rgba(251, 245, 234, 0.16);

  --color-accent:              var(--mk-paprika);
  --color-accent-hover:        var(--mk-paprika-dark);
  --color-accent-soft:        var(--mk-paprika-light);
  --color-accent-secondary:    var(--mk-indigo);
  --color-accent-secondary-hover: var(--mk-indigo-dark);
  --color-gold:                var(--mk-gold);
  --color-gold-soft:            var(--mk-gold-light);
  --color-link:                var(--mk-paprika-dark);
  --color-focus-ring:        var(--mk-indigo);

  /* --- Typography --------------------------------------------------------
     Fraunces (soft/wonky optical setting) carries the personality on
     headings only, where the character-volume of any single word is low.
     Inter carries the body copy and, critically, all ingredient/instruction
     text -- it has some of the most thoroughly documented broad European
     language coverage of any variable typeface, which matters here because
     Hungarian's double-acute accent (o-with-double-acute, u-with-double-acute)
     is unusual enough that not every display font handles it cleanly.
     Both are loaded with editable font-family stacks so either can be
     swapped from one place; see inc/enqueue.php for the loading strategy
     and self-hosting notes. */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --text-xs:   0.8125rem;   /* 13px - fine print, timestamps */
  --text-sm:   0.9375rem;   /* 15px - captions, labels, nav */
  --text-base: 1.0625rem;   /* 17px - body copy */
  --text-md:   1.1875rem;   /* 19px - lead paragraphs, ingredient lines */
  --text-lg:   clamp(1.375rem, 1.22rem + 0.7vw, 1.75rem);   /* h4/h3 */
  --text-xl:   clamp(1.75rem, 1.42rem + 1.4vw, 2.375rem);   /* h2 */
  --text-2xl:  clamp(2.0625rem, 1.6rem + 2.1vw, 3.125rem);  /* article h1 */
  --text-3xl:  clamp(2.375rem, 1.7rem + 3vw, 3.875rem);     /* homepage hero */

  --line-height-tight: 1.2;
  --line-height-snug:  1.4;
  --line-height-body:  1.7;

  /* --- Spacing (4px base grid) -------------------------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  /* --- Shape & elevation --------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  --shadow-sm:          0 1px 3px rgba(46, 38, 32, 0.09);
  --shadow-card:        0 2px 10px rgba(46, 38, 32, 0.08);
  --shadow-card-hover:  0 14px 30px rgba(46, 38, 32, 0.16);
  --shadow-lifted:      0 22px 44px rgba(46, 38, 32, 0.20);

  /* --- Layout -------------------------------------------------------------- */
  --container-max:    1200px;
  --container-wide:    1320px;
  --container-narrow:  740px;  /* recipe story reading column */
  --header-height:    72px;

  /* --- Motion ---------------------------------------------------------------
     Kept short and consistent: this is a recipe site, not a showcase.
     Motion should confirm an action happened, never perform for its own
     sake -- see frontend-design guidance on restraint. */
  --transition-fast: 150ms ease;
  --transition-base:  220ms cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Stacking -------------------------------------------------------------- */
  --z-header:          100;
  --z-sticky-utility:  90;
  --z-mobile-menu:    200;
  --z-overlay:        300;
}

/* ==========================================================================
   2. RESET & BASE ELEMENTS
   ========================================================================== */

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

html {
  /* Never override the user's browser font-size preference with a fixed
     px value here -- 100% respects it, and everything above is rem-based. */
  font-size: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
 * Base icon size. mk_icon() (inc/template-tags.php) outputs raw inline
 * <svg class="icon icon--{name}"> elements with a viewBox but no width/
 * height attributes -- intentional, so color and size are fully
 * controlled by CSS. Without a default here, a spot that forgets to set
 * its own size falls back to the browser's default replaced-element SVG
 * size (300x150px), which is exactly what caused the oversized
 * breadcrumb separator arrow. Every component with more specific sizing
 * needs (.btn .icon, .header-icon-btn .icon, etc.) already overrides
 * this via normal CSS specificity, so this only ever acts as a safety
 * net, not a behavior change for existing icons.
 */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  max-width: 20px;
  max-height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-tight);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); font-weight: 700; }

p { margin: 0 0 var(--space-5); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-hover); }

ul, ol { margin: 0 0 var(--space-5); padding-left: 1.3em; }
li { margin-bottom: var(--space-2); }

button, input, select, textarea { font-family: inherit; font-size: 100%; }
button { cursor: pointer; }

/* Visible, styled focus states everywhere -- never removed, only restyled */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   3. ACCESSIBILITY UTILITIES
   ========================================================================== */

.screen-reader-text,
.visually-hidden {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-overlay);
  background: var(--color-accent);
  color: var(--mk-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: var(--space-4);
  color: var(--mk-white);
}

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container--wide  { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

/* Like .container--narrow but with no horizontal padding of its own --
   for use nested inside a parent that's already padded (e.g. a narrow
   prose column inside the wider recipe-article grid), so padding never
   doubles up. */
.narrow-wrap { max-width: var(--container-narrow); margin-inline: auto; width: 100%; }

@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
}

.u-section        { padding-block: var(--space-8); }
.u-section--tight  { padding-block: var(--space-6); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  margin-bottom: var(--space-2);
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.section-heading h2 { margin-bottom: var(--space-1); }
.section-heading__link {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; white-space: nowrap;
}