/*
Theme Name: Cannabis Serbia
Theme URI: https://cannabisserbia.rs
Author: Cannabis Serbia
Description: Tamna, premium tema za Cannabis Serbia — informacije o konoplji, pravni kontekst i CBD prodavnica. Block tema sa podrškom za WooCommerce.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 7.1
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: cannabis-serbia
Tags: block-theme, full-site-editing, dark, e-commerce, one-column
*/

/* ============================================================
   Cannabis Serbia — dodatni stilovi
   Tokeni dolaze iz theme.json kao --wp--preset--color--*
   ============================================================ */

:root{
  --cs-r: 14px;
  --cs-r-sm: 8px;
}

body{ -webkit-font-smoothing: antialiased; }

/* --- tipografija --- */
.cs-eyebrow{
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wp--preset--color--gold); margin: 0 0 .4rem;
}
.cs-lede{ color: var(--wp--preset--color--muted); font-size: 1.06rem; line-height: 1.72; }
.cs-mono{ font-family: var(--wp--preset--font-family--plex-mono); }
.cs-small{ font-size: .88rem; color: var(--wp--preset--color--muted); }
.cs-num{ font-variant-numeric: tabular-nums; }

h1,h2,h3,h4{ text-wrap: balance; letter-spacing: -.015em; }

/* --- zaglavlje --- */
.cs-header{
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.cs-header .wp-block-site-logo img{ height: 34px; width: auto; }
.wp-block-navigation a{ text-decoration: none; }
.wp-block-navigation .wp-block-navigation-item__content:hover{ color: var(--wp--preset--color--gold); }

/* --- kartice --- */
.cs-card{
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--cs-r);
  padding: 22px;
}
.cs-rail{ border-left: 2px solid var(--wp--preset--color--gold); padding-left: 16px; }

.cs-tag{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 99px; width: fit-content; white-space: nowrap;
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--muted);
}
.cs-tag.is-ok  { color: var(--wp--preset--color--green); border-color: color-mix(in srgb, var(--wp--preset--color--green) 40%, transparent); background: color-mix(in srgb, var(--wp--preset--color--green) 12%, transparent); }
.cs-tag.is-gold{ color: var(--wp--preset--color--gold);  border-color: color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent);  background: color-mix(in srgb, var(--wp--preset--color--gold) 12%, transparent); }
.cs-tag.is-crit{ color: #CF6A5C; border-color: rgba(207,106,92,.4); background: rgba(207,106,92,.12); }

/* --- napomena / upozorenje --- */
.cs-notice{
  display: flex; gap: 12px; padding: 15px 17px; border-radius: var(--cs-r-sm);
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--surface);
  font-size: .9rem; line-height: 1.62; color: var(--wp--preset--color--muted);
}
.cs-notice.is-warn{ border-color: rgba(217,164,65,.35); background: rgba(217,164,65,.07); }
.cs-notice strong{ color: var(--wp--preset--color--contrast); }

/* --- tabela --- */
.cs-table-wrap{ overflow-x: auto; }
.wp-block-table table{ border-collapse: collapse; font-size: .92rem; }
.wp-block-table th, .wp-block-table td{
  text-align: left; padding: 12px; vertical-align: top;
  border-bottom: 1px solid var(--wp--preset--color--line); border-top: 0; border-left: 0; border-right: 0;
}
.wp-block-table th{
  font-family: var(--wp--preset--font-family--plex-mono);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); font-weight: 500;
}

/* --- dugmad --- */
.wp-block-button__link{ font-weight: 600; border-radius: 99px; padding: 12px 22px; }
.wp-block-button.is-style-outline .wp-block-button__link{ border-color: var(--wp--preset--color--line); }
.wp-block-button.is-style-outline .wp-block-button__link:hover{ border-color: var(--wp--preset--color--gold); }

/* --- detalji / FAQ --- */
.wp-block-details{ border-bottom: 1px solid var(--wp--preset--color--line); padding: 4px 0; }
.wp-block-details summary{ cursor: pointer; padding: 15px 0; font-weight: 600; }
.wp-block-details > :not(summary){ color: var(--wp--preset--color--muted); padding-bottom: 14px; max-width: 64ch; }

/* --- slike --- */
.cs-shot img{ border-radius: var(--cs-r); border: 1px solid var(--wp--preset--color--line); display: block; }
figcaption{ font-family: var(--wp--preset--font-family--plex-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--muted); }

/* --- podnožje --- */
.cs-footer{ border-top: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); }
.cs-footer a{ color: var(--wp--preset--color--muted); text-decoration: none; }
.cs-footer a:hover{ color: var(--wp--preset--color--gold); }

/* --- 18+ kapija --- */
.cs-gate{
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  padding: 22px; background: var(--wp--preset--color--base); text-align: center;
}
.cs-gate__box{ max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cs-gate__ring{
  width: 70px; height: 70px; border-radius: 99px; display: grid; place-items: center;
  border: 1px solid var(--wp--preset--color--gold); color: var(--wp--preset--color--gold);
  font-family: var(--wp--preset--font-family--fraunces); font-size: 1.35rem;
}
.cs-gate img{ height: 96px; width: auto; }
.cs-gate button{
  cursor: pointer; border-radius: 99px; padding: 11px 22px; font-weight: 600; font-size: .92rem;
  border: 1px solid var(--wp--preset--color--gold);
}
.cs-gate .is-yes{ background: var(--wp--preset--color--gold); color: var(--wp--preset--color--base); }
.cs-gate .is-no{ background: transparent; color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--line); }

/* --- WooCommerce --- */
.woocommerce ul.products li.product,
.wc-block-grid__product{
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--cs-r); overflow: hidden; padding-bottom: 14px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--wp--preset--font-family--fraunces); font-size: 1.05rem; padding: 0 16px;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{
  font-family: var(--wp--preset--font-family--plex-mono);
  color: var(--wp--preset--color--gold); font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .price{ padding: 0 16px; }
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button{ margin: 8px 16px 0; border-radius: 99px; }
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background: var(--wp--preset--color--gold); color: var(--wp--preset--color--base);
  border-radius: 99px; font-weight: 600;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  background: var(--wp--preset--color--gold); filter: brightness(1.08); color: var(--wp--preset--color--base);
}
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info{
  background: var(--wp--preset--color--surface); border-top-color: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--contrast);
}

/* --- pristupačnost --- */
:where(a, button, input, select, textarea):focus-visible{
  outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

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