/*
Theme Name: LCHF svaki dan
Theme URI: https://lchfsvakidan.com
Author: LCHF svaki dan
Description: Lagana vlastita tema za LCHF svaki dan — LCHF i keto recepti. Mobile-first, brza, bez ovisnosti i bez nadogradnji proizvođača. Forked from the Turbo Tasty theme.
Version: 1.1.19
Requires at least: 6.0
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: lchfsvakidan
*/

/* ---------- Self-hosted heading font ---------- */
@font-face {
  font-family: 'Platypi';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  /* Platypi (SIL OFL 1.1) — full Latin incl. č ć š ž đ; copied from Twenty Twenty-Five. */
  src: url('assets/fonts/platypi-var.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */
:root {
  /* Palette taken from the logo: pink / sky blue / yellow, black outlines, cream. */
  --tt-bg: #ffffff;
  --tt-surface: #fff6d8;      /* light butter yellow — tinted sections */
  --tt-text: #1a1a1a;
  --tt-muted: #6b6b6b;
  --tt-primary: #d1137a;      /* deeper logo pink: 5:1 contrast with white text */
  --tt-primary-dark: #a80e62;
  --tt-accent: #fbdc44;       /* logo yellow */
  --tt-pink: #fd3da4;         /* logo pink (decorative only, too light for text) */
  --tt-sky: #4fd2fe;          /* logo blue (decorative only) */
  --tt-sky-soft: #e4f7ff;
  --tt-border: #ece6d3;
  --tt-maxw: 1200px;
  --tt-radius: 10px;
  --tt-gap: 1.5rem;
  --tt-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tt-font-heading: "Platypi", Georgia, "Times New Roman", serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: var(--tt-primary); text-decoration: none; }
a:hover, a:focus { color: var(--tt-primary-dark); text-decoration: underline; }

/* ---------- Base typography (mobile-first) ---------- */
body {
  font-family: var(--tt-font-body);
  color: var(--tt-text);
  background: var(--tt-bg);
  line-height: 1.6;
  font-size: 1rem;
}
h1, h2, h3, h4 { font-family: var(--tt-font-heading); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

/* ---------- Layout ---------- */
.tt-container { width: 100%; max-width: var(--tt-maxw); margin-inline: auto; padding-inline: 1rem; }
.tt-skip-link { position: absolute; left: -9999px; }
.tt-skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 1000; }

/* ---------- Header ---------- */
.tt-header { position: relative; z-index: 10; background: var(--tt-bg); }
/* Logo-coloured stripe under the header: pink / sky / yellow. */
.tt-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--tt-pink) 0 33.33%, var(--tt-sky) 33.33% 66.66%, var(--tt-accent) 66.66% 100%); }
.tt-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: var(--tt-header-pad, 12px); }
/* Logo sits in the bar and its height sets the bar height (plus the padding). */
.tt-logo { display: flex; align-items: center; }
.tt-logo img, .tt-logo a img { height: var(--tt-logo-h, 144px); width: auto; max-width: none; }
.tt-brand { font-family: var(--tt-font-heading); font-weight: 700; font-size: 1.3rem; color: var(--tt-text); }
.tt-brand:hover { text-decoration: none; }
.tt-nav ul { list-style: none; margin: 0; padding: 0; }
.tt-nav a { color: var(--tt-text); font-weight: 500; }
.tt-header__actions { display: flex; align-items: center; gap: .75rem; }
.tt-btn { display: inline-block; background: var(--tt-primary); color: #fff; padding: .5rem 1rem; border-radius: var(--tt-radius); font-weight: 600; }
.tt-btn:hover, .tt-btn:focus { background: var(--tt-primary-dark); color: #fff; text-decoration: none; }

/* Mobile: hide inline nav by default (real toggle built in Phase 3) */
.tt-nav { display: none; }
@media (min-width: 900px) { .tt-nav { display: block; } }

/* ---------- Footer ---------- */
.tt-footer { background: var(--tt-text); border-top: 1px solid var(--tt-text); margin-top: 3rem; padding: 2rem 0; color: #fff; }
.tt-footer a { color: rgba(255,255,255,.8); }
.tt-footer a:hover { color: #fff; }
.tt-footer__note { width: 100%; max-width: var(--tt-maxw); margin-inline: auto; margin-bottom: 1.25rem; padding-inline: 1rem; box-sizing: border-box; font-size: .85rem; color: rgba(255,255,255,.65); }
.tt-footer__note a { text-decoration: underline; }
.tt-footer__inner { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.tt-footer__copy { margin: 0; color: rgba(255,255,255,.8); }
.tt-footer__legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.tt-footer__legal a:hover { color: var(--tt-accent); }
@media (min-width: 700px) {
	.tt-footer__inner { flex-direction: row; justify-content: space-between; align-items: center; }
	.tt-footer__legal { margin-left: auto; }
}

/* ---------- Generic content / archive fallback ---------- */
.tt-main { padding-block: 2rem; }
.tt-post-list { display: grid; gap: var(--tt-gap); grid-template-columns: 1fr; }
.tt-post-list[hidden] { display: none; } /* the display:grid above overrides the UA [hidden] rule, so restore it explicitly (e.g. fridge filter hides the default archive list) */
@media (min-width: 600px) { .tt-post-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tt-post-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .tt-post-list--four { grid-template-columns: repeat(4, 1fr); } }
.tt-card { border: 1px solid var(--tt-border); border-radius: var(--tt-radius); overflow: hidden; background: var(--tt-bg); }
.tt-card__body { padding: 1rem; }
.tt-card__title { font-size: 1.1rem; margin: 0 0 .25rem; }
.tt-card__title a { color: var(--tt-text); }
.tt-card__title a:hover { color: var(--tt-primary); }
.tt-card__meta { color: var(--tt-muted); font-size: .85rem; }

/* ===================== Homepage ===================== */
.tt-section { padding-block: 2.5rem; }
.tt-section__title { font-size: 1.5rem; margin: 0 0 1.25rem; }
.tt-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.tt-section__head .tt-section__title { margin: 0; }
.tt-section__more { font-weight: 600; white-space: nowrap; }

/* Hero — two-column image header */
html { overflow-x: clip; } /* 50vw below includes the desktop scrollbar — don't let it scroll sideways */
.tt-hero {
	padding: 0;
	margin-inline: calc(50% - 50vw); /* full-bleed: spread the hero below the menu */
	margin-top: -2rem; /* sit flush under the header (cancels .tt-main top padding) */
	min-height: var(--tt-hero-h, 66vh); /* ~2/3 of the first screen (Customizer) */
	display: flex;
	align-items: center;
}
.tt-hero.has-image {
	background-image: var(--tt-hero-sm);
	background-size: cover;
	background-position: center;
	position: relative;
}
.tt-hero.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--tt-hero-overlay, #1a1a1a); /* Customizer: overlay color */
	opacity: var(--tt-hero-overlay-opacity, .45);       /* Customizer: overlay opacity */
}
.tt-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--tt-maxw, 1100px);
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 5rem) 1.25rem;
	display: flex;
	align-items: center;
	gap: 2rem;
}
.tt-hero__text { flex: 1 1 55%; }
.tt-hero__search { flex: 1 1 45%; }
.tt-hero.has-image .tt-hero__title,
.tt-hero.has-image .tt-hero__sub { color: #fff; }
.tt-hero__title { margin: 0 0 .5rem; }
.tt-hero__sub { color: var(--tt-muted); font-size: 1.1rem; margin-bottom: 1.5rem; }
.tt-hero__search form { display: flex; gap: .5rem; max-width: min(520px, 100%); margin-inline: auto; }
.tt-hero__search input[type="search"] { flex: 1; min-width: 0; padding: .7rem 1rem; border: 1px solid var(--tt-border); border-radius: var(--tt-radius); font-size: 1rem; }
.tt-hero__search input[type="submit"] { background: var(--tt-primary); color: #fff; border: 0; padding: .7rem 1.25rem; border-radius: var(--tt-radius); font-weight: 600; cursor: pointer; }
/* Hero layouts (Customizer → Homepage Hero → Layout) */
.tt-hero--split-left .tt-hero__inner { flex-direction: row; }
.tt-hero--split-right .tt-hero__inner { flex-direction: row-reverse; }
.tt-hero--stack-left .tt-hero__inner,
.tt-hero--stack-center .tt-hero__inner,
.tt-hero--stack-right .tt-hero__inner { flex-direction: column; }
.tt-hero--stack-left .tt-hero__inner { align-items: flex-start; }
.tt-hero--stack-center .tt-hero__inner { align-items: center; text-align: center; }
.tt-hero--stack-right .tt-hero__inner { align-items: flex-end; text-align: right; }
.tt-hero[class*="stack-"] .tt-hero__text,
.tt-hero[class*="stack-"] .tt-hero__search { flex: 0 1 auto; width: 100%; max-width: 560px; }
.tt-hero--stack-left .tt-hero__search form { margin-inline: 0; }
.tt-hero--stack-right .tt-hero__search form { margin-left: auto; margin-right: 0; }
.tt-hero__extra { margin-top: 1rem; }

@media (max-width: 720px) {
	.tt-hero { min-height: 55vh; }
	/* Force ALL hero layouts to stack on phones (beats the .tt-hero--split-* row rules). */
	.tt-hero--split-left .tt-hero__inner,
	.tt-hero--split-right .tt-hero__inner,
	.tt-hero__inner { flex-direction: column; align-items: stretch; gap: 1.25rem; }
	.tt-hero[class*="stack-"] .tt-hero__text,
	.tt-hero[class*="stack-"] .tt-hero__search { max-width: 100%; }
}

/* Category tiles */
.tt-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .tt-tiles { grid-template-columns: repeat(3, 1fr); } }
.tt-tile { position: relative; display: flex; align-items: flex-end; min-height: 150px; border-radius: var(--tt-radius); overflow: hidden; background-size: cover; background-position: center; color: #fff; }
.tt-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 70%); }
.tt-tile--noimg { background: linear-gradient(135deg, var(--tt-primary), var(--tt-primary-dark)); }
.tt-tile__label { position: relative; z-index: 1; margin: 0 .9rem .9rem; padding: .4rem .85rem; border-radius: 999px; background: var(--tt-accent); color: var(--tt-text); font-weight: 700; font-size: 1rem; transition: background .15s, color .15s; }
.tt-tile:hover { text-decoration: none; }
.tt-tile:hover .tt-tile__label { background: var(--tt-primary); color: #fff; }

/* Card media */
.tt-card__media { display: block; aspect-ratio: 3 / 2; background: var(--tt-surface); }
.tt-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tt-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.tt-card__media .tt-card__placeholder img { width: auto; height: 55%; object-fit: contain; opacity: .9; }

/* Feature (in season) */
/* "Skoči na recept" — jump link to the WPZOOM recipe card. */
.tt-single__jump { margin: .75rem 0 0; }
html { scroll-behavior: smooth; }
#wpzoom-recipe-card { scroll-margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* "Što je LCHF?" guide block — intro left, guide articles right. */
.tt-guide { display: grid; gap: 1.5rem; align-items: center; margin-block: 2.5rem; padding: 1.75rem; background: var(--tt-sky-soft); border: 2px solid var(--tt-sky); border-radius: var(--tt-radius); }
@media (min-width: 800px) { .tt-guide { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; padding: 2.5rem; } }
.tt-guide__title { font-size: 1.8rem; margin: .25rem 0 .75rem; }
.tt-guide__intro p { color: var(--tt-text); max-width: 46ch; }
.tt-guide__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.tt-guide__item a { display: flex; align-items: center; gap: 1rem; padding: .6rem; background: var(--tt-bg); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); color: var(--tt-text); font-weight: 600; }
.tt-guide__item a:hover, .tt-guide__item a:focus { border-color: var(--tt-primary); text-decoration: none; color: var(--tt-primary-dark); }
.tt-guide__thumb { width: 64px; height: 64px; object-fit: cover; border-radius: calc(var(--tt-radius) - 4px); flex: none; }
.tt-guide__item-title { font-family: var(--tt-font-heading); line-height: 1.3; }
.tt-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; color: var(--tt-primary); }

