/*
Theme Name: Sirovi recepti
Theme URI: https://sirovirecepti.com
Author: amidal
Author URI: https://amidal.hr
Description: Moderna, brza i responzivna tema za sirovirecepti.com. Napravljena po uzoru na staru "Chow" temu, ali bez teških biblioteka — čist HTML5, CSS Grid i malo vanilla JS-a. Podržava recepte (foodiepress), post formate, prilagođeni logo i widget zone.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sirovirecepti
Tags: recipes, blog, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, translation-ready, responsive-layout
*/

/* ===================================================================
   Dizajn tokeni
=================================================================== */
:root{
  --green:        #4f9d2a;
  --green-dark:   #3c7a20;
  --green-light:  #eaf5e2;
  --ink:          #23311c;
  --body:         #3a4636;
  --muted:        #7a8473;
  --line:         #e6e8e2;
  --bg:           #ffffff;
  --bg-soft:      #f6f8f3;
  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 4px 18px rgba(40,60,25,.08);
  --shadow-lg:    0 10px 34px rgba(40,60,25,.14);
  --maxw:         1180px;
  --gap:          28px;
  --font:         system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --transition:   .18s ease;
}

/* ===================================================================
   Reset / osnovno
=================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.7;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--green-dark)}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font);
  color:var(--ink);
  line-height:1.25;
  font-weight:800;
  margin:0 0 .6em;
}
h1{font-size:2.1rem}
h2{font-size:1.6rem}
h3{font-size:1.25rem}
p{margin:0 0 1.2em}
ul,ol{padding-left:1.3em}
blockquote{
  margin:1.5em 0;padding:.4em 1.2em;
  border-left:4px solid var(--green);
  background:var(--bg-soft);color:var(--ink);font-style:italic;
}
code,pre{background:var(--bg-soft);border-radius:6px}
pre{padding:1em;overflow:auto}
hr{border:0;border-top:1px solid var(--line);margin:2em 0}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* ===================================================================
   Layout helperi
=================================================================== */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:10px 16px;z-index:1000;border-radius:0 0 8px 0}
.skip-link:focus{left:0;color:#fff}

/* ===================================================================
   Header
=================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.site-branding{display:flex;flex-direction:column;justify-content:center}
.site-branding .custom-logo-link img{max-height:52px;width:auto}
.site-title{font-size:1.5rem;margin:0;font-weight:800;letter-spacing:-.01em}
.site-title a{color:var(--ink)}
.site-title a:hover{color:var(--green)}
.site-description{margin:0;font-size:.82rem;color:var(--muted);font-weight:500}

/* Navigacija */
.main-navigation{display:flex;align-items:center}
.main-navigation ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.main-navigation li{position:relative}
.main-navigation a{
  display:block;padding:10px 14px;border-radius:8px;
  color:var(--ink);font-weight:600;font-size:.97rem;
}
.main-navigation a:hover,
.main-navigation .current-menu-item>a,
.main-navigation .current_page_item>a{background:var(--green-light);color:var(--green-dark)}
/* podizbornici */
.main-navigation ul ul{
  position:absolute;left:0;top:calc(100% + 6px);min-width:210px;
  flex-direction:column;gap:2px;background:#fff;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);border-radius:12px;padding:8px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:all var(--transition);
}
.main-navigation li:hover>ul,.main-navigation li:focus-within>ul{opacity:1;visibility:visible;transform:none}
.main-navigation ul ul a{white-space:nowrap}

/* hamburger */
.menu-toggle{
  display:none;align-items:center;gap:8px;cursor:pointer;
  background:var(--green);color:#fff;border:0;border-radius:9px;
  padding:10px 14px;font-size:.95rem;font-weight:700;font-family:inherit;
}
.menu-toggle .bars{width:18px;height:2px;background:#fff;position:relative;display:inline-block}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff}
.menu-toggle .bars::before{top:-6px}.menu-toggle .bars::after{top:6px}

/* ===================================================================
   Page hero / arhiva header
=================================================================== */
.page-hero{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:38px 0}
.page-hero h1{margin:0 0 .2em}
.page-hero p{margin:0;color:var(--muted)}
.breadcrumbs{font-size:.85rem;color:var(--muted);margin-bottom:10px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--green)}

/* ===================================================================
   Glavni grid (sadržaj + sidebar)
=================================================================== */
.site-main{padding:46px 0}
.content-area{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.content-area.full-width{grid-template-columns:1fr}

/* ===================================================================
   Card grid (recepti / postovi)
=================================================================== */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--gap)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow);transition:transform var(--transition),box-shadow var(--transition);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card__thumb{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft)}
.card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .card__thumb img{transform:scale(1.05)}
.card__body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.card__cat{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--green);margin-bottom:8px}
.card__title{font-size:1.18rem;margin:0 0 10px;line-height:1.3}
.card__title a{color:var(--ink)}
.card__title a:hover{color:var(--green)}
.card__excerpt{font-size:.93rem;color:var(--muted);margin:0 0 16px}
.card__meta{margin-top:auto;display:flex;gap:14px;font-size:.82rem;color:var(--muted);align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--green-light);color:var(--green-dark);padding:4px 10px;border-radius:999px;font-weight:700;font-size:.78rem}