/* Newsletter CTA band */
.tt-cta { background: var(--tt-news-bg, var(--tt-primary)); color: var(--tt-news-text, #fff); border-radius: var(--tt-radius); margin-block: 2.5rem; }
.tt-cta__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
	max-width: 960px;
	margin-inline: auto;
	padding: 2.5rem 1.5rem;
}
.tt-cta__text { flex: 1 1 50%; }
.tt-cta__form { flex: 1 1 40%; }
.tt-cta__form input[type="email"] { width: 100%; }
/* Email Subscribers form inside the newsletter band + subscribe modal. */
.tt-cta__form label, .tt-modal__body label { display: block; font-size: .9rem; margin-bottom: .35rem; }
.tt-cta__form input[type="email"], .tt-cta__form input[type="text"],
.tt-modal__body input[type="email"], .tt-modal__body input[type="text"] { width: 100%; padding: .7rem .9rem; border: 1px solid var(--tt-border); border-radius: var(--tt-radius); font: inherit; color: var(--tt-text); background: #fff; }
.tt-cta__form input[type="checkbox"], .tt-modal__body input[type="checkbox"] { width: auto; margin-right: .4rem; vertical-align: middle; }
.tt-cta__form input[type="submit"], .tt-cta__form button[type="submit"], .tt-cta__form .es_submit_button { margin-top: .5rem; background: #fff; color: var(--tt-primary-dark); border: 0; padding: .7rem 1.4rem; border-radius: var(--tt-radius); font: inherit; font-weight: 700; cursor: pointer; }
.tt-modal__body input[type="submit"], .tt-modal__body button[type="submit"], .tt-modal__body .es_submit_button { margin-top: .5rem; background: var(--tt-primary); color: #fff; border: 0; padding: .7rem 1.4rem; border-radius: var(--tt-radius); font: inherit; font-weight: 700; cursor: pointer; }
.tt-cta__form input[type="submit"]:hover, .tt-cta__form .es_submit_button:hover { background: var(--tt-surface); }
.tt-modal__body input[type="submit"]:hover, .tt-modal__body .es_submit_button:hover { background: var(--tt-primary-dark); }
@media (max-width: 720px) {
	.tt-cta__inner { flex-direction: column; align-items: stretch; }
}
.tt-cta__title { color: var(--tt-news-text, #fff); margin-bottom: .5rem; }
.tt-cta p { color: var(--tt-news-text, rgba(255,255,255,.9)); margin-bottom: 1.25rem; }

/* About teaser */
.tt-about { background: var(--tt-surface); border-radius: var(--tt-radius); margin-bottom: 2.5rem; }
.tt-about__inner { max-width: 720px; margin-inline: auto; padding: 2.5rem 1.5rem; text-align: center; }
.tt-about p { color: var(--tt-muted); margin-bottom: 1.25rem; }

/* ===================== Navigation ===================== */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* Buttons reset */
.tt-burger, .tt-search-toggle, .tt-menu__toggle { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }

/* Hamburger (mobile only) */
.tt-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 8px; }
.tt-burger span { display: block; height: 2px; background: var(--tt-text); border-radius: 2px; transition: transform .2s; }
.tt-search-toggle { font-size: 1.1rem; line-height: 1; padding: .4rem; }

/* Header search field (toggled) */
.tt-header-search { display: none; border-top: 1px solid var(--tt-border); background: var(--tt-surface); padding: .9rem 0; }
.tt-header-search.is-open { display: block; }
.tt-searchform { display: flex; gap: .5rem; }
.tt-searchform input[type="search"] { flex: 1; padding: .6rem .9rem; border: 1px solid var(--tt-border); border-radius: var(--tt-radius); font-size: 1rem; }
.tt-searchform input[type="submit"] { background: var(--tt-primary); color: #fff; border: 0; padding: .6rem 1.1rem; border-radius: var(--tt-radius); font-weight: 600; cursor: pointer; }

/* Menu — mobile first: in-flow push panel with drill-down submenus */
.tt-header__inner { flex-wrap: wrap; }
.tt-brand, .tt-logo { order: 1; }
.tt-header__actions { order: 2; }
.tt-nav { order: 3; flex-basis: 100%; }
.tt-header.tt-open .tt-nav { display: block; margin-top: .5rem; border-top: 1px solid var(--tt-border); }
.tt-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tt-menu > li { border-bottom: 1px solid var(--tt-border); }
.tt-menu a, .tt-menu__toggle { display: block; width: 100%; text-align: left; padding: .9rem .25rem; color: var(--tt-text); font-weight: 600; font-size: var(--tt-menu-size, 1rem); }
.tt-menu__toggle { display: flex; justify-content: space-between; align-items: center; }
.tt-caret { color: var(--tt-muted); }
.tt-submenu { display: none; list-style: none; margin: 0; padding: 0; }
.tt-submenu a { padding: .9rem .25rem; font-weight: 500; color: var(--tt-text); }
.tt-submenu__cta a { color: var(--tt-primary); font-weight: 700; }
.tt-submenu__back { border-bottom: 1px solid var(--tt-border); }
.tt-back { display: block; width: 100%; text-align: left; padding: .9rem .25rem; color: var(--tt-muted); font-weight: 700; cursor: pointer; }
/* Drill-down: tapping a group replaces level 1 with that group's links */
.tt-menu.tt-drill > li:not(.is-active) { display: none; }
.tt-menu.tt-drill > li.is-active { border-bottom: 0; }
.tt-menu.tt-drill > li.is-active > .tt-menu__toggle { display: none; }
.tt-menu.tt-drill > li.is-active > .tt-submenu { display: block; }
/* Hamburger morphs into an X when open */
.tt-burger span { transition: transform .2s, opacity .2s; }
.tt-open .tt-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tt-open .tt-burger span:nth-child(2) { opacity: 0; }
.tt-open .tt-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Desktop nav (≥900px): hover dropdowns, no drill, no push */
@media (min-width: 900px) {
	.tt-header__inner { flex-wrap: nowrap; }
	.tt-brand, .tt-logo, .tt-header__actions, .tt-nav { order: 0; }
	.tt-nav { flex-basis: auto; }
	.tt-burger { display: none; }
	.tt-submenu__back { display: none; }
	.tt-menu { flex-direction: row; align-items: center; gap: 1.5rem; }
	.tt-menu > li { border: 0; }
	.tt-menu a, .tt-menu__toggle { padding: .25rem 0; width: auto; font-weight: 500; }
	.tt-menu__toggle { display: inline-flex; gap: .25rem; }
	.tt-has-children { position: relative; }
	.tt-submenu { position: absolute; top: 100%; left: 0; min-width: 230px; display: none; background: #fff; border: 1px solid var(--tt-border); border-radius: var(--tt-radius); box-shadow: 0 12px 28px rgba(26,26,26,.14); padding: .5rem 0; z-index: 60; }
	.tt-has-children:hover .tt-submenu, .tt-has-children:focus-within .tt-submenu { display: block; }
	.tt-submenu a { padding: .5rem 1rem; }
	.tt-submenu a:hover { background: var(--tt-surface); text-decoration: none; }
	.tt-menu a:hover, .tt-menu__toggle:hover { color: var(--tt-primary); }
	/* Neutralize any lingering mobile drill state on desktop */
	.tt-menu.tt-drill > li { display: block; }
	.tt-menu.tt-drill > li.is-active > .tt-menu__toggle { display: inline-flex; }
	.tt-menu.tt-drill > li.is-active > .tt-submenu { display: none; }
}
@media (max-width: 560px) {
	.tt-header__subscribe { display: none; } /* keep header tidy on small phones; Subscribe is in footer + CTA */
}

/* ===================== Single post / recipe ===================== */
.tt-single { max-width: var(--tt-maxw); margin-inline: auto; }
.tt-single__cats { margin: 0 0 .5rem; font-size: .85rem; }
.tt-single__cats a { color: var(--tt-primary); font-weight: 600; }
.tt-single__title { font-size: 2rem; margin: 0 0 .5rem; }
@media (min-width: 700px) { .tt-single__title { font-size: 2.5rem; } }
.tt-single__meta { color: var(--tt-muted); margin-bottom: 1.5rem; }
.tt-single__media { margin: 0 0 1.5rem; }
.tt-single__media img { width: 100%; border-radius: var(--tt-radius); }
.tt-single__media.is-small { position: relative; display: flex; justify-content: center; overflow: hidden; border-radius: var(--tt-radius); background: var(--tt-surface); }
.tt-single__media.is-small::before { content: ""; position: absolute; inset: -24px; background: var(--tt-media-bg) center / cover; filter: blur(20px) saturate(1.1); opacity: .6; }
.tt-single__media.is-small img { position: relative; width: auto; max-width: 100%; border-radius: 0; box-shadow: 0 6px 24px rgba(26,26,26,.18); }
.tt-single__content { font-size: 1.05rem; }
.tt-single__content img { border-radius: var(--tt-radius); }

/* Share row */
.tt-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.75rem; }
.tt-share__label { font-weight: 700; margin-right: .25rem; }
.tt-share__link { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--tt-border); border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--tt-text); }
.tt-share__link:hover { background: var(--tt-primary); border-color: var(--tt-primary); color: #fff; text-decoration: none; }

/* Author box */
.tt-author { display: flex; gap: 1rem; align-items: flex-start; background: var(--tt-author-bg, var(--tt-surface)); border-radius: var(--tt-radius); padding: 1.25rem; margin: 2rem 0; }
.tt-author__avatar img { border-radius: 50%; }
.tt-author__name { margin: .15rem 0 .4rem; font-size: 1.2rem; }
.tt-author__bio { color: var(--tt-muted); margin: 0; }

/* Related */
.tt-related { margin-top: 2.5rem; }

/* Disclaimer (appended to end of single posts/pages) */
.tt-disclaimer {
	margin: 2.5rem 0 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid rgba(209, 19, 122, .25);
	border-left: 4px solid var(--tt-primary, #d1137a);
	border-radius: 10px;
	background: rgba(209, 19, 122, .04);
	font-size: .9rem;
	line-height: 1.6;
	color: var(--tt-muted, #6b6b6b);
}
.tt-disclaimer__title {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	color: var(--tt-text, #1a1a1a);
}
.tt-disclaimer p { margin: 0 0 .65rem; }
.tt-disclaimer p:last-child { margin-bottom: 0; }
.tt-disclaimer strong { color: var(--tt-text, #1a1a1a); }

/* ===================== Archive / search / page / 404 ===================== */
.tt-archive__header { padding: 1.5rem 0 .5rem; text-align: center; }
.tt-archive__title { font-size: 2rem; margin: 0 0 .5rem; }
.tt-archive__desc { color: var(--tt-muted); max-width: 640px; margin: 0 auto 1rem; }
.tt-search__form { max-width: 520px; margin: .5rem auto 0; }

/* Category sub-navigation — visually distinct from the recipe cards below */
.tt-subcats { margin: 0 0 2rem; } /* no panel behind the chips (Damir 2026-10-30) */
.tt-subcats__title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tt-muted); margin: 0 0 1rem; text-align: center; }
.tt-chips { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.tt-subcats .tt-chips { justify-content: center; } /* centred (Damir 2026-10-31) */
/* ⓘ next to "Pretraži po vrsti": popup on hover / keyboard focus / tap (assets/js/info.js).
   Anchored to the centred title (not the icon) so it never runs off a phone screen. */
.tt-subcats__title { position: relative; }
.tt-info { display: inline-block; vertical-align: middle; margin-left: .35rem; text-transform: none; letter-spacing: 0; }
.tt-info__btn { display: inline-flex; padding: 2px; border: 0; background: none; color: var(--tt-primary); cursor: pointer; border-radius: 50%; line-height: 0; }
.tt-info__btn:focus-visible { outline: 2px solid var(--tt-primary); outline-offset: 2px; }
.tt-info__tip {
	position: absolute; z-index: 20; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
	width: max-content; max-width: min(320px, 100%); padding: .75rem .9rem;
	background: var(--tt-text); color: #fff; border-radius: var(--tt-radius);
	font-family: var(--tt-font-body); font-size: .85rem; font-weight: 400; line-height: 1.45; text-align: left;
	box-shadow: 0 6px 18px rgba(26,26,26,.2);
	opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
}
.tt-info:hover .tt-info__tip, .tt-info:focus-within .tt-info__tip, .tt-info.is-open .tt-info__tip { opacity: 1; visibility: visible; }
.tt-chip { display: flex; flex-direction: column; align-items: center; width: 96px; text-align: center; color: var(--tt-text); }
.tt-chip:hover { text-decoration: none; }
.tt-chip__img { position: relative; width: 83px; height: 83px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid #fff; box-shadow: var(--tt-chip-shadow, 0 2px 8px rgba(26,26,26,.15)); transition: border-color .15s, transform .15s; }
.tt-chip__img--noimg { background: linear-gradient(135deg, var(--tt-primary), var(--tt-accent)); }
/* Ingredient icon (from the logo-style icon set) instead of a photo. */
.tt-chip__img--icon { background-color: var(--tt-surface); background-size: 68%; background-repeat: no-repeat; }
.tt-chip:hover .tt-chip__img { border-color: var(--tt-primary); transform: translateY(-2px); }
.tt-chip__label { margin-top: .5rem; font-size: .82rem; font-weight: 600; line-height: 1.2; }
.tt-cats .tt-chip__label { color: var(--tt-cats-label, inherit); }
.tt-chip:hover .tt-chip__label { color: var(--tt-primary); }

/* Centered, larger circular chips (homepage "Explore by category") */
.tt-chips--center { justify-content: center; gap: 1.75rem; }
.tt-chip--lg { width: calc(var(--tt-chip-size, 150px) + 20px); }
.tt-chip--lg .tt-chip__img { width: var(--tt-chip-size, 150px); height: var(--tt-chip-size, 150px); box-shadow: var(--tt-chip-shadow-lg, 0 4px 14px rgba(26,26,26,.18)); }
.tt-chip--lg .tt-chip__label { margin-top: .7rem; font-size: 1rem; }
/* Phones: two circles per row instead of one under another (Damir 2026-10-31) */
@media (max-width: 600px) {
	.tt-chips--center { gap: 1.25rem .75rem; }
	.tt-chips--center .tt-chip--lg { width: calc(50% - .375rem); }
	.tt-chips--center .tt-chip--lg .tt-chip__img { width: min(var(--tt-chip-size, 150px), 120px); height: min(var(--tt-chip-size, 150px), 120px); }
	.tt-chips--center .tt-chip--lg .tt-chip__label { font-size: .9rem; }
}
.tt-cats { /* rounded card containing the heading + chips; move it up/down with the Customizer offset */
	text-align: center;
	position: relative;
	z-index: 2;
	margin-top: var(--tt-cats-offset, -40px);
	padding: 2rem 1.5rem;
	background: var(--tt-cats-bg, var(--tt-surface));
	border-radius: var(--tt-cats-radius, 16px);
	box-shadow: var(--tt-cats-shadow, 0 12px 30px rgba(26, 26, 26, .12));
}
.tt-cats__title { text-align: center; margin: 0 0 1.5rem; color: var(--tt-cats-text, inherit); }
.tt-cats__list { margin: 0; }

/* Third-level filter bar (a specific type selected) */
.tt-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--tt-border); }
.tt-filterbar__back { font-weight: 600; color: var(--tt-primary); }
.tt-filterbar__current { background: var(--tt-accent); color: var(--tt-text); font-weight: 700; padding: .3rem .8rem; border-radius: 999px; font-size: .9rem; }

/* Infinite-scroll loading indicator */
.tt-infinite { min-height: 48px; }
.tt-infinite.is-loading { display: flex; justify-content: center; align-items: center; padding: 1.5rem 0; }
.tt-infinite.is-loading::after { content: ""; width: 28px; height: 28px; border: 3px solid var(--tt-border); border-top-color: var(--tt-primary); border-radius: 50%; animation: tt-spin .7s linear infinite; }
@keyframes tt-spin { to { transform: rotate(360deg); } }
.tt-search__empty { text-align: center; color: var(--tt-muted); padding: 2rem 0; }

.tt-page { max-width: 760px; margin-inline: auto; }
.tt-page__title { font-size: 2rem; margin: 0 0 1rem; }
.tt-page__media { margin: 0 0 1.5rem; }
.tt-page__media img { width: 100%; border-radius: var(--tt-radius); }

.tt-404 { text-align: center; max-width: 760px; margin-inline: auto; padding: 2rem 0; }
.tt-404__title { font-size: 2.25rem; }
.tt-404 p { color: var(--tt-muted); }
.tt-404__search { max-width: 480px; margin: 1.5rem auto; }
.tt-404__tiles { margin-top: 1.5rem; }

/* Comments */
.tt-comments { max-width: 760px; margin: 2.5rem auto 0; }
.tt-comments__list { list-style: none; padding: 0; }

/* ===================== Widget areas ===================== */
.tt-widget { margin: 0 0 1.25rem; }
.tt-widget__title { margin: 0 0 .5rem; font-size: 1rem; }
.tt-widget ul { list-style: none; margin: 0; padding: 0; }
.tt-widget li { padding: .25rem 0; }

.tt-header-widgets { border-top: 1px solid var(--tt-border); background: var(--tt-surface); padding: 1rem 0; }
.tt-header-widgets .tt-widget { margin: 0; }

.tt-home-widgets__grid,
.tt-footer-widgets { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
	.tt-home-widgets__grid { grid-template-columns: repeat(2, 1fr); }
	.tt-footer-widgets { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
	.tt-home-widgets__grid { grid-template-columns: repeat(3, 1fr); }
}
.tt-footer-widgets { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.tt-footer-widgets .tt-widget__title { color: #fff; }
.tt-footer-widgets a:hover { color: var(--tt-accent); }

/* Pagination */
.pagination, .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 2rem; }
.pagination .page-numbers, .nav-links .page-numbers { display: inline-block; padding: .5rem .8rem; border: 1px solid var(--tt-border); border-radius: var(--tt-radius); color: var(--tt-text); }
.pagination .current { background: var(--tt-primary); border-color: var(--tt-primary); color: #fff; }

/* Subscribe modal */
.tt-modal[hidden] { display: none; }
.tt-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.tt-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 26, 0.6);
}
.tt-modal__dialog {
	position: relative;
	z-index: 1;
	background: var(--tt-surface, #fff6d8);
	border-radius: 12px;
	padding: 2rem;
	max-width: 460px;
	width: 100%;
	box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.tt-modal__close {
	position: absolute;
	top: .5rem;
	right: .75rem;
	background: none;
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: var(--tt-text, #1a1a1a);
}
.tt-modal__title { margin: 0 0 1rem; }
body.tt-modal-open { overflow: hidden; }

/* Single recipe — content + right sidebar */
.tt-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 2.5rem;
	align-items: start;
}
.tt-single__content { min-width: 0; }
.tt-single__sidebar {
	position: sticky;
	top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}
.tt-single__sidebar .tt-author { margin: 0; }
.tt-sidebar__title { font-size: 1.1rem; margin: 0 0 .75rem; }
.tt-sidebar-nutrition table { width: 100%; }
.tt-sidebar-nutrition figcaption { margin: .5rem 0 0; font-size: .85rem; color: var(--tt-text); text-align: left; }
.tt-sidebar-nutrition__note { margin: .75rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--tt-muted); }
/* "Join the newsletter" — coral card */
.tt-sidebar-subscribe { background: var(--tt-primary); color: #fff; padding: 1.5rem; border-radius: var(--tt-radius); }
.tt-sidebar-subscribe .tt-sidebar__title { color: #fff; }
.tt-sidebar-subscribe p, .tt-sidebar-subscribe label { color: #fff; }
.tt-sidebar-subscribe a { color: #fff; text-decoration: underline; }
.tt-sidebar-subscribe input[type="email"], .tt-sidebar-subscribe input[type="text"], .tt-sidebar-subscribe input:not([type="submit"]) { width: 100%; }
.tt-sidebar-subscribe input[type="submit"], .tt-sidebar-subscribe button[type="submit"], .tt-sidebar-subscribe .es_submit_button { background: #fff; color: var(--tt-primary); border: 0; font-weight: 700; cursor: pointer; }
@media (max-width: 1024px) {
	/* Tablets & below: full-width content, sidebar drops after it */
	.tt-single__layout { grid-template-columns: 1fr; }
	.tt-single__sidebar { position: static; order: 2; }

	/* Logo scales down on small screens so the bar it drives isn't huge */
	.tt-logo img, .tt-logo a img { height: min(var(--tt-logo-h, 144px), 16vw); }

}
/* Phones: the card may be pushed down but not pulled up over the hero (it covered the hero search).
   Tablets and the Customizer preview use the "Move block up / down" setting as on desktop. */
@media (max-width: 600px) {
	.tt-cats { margin-top: max(var(--tt-cats-offset, -40px), 1.5rem); }
}

/* Back-to-top */
.tt-totop[hidden] { display: none; }
.tt-totop {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 900;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--tt-primary, #d1137a);
	box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.tt-totop::before { /* upward-pointing triangle */
	content: "";
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 11px solid currentColor;
}
.tt-totop:hover { filter: brightness(1.05); }

/* Ingredient "fridge" selector */
.tt-fridge { margin: 0 0 2rem; text-align: center; }
.tt-fridge__hint { color: var(--tt-muted); font-size: .95rem; margin: 0 0 1rem; }
/* Chip layouts. Short lists = one centered row; long lists = 2 rows that scroll sideways. */
/* overflow-x:auto also clips the vertical axis, so pad top/bottom to keep chip shadows,
   hover lift, selection outline and the ✓ badge (top:-4px) from being cut off. */
.tt-fridge__chips { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: .85rem; padding-bottom: .85rem; scroll-snap-type: x proximity; }
.tt-fridge__chips .tt-chip { scroll-snap-align: start; }
/* Short list: a single, centered row (wraps only if it truly can't fit, e.g. narrow phones). */
.tt-fridge__chips--row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 1.5rem; }
/* Long list: exactly 2 rows, extra chips overflow into horizontal scroll. */
.tt-fridge__chips--scroll {
	display: grid;
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	justify-content: start;
	gap: 1.25rem 1.5rem;
}
.tt-fridge__chip { cursor: pointer; }
.tt-fridge__chip.is-selected .tt-chip__img { outline: 3px solid var(--tt-primary); outline-offset: 2px; }
.tt-fridge__chip.is-selected .tt-chip__label { color: var(--tt-primary); font-weight: 700; }
.tt-fridge__chip.is-selected .tt-chip__img::after {
	content: "✓"; position: absolute; top: -4px; right: -4px;
	background: var(--tt-primary); color: #fff; border-radius: 50%;
	width: 22px; height: 22px; line-height: 22px; font-size: 13px;
}
.tt-fridge__status { color: var(--tt-muted); font-weight: 600; margin: .5rem 0 1rem; }
.tt-fridge__results:not([hidden]) { margin-top: 1rem; }
/* Divider between recipes using ALL your picks and the "other recipes you might like" */
.tt-fridge__sep { grid-column: 1 / -1; text-align: center; margin: 3.5rem 0 1.5rem; border-top: 2px dashed var(--tt-border); }
.tt-fridge__sep span { display: inline-block; position: relative; top: -.9em; background: var(--tt-bg); padding: 0 1rem; color: var(--tt-muted); font-weight: 600; font-size: 1rem; }

/* Contact Form 7 — the contact form on /connect/.
   CF7 ships only functional CSS (validation tips, spinner), so its fields fall back to raw
   browser defaults. Style them with the theme tokens so the form matches the header search
   and newsletter inputs. Selectors are plugin-scoped (.wpcf7) so any CF7 form picks this up. */
.wpcf7 {
	max-width: 640px; margin: 1.75rem 0; padding: 1.5rem;
	background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: var(--tt-radius);
}
.wpcf7 .wpcf7-form > p { margin: 0 0 1.1rem; }
.wpcf7 .wpcf7-form > p:last-of-type { margin-bottom: 0; }
.wpcf7 label { display: block; font-weight: 600; color: var(--tt-text); }
/* CF7's default template separates label text from the field with a <br>; the wrap is block-level. */
.wpcf7 label br { display: none; }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: .4rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 input[type="url"], .wpcf7 input[type="date"], .wpcf7 textarea, .wpcf7 select {
	width: 100%; box-sizing: border-box; padding: .7rem .9rem;
	border: 1px solid var(--tt-border); border-radius: var(--tt-radius);
	background: var(--tt-bg); color: var(--tt-text);
	font-family: var(--tt-font-body); font-size: 1rem; line-height: 1.4;
}
.wpcf7 textarea { min-height: 170px; resize: vertical; display: block; }
.wpcf7 input:focus-visible, .wpcf7 textarea:focus-visible, .wpcf7 select:focus-visible {
	outline: 3px solid var(--tt-primary); outline-offset: 2px; border-color: var(--tt-primary);
}
.wpcf7 input[type="submit"] {
	display: inline-block; background: var(--tt-primary); color: #fff; border: 0;
	padding: .7rem 1.6rem; border-radius: var(--tt-radius);
	font-family: var(--tt-font-body); font-size: 1rem; font-weight: 700; cursor: pointer;
}
.wpcf7 input[type="submit"]:hover, .wpcf7 input[type="submit"]:focus { background: var(--tt-primary-dark); }
.wpcf7 input[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }
.wpcf7 .wpcf7-form-control.wpcf7-not-valid { border-color: #dc3232; }
.wpcf7 .wpcf7-not-valid-tip { margin-top: .35rem; font-size: .9rem; font-weight: 600; }
/* Out-specifies CF7's own `.wpcf7 form .wpcf7-response-output` rule (0,2,1) regardless of load order. */
.wpcf7 form.wpcf7-form .wpcf7-response-output {
	margin: 1.25rem 0 0; padding: .75rem 1rem;
	border-width: 1px; border-radius: var(--tt-radius); font-size: .95rem;
}
@media (max-width: 600px) {
	.wpcf7 { padding: 1.1rem; }
}

/* Core's media-text block indents its stacked content with `padding: 0 8%`, which reads as a
   stray indent on the /connect/ bio. Align it with the surrounding page text on small screens. */
@media (max-width: 600px) {
	.tt-page__content .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding: 1rem 0 0;
	}
}

/* Ad slots (inc/ads.php) — printed only when ads are switched on in the Customizer. */
.lchf-ad { margin: 2rem 0; text-align: center; overflow: hidden; }
.lchf-ad__label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tt-muted); margin-bottom: .35rem; }
.tt-post-list .lchf-ad { grid-column: 1 / -1; }
.lchf-ad--sidebar { position: sticky; top: 6rem; }
@media (max-width: 900px) { .lchf-ad--sidebar { display: none; } }
@media (min-width: 1025px) { .tt-hero.has-image { background-image: var(--tt-hero-lg); } }

/* Rank Math table of contents ("Sadržaj") in posts. */
.wp-block-rank-math-toc-block { background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.wp-block-rank-math-toc-block h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .5rem; }
.wp-block-rank-math-toc-block ul { margin: 0; padding-left: 1.1rem; }
.wp-block-rank-math-toc-block li { margin: .2rem 0; }
.wp-block-rank-math-toc-block a { color: var(--tt-primary); }
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 1.5rem; }


/* Newsletter box at the end of posts (reusable block, scripts/newsletter-block.php) — logo blue. */
.tt-cta--post { background: var(--tt-sky); color: var(--tt-text); padding: 1.5rem 1.5rem 1.25rem; margin: 2.5rem 0; }
.tt-cta--post .tt-cta__title { color: var(--tt-text); margin: 0 0 .4rem; }
.tt-cta--post p { color: var(--tt-text); font-weight: 700; margin-bottom: 1rem; }
.tt-cta--post .emaillist label { display: block; font-size: .9rem; font-weight: 700; margin-bottom: .35rem; }
.tt-cta--post input[type="email"], .tt-cta--post input[type="text"] { width: 100%; max-width: 420px; padding: .65rem .9rem; border: 1px solid rgba(26,26,26,.15); border-radius: var(--tt-radius); font: inherit; background: #fff; }
.tt-cta--post input[type="checkbox"] { width: auto; margin-right: .4rem; vertical-align: middle; }
.tt-cta--post label, .tt-cta--post .es_gdpr, .tt-cta--post .es-field-label { font-weight: 700; }
.tt-cta--post input[type="submit"], .tt-cta--post .es_submit_button { margin-top: .5rem; background: var(--tt-primary); color: #fff; border: 0; padding: .7rem 1.4rem; border-radius: var(--tt-radius); font: inherit; font-weight: 700; cursor: pointer; }
.tt-cta--post input[type="submit"]:hover, .tt-cta--post .es_submit_button:hover { background: var(--tt-primary-dark); }