/* ===================================================================
   Single post / page / recept
=================================================================== */
.entry{background:#fff}
.entry-header{margin-bottom:26px}
.entry-title{font-size:2.3rem;margin:0 0 .3em;letter-spacing:-.01em}
.entry-meta{display:flex;flex-wrap:wrap;gap:16px;color:var(--muted);font-size:.88rem;margin-top:8px}
.entry-meta a{color:var(--muted)}
.entry-meta a:hover{color:var(--green)}
.entry-featured{margin:0 0 30px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.entry-content{font-size:1.06rem}
.entry-content img{border-radius:var(--radius-sm);height:auto}
.entry-content h2{margin-top:1.6em}
.entry-content ul li,.entry-content ol li{margin-bottom:.4em}
.entry-content a{text-decoration:underline}
.entry-footer{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.tags-links a{display:inline-block;background:var(--bg-soft);border:1px solid var(--line);padding:4px 12px;border-radius:999px;margin:0 6px 6px 0;font-size:.82rem;color:var(--body)}
.tags-links a:hover{background:var(--green-light);color:var(--green-dark)}

/* foodiepress recept – uskladi razmak (plugin nosi vlastiti CSS) */
.foodiepress-wrapper{margin:0 0 30px;padding:24px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius)}
.foodiepress-wrapper .button,.foodiepress-wrapper .nutrition-btn{
  background:var(--green);color:#fff;border:0;border-radius:8px;padding:8px 14px;display:inline-block;font-weight:700
}
.foodiepress-wrapper .button:hover,.foodiepress-wrapper .nutrition-btn:hover{background:var(--green-dark)}

/* ===================================================================
   Sidebar / widgeti
=================================================================== */
.widget{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:26px}
.widget-title{font-size:1.05rem;margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--green-light);color:var(--ink)}
.widget ul{list-style:none;padding:0;margin:0}
.widget li{padding:8px 0;border-bottom:1px solid var(--line)}
.widget li:last-child{border-bottom:0}
.widget a{color:var(--body)}
.widget a:hover{color:var(--green)}

/* ===================================================================
   Forme / gumbi
=================================================================== */
input,textarea,select,button{font-family:inherit;font-size:1rem}
input[type=text],input[type=email],input[type=url],input[type=password],input[type=search],input[type=number],textarea,select{
  width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-light)}
.btn,button[type=submit],input[type=submit]{
  display:inline-block;background:var(--green);color:#fff;border:0;border-radius:9px;
  padding:12px 22px;font-weight:700;cursor:pointer;transition:background var(--transition)
}
.btn:hover,button[type=submit]:hover,input[type=submit]:hover{background:var(--green-dark);color:#fff}
.search-form{display:flex;gap:8px}
.search-form .search-submit{flex:0 0 auto}

/* ===================================================================
   Filter recepata
=================================================================== */
.recipe-filter{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:0 0 36px}
.recipe-filter__row{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:start}
.recipe-filter__label{display:block;font-weight:700;color:var(--ink);margin-bottom:8px;font-size:.92rem}
.recipe-filter__side{display:flex;flex-direction:column;gap:16px}
.ing-picker{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.ing-picker__search{border:0;border-bottom:1px solid var(--line);border-radius:0}
.ing-picker__search:focus{box-shadow:none;border-bottom-color:var(--green)}
.ing-picker__list{max-height:280px;overflow:auto;padding:6px}
.ing-picker__item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:.92rem}
.ing-picker__item:hover{background:var(--green-light)}
.ing-picker__item input{width:auto;margin:0}
.ing-picker__item span{flex:1}
.ing-picker__item em{color:var(--muted);font-style:normal;font-size:.78rem;background:var(--bg-soft);padding:1px 8px;border-radius:999px}
.recipe-filter__keyword{display:flex;gap:10px;margin-top:18px}
.recipe-filter__keyword input{flex:1}
.recipe-filter__keyword .btn{flex:0 0 auto}
.recipe-filter__toggle{margin-top:14px;background:none;border:0;color:var(--green-dark);font-weight:700;cursor:pointer;padding:0;text-decoration:underline}
.recipe-filter__advanced{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.recipe-filter__reset{display:inline-block;margin-top:14px;color:var(--muted);font-size:.9rem;text-decoration:underline}
.recipe-results__count{font-weight:700;color:var(--muted);margin-bottom:18px}
@media (max-width:760px){
  .recipe-filter__row{grid-template-columns:1fr;gap:20px}
}

/* ===================================================================
   Dijeljenje (share)
=================================================================== */
.share{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.share__label{font-weight:700;color:var(--ink);font-size:.92rem}
.share__btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;color:#fff;font-size:.85rem;font-weight:700;line-height:1}
.share__btn:hover{color:#fff;opacity:.9;transform:translateY(-1px)}
.share__btn--facebook{background:#1877f2}
.share__btn--pinterest{background:#e60023}
.share__btn--whatsapp{background:#25d366}
.share__btn--x{background:#000}
.share__btn--email{background:var(--muted)}

/* ===================================================================
   Paginacija
=================================================================== */
.pagination{margin-top:46px;display:flex;justify-content:center}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--line);border-radius:9px;color:var(--ink);font-weight:700;background:#fff
}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--green);color:#fff;border-color:var(--green)}

/* ===================================================================
   Komentari
=================================================================== */
.comments-area{margin-top:48px;padding-top:30px;border-top:1px solid var(--line)}
.comment-list{list-style:none;padding:0;margin:0}
.comment-list li{margin-bottom:24px}
.comment-body{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.comment-author{font-weight:700;color:var(--ink)}
.comment-metadata{font-size:.8rem;color:var(--muted)}
.comment-list .children{list-style:none;margin:18px 0 0;padding-left:26px;border-left:2px solid var(--green-light)}

/* ===================================================================
   Footer
=================================================================== */
.site-footer{background:var(--ink);color:#c8d2bf;margin-top:60px;padding:54px 0 0}
.footer-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;padding-bottom:40px}
.site-footer .widget{background:transparent;border:0;padding:0;margin:0}
.site-footer .widget-title{color:#fff;border-bottom-color:rgba(255,255,255,.15)}
.site-footer a{color:#c8d2bf}
.site-footer a:hover{color:#fff}
.site-footer .widget li{border-bottom-color:rgba(255,255,255,.1)}
.site-info{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;text-align:center;font-size:.86rem;color:#9aa890}
.site-info a{color:#fff}

/* ===================================================================
   404 / no results
=================================================================== */
.page-404,.no-results{text-align:center;padding:60px 0}
.page-404 .big{font-size:5rem;color:var(--green);margin:0;line-height:1}

/* ===================================================================
   Recept (naš vlastiti prikaz)
=================================================================== */
.recipe-card{margin:34px 0;padding:28px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius)}
.recipe-summary{font-size:1.05rem;color:var(--ink);margin-bottom:20px}
.recipe-h{font-size:1.25rem;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--green-light)}
.recipe-stats{list-style:none;display:flex;flex-wrap:wrap;gap:14px;padding:0;margin:0 0 26px}
.recipe-stats li{flex:1 1 130px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px;text-align:center}
.recipe-stats__label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.recipe-stats__val{display:block;font-size:1.2rem;font-weight:800;color:var(--green-dark);margin-top:3px}
.recipe-cols{display:grid;grid-template-columns:1fr 1.4fr;gap:34px;align-items:start}
.recipe-ingredients{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 22px;position:sticky;top:90px}
.recipe-ingredients__list{list-style:none;padding:0;margin:0}
.recipe-ingredients__list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.recipe-ingredients__list li:last-child{border-bottom:0}
.recipe-ingredients__list li.is-separator{display:block;border:0;padding-top:16px;color:var(--green-dark)}
.ing-name{font-weight:600;color:var(--ink)}
.ing-note{color:var(--muted);white-space:nowrap}
.recipe-instructions__body{font-size:1.05rem;line-height:1.8}
.recipe-nutrition{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 20px}
.recipe-nutrition summary{cursor:pointer;font-weight:700;padding:12px 0;color:var(--ink)}
.recipe-nutrition table{width:100%;border-collapse:collapse;margin-bottom:12px}
.recipe-nutrition th,.recipe-nutrition td{text-align:left;padding:8px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.recipe-nutrition td{text-align:right;color:var(--muted)}
@media (max-width:760px){
  .recipe-cols{grid-template-columns:1fr;gap:26px}
  .recipe-ingredients{position:static}
}

/* ===================================================================
   WooCommerce (osnovni stil – usklađen s temom)
=================================================================== */
.woocommerce-page ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap);margin:0;padding:0;list-style:none}
.woocommerce-page ul.products li.product{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:center;padding-bottom:16px;box-shadow:var(--shadow);transition:transform var(--transition),box-shadow var(--transition)}
.woocommerce-page ul.products li.product:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.woocommerce-page ul.products li.product a img{margin:0 0 12px}
.woocommerce-page ul.products li.product .woocommerce-loop-product__title{font-size:1.05rem;padding:0 12px}
.woocommerce-page .price{color:var(--green-dark);font-weight:800}
.woocommerce-page a.button,.woocommerce-page button.button,.woocommerce-page .button,.woocommerce-page #respond input#submit{
  background:var(--green);color:#fff;border:0;border-radius:9px;padding:10px 18px;font-weight:700;cursor:pointer
}
.woocommerce-page a.button:hover,.woocommerce-page button.button:hover,.woocommerce-page .button:hover{background:var(--green-dark);color:#fff}
.woocommerce-page .star-rating span{color:var(--green)}
.woocommerce-message,.woocommerce-info{border-top-color:var(--green)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--green)}
.header-cart{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink)}
.header-cart__count{background:var(--green);color:#fff;border-radius:999px;padding:1px 8px;font-size:.8rem}

/* ===================================================================
   Responsive
=================================================================== */
@media (max-width:980px){
  .content-area{grid-template-columns:1fr;gap:40px}
  .entry-title{font-size:1.9rem}
}
@media (max-width:768px){
  body{font-size:16px}
  .menu-toggle{display:inline-flex}
  .main-navigation{
    position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .main-navigation.is-open{max-height:80vh;overflow:auto}
  .main-navigation ul{flex-direction:column;gap:0;padding:10px 16px}
  .main-navigation li{width:100%}
  .main-navigation a{padding:13px 8px;border-bottom:1px solid var(--line)}
  .main-navigation ul ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 16px}
  .site-header__inner{position:relative}
  h1{font-size:1.7rem}
}