/*
 * Krugio C1: design-specific component CSS (chrome that is on every page: header, footer).
 * Loaded last (after every Krugio stylesheet). Colours, fonts, spacing and radii come from the tokens in
 * tokens.css only. Search panel and mobile menu: panel.css.
 * Breakpoint: desktop >= 1024px (fixed by Base).
 */

/* Selected text uses the palette (selection tokens in tokens.css), not the browser default blue */
::selection {
	background: var(--krugio-color-selection-bg);
	color: var(--krugio-color-selection-text);
}

::-moz-selection {
	background: var(--krugio-color-selection-bg);
	color: var(--krugio-color-selection-text);
}

/* ==========================================================================
   Header: phone and tablet first (menu button left, logo centred, search and cart right).
   Equal outer columns keep the logo on the viewport centre whatever the widths of the two sides.
   ========================================================================== */

.krugio-header--c1 .krugio-header__inner {
	display: grid;
	grid-template-areas: "start brand actions";
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 0 var(--krugio-space-2);
	align-items: center;
	max-width: none;
	min-height: var(--krugio-header-height-mobile);
	padding-block: 0;
	padding-inline: clamp(1.25rem, 2.5vw, 2.25rem);
}

.krugio-header--c1 .krugio-header__start {
	grid-area: start;
	min-width: 0;
}

.krugio-header--c1 .krugio-header__brand {
	grid-area: brand;
	justify-self: center;
	min-width: 0;
}

/* The logo rules are shared with the distraction-free checkout header (Base part, section below) */
.krugio-header--c1 .krugio-header__brand .custom-logo,
.krugio-header--checkout .krugio-header__brand .custom-logo {
	width: auto;
	max-height: 2.75rem;
}

.krugio-header--c1 .krugio-logo-text,
.krugio-header--checkout .krugio-logo-text {
	color: var(--krugio-color-primary);
	font-family: var(--krugio-font-heading);
	font-weight: var(--krugio-weight-heading);
}

.krugio-header--c1 .krugio-header__actions {
	grid-area: actions;
	justify-self: end;
	gap: var(--krugio-space-1);
	margin: 0;
}

/* Sticky header (KRG-88 phones and tablets, KRG-99 desktop). On every page except checkout (the distraction-free header is
   another class and stays in the flow). Opaque background and hairline come from Base, the z-index stays under the panels
   (100000). Without JavaScript the phone header grows by the nav row and stays in the flow; the desktop header is one 81 px
   row with or without JavaScript, so it is sticky either way. The offset tokens (tokens.css) feed the anchor scroll padding
   (skip link, anchors, focus), the logged-in admin bar offset and the sticky cart totals. */
.krugio-header--c1 {
	position: sticky;
	top: var(--krugio-adminbar-offset);
	z-index: var(--krugio-header-z);
	/* KRG-101: on screens with a fractional pixel ratio (125%, 150%, 175% laptops, some phones) the browser snaps the sticky
	   layer to whole device pixels while the content scrolls in fractions, so for a moment one device pixel row above the
	   header content showed the page scrolling up. A 1 px strip of the header colour above the header closes it; it is
	   outside the viewport at the top of the page and takes no space. */
	box-shadow: 0 -1px 0 0 var(--krugio-color-bg);
}

html {
	scroll-padding-top: calc(var(--krugio-header-offset) + var(--krugio-adminbar-offset));
}

/* The checkout header is not sticky: nothing to keep clear */
html:has(.krugio-header--checkout) {
	scroll-padding-top: 0;
}

/* Logged-in: the admin bar is fixed above 600 px (the header sits under it) and scrolls away at 600 px and below */
html.wp-toolbar {
	--krugio-adminbar-offset: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	html.wp-toolbar {
		--krugio-adminbar-offset: 0px;
	}
}

/* Below 1024 px the start wrapper dissolves: the menu button takes the start cell (left). The primary nav is only
   visible without JavaScript; the grid has a second row for it ONLY then. A permanent second row (nav hidden by
   JavaScript) took half of the min-height, so the logo sat above the centre of the header (KRG-88). */
@media (max-width: 1023.98px) {
	.krugio-header--c1 .krugio-header__start {
		display: contents;
	}

	.krugio-header--c1 .krugio-menu-button {
		grid-area: start;
		justify-self: start;
	}

	html:not(.js) .krugio-header--c1 .krugio-header__inner {
		grid-template-areas:
			"start brand actions"
			"nav nav nav";
		grid-template-rows: var(--krugio-header-height-mobile) auto;
	}

	html:not(.js) .krugio-header--c1 .krugio-primary-nav {
		grid-area: nav;
	}

	html:not(.js) .krugio-header--c1 {
		position: relative;
	}

	html:not(.js) {
		scroll-padding-top: 0;
	}
}

/* Icon links and buttons: 44 px targets, primary colour. */
.krugio-header--c1 .krugio-header__search-toggle,
.krugio-header--c1 .krugio-cart-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	text-decoration: none;
}

.krugio-header--c1 .krugio-header__search-toggle,
.krugio-header--c1 .krugio-cart-toggle,
.krugio-header--c1 .krugio-menu-button {
	color: var(--krugio-color-primary);
}

/* The search toggle is a button (it opens the search panel): reset the UA button look. Without JavaScript it
   would do nothing, so it is hidden then (panel.js and krugio_print_js_class() add `js` to <html>). */
.krugio-header--c1 .krugio-header__search-toggle {
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	cursor: pointer;
}

html:not(.js) .krugio-header--c1 .krugio-header__search-toggle {
	display: none;
}

.krugio-header--c1 .krugio-header__search-toggle:hover,
.krugio-header--c1 .krugio-cart-toggle:hover,
.krugio-header--c1 .krugio-menu-button:hover {
	color: var(--krugio-color-accent);
}

.krugio-header--c1 .krugio-header__search-toggle .krugio-icon,
.krugio-header--c1 .krugio-menu-button .krugio-icon {
	width: 1.375rem;
	height: 1.375rem;
}

/* Cart: total text, then the icon with the count bubble at its top right (end padding keeps the bubble off the next link) */
.krugio-header--c1 .krugio-cart-toggle {
	padding-inline-end: var(--krugio-space-2);
}

.krugio-header--c1 .krugio-cart-toggle__total {
	margin-inline-end: var(--krugio-space-2);
	font-size: var(--krugio-font-size-sm);
	font-weight: var(--krugio-weight-heading);
	white-space: nowrap;
}

.krugio-header--c1 .krugio-cart-count {
	inset-block-start: -0.4rem;
	inset-inline-end: -0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--krugio-cart-count-size);
	height: var(--krugio-cart-count-size);
	min-width: 0;
	padding: 0;
	border-radius: 50%; /* always a circle, never a radius token (see tokens.css, SHAPE) */
	background: var(--krugio-color-primary);
	color: var(--krugio-color-on-primary);
	font-size: 0.6875rem;
	line-height: 1;
}

/* Base hides the bubble with display:none at a count of 0; display:flex above must not undo that */
.krugio-header--c1 .krugio-cart-count[data-count="0"] {
	display: none;
}

/* The account word is for desktop only; phones get "Moj nalog" in the mobile menu */
.krugio-header--c1 .krugio-header__account {
	display: none;
}

/* Narrow phones: the right group must fit its half of the header or the centred logo would be crowded.
   The cart total text goes first (the cart link keeps its aria-label with the total), then the logo shrinks. */
@media (max-width: 399.98px) {
	.krugio-header--c1 .krugio-cart-toggle__total {
		display: none;
	}

	.krugio-header--c1 .krugio-cart-toggle {
		padding-inline-end: 0;
	}
}

@media (max-width: 359.98px) {
	.krugio-header--c1 .krugio-header__inner {
		column-gap: var(--krugio-space-1);
	}

	.krugio-header--c1 .krugio-header__brand .custom-logo {
		max-height: 1.75rem;
	}
}

/* Primary navigation: without JavaScript it stays visible under the logo (wrapping row) */
.krugio-header--c1 .krugio-primary-nav {
	gap: 0 var(--krugio-space-4);
}

.krugio-header--c1 .krugio-nav {
	gap: 0 var(--krugio-space-4);
}

.krugio-header--c1 .krugio-nav a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding-block: 0;
	color: var(--krugio-color-primary);
	font-size: var(--krugio-font-size-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.krugio-header--c1 .krugio-nav a:hover {
	color: var(--krugio-color-accent);
	text-decoration: underline;
	text-underline-offset: 0.5em;
}

/* The active item (aria-current, current-menu-item, ancestors) has no rule of its own: it looks and behaves exactly like an
   inactive item (KRG-88). Base's accent colour for it (base.css) has lower specificity than the item rule above. */

/* ==========================================================================
   Header: desktop (menu left, logo centred, actions right)
   ========================================================================== */

@media (min-width: 1024px) {
	.krugio-header--c1 .krugio-header__inner {
		grid-template-areas: "start brand actions";
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: 0 var(--krugio-space-4);
		min-height: var(--krugio-header-height);
	}

	.krugio-header--c1 .krugio-header__actions {
		gap: var(--krugio-header-actions-gap);
	}

	.krugio-header--c1 .krugio-header__brand {
		justify-self: center;
	}

	.krugio-header--c1 .krugio-header__brand .custom-logo,
	.krugio-header--checkout .krugio-header__brand .custom-logo {
		max-height: 3.25rem;
	}

	.krugio-header--c1 .krugio-header__account {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding-inline: var(--krugio-space-2);
		color: var(--krugio-color-primary);
		font-size: var(--krugio-font-size-sm);
		text-decoration: none;
	}

	.krugio-header--c1 .krugio-header__account:hover {
		color: var(--krugio-color-accent);
		text-decoration: underline;
	}

	/* Sub-menu: opens under its item (Base shows it on hover and focus) */
	.krugio-header--c1 .krugio-nav .sub-menu {
		padding: 0;
		border: var(--krugio-border-width) solid var(--krugio-color-border-subtle);
		background: var(--krugio-color-bg);
	}

	.krugio-header--c1 .krugio-nav .sub-menu a {
		padding: var(--krugio-space-3) var(--krugio-space-4);
		letter-spacing: normal;
		text-transform: none;
	}
}

/* ==========================================================================
   Distraction-free checkout header (Base part): the logo only, centred; same height and hairline as the other pages.
   The logo size and the logo text share the header rules above.
   ========================================================================== */

.krugio-header--checkout .krugio-header__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: none;
	min-height: var(--krugio-header-height-mobile);
	padding-block: 0;
	padding-inline: clamp(1.25rem, 2.5vw, 2.25rem);
}

@media (min-width: 1024px) {
	.krugio-header--checkout .krugio-header__inner {
		min-height: var(--krugio-header-height);
	}
}

/* ==========================================================================
   Footer (every page): inset frame, surface block with logo and one menu, brand-coloured credit bar.
   The checkout footer (Base part) is the credit bar alone and shares the frame and bar rules (KRG-73).
   ========================================================================== */

.krugio-footer--c1,
.krugio-footer--checkout {
	margin-block: var(--krugio-space-8) var(--krugio-edge-gap);
	margin-inline: var(--krugio-edge-gap);
	padding: 0;
	border: 0;
	border-radius: var(--krugio-radius-box);
	overflow: hidden;
	background: none;
	text-align: center;
}

.krugio-footer--c1 .krugio-footer__main {
	padding-block: var(--krugio-space-7);
	background: var(--krugio-color-surface);
	color: var(--krugio-color-text);
}

.krugio-footer--c1 .krugio-footer__logo {
	display: flex;
	justify-content: center;
}

.krugio-footer--c1 .krugio-footer__logo .custom-logo {
	width: auto;
	max-height: 6rem;
}

.krugio-footer--c1 .krugio-logo-text {
	color: var(--krugio-color-primary);
	font-family: var(--krugio-font-heading);
	font-weight: var(--krugio-weight-heading);
}

.krugio-footer--c1 .krugio-footer__menus {
	display: flex;
	flex-direction: column;
	gap: var(--krugio-footer-menus-gap);
	margin-top: var(--krugio-space-5);
}

.krugio-footer--c1 .krugio-footer__logo:empty + .krugio-footer__menus {
	margin-top: 0;
}

.krugio-footer--c1 .krugio-nav {
	flex-direction: column;
	align-items: center;
	gap: var(--krugio-footer-item-gap);
}

.krugio-footer--c1 .krugio-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-block: 0;
	color: var(--krugio-color-text);
	font-size: var(--krugio-font-size-sm);
	text-decoration: none;
}

.krugio-footer--c1 .krugio-nav a:hover {
	color: var(--krugio-color-accent);
	text-decoration: underline;
}

@media (min-width: 768px) {
	.krugio-footer--c1 .krugio-nav {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--krugio-footer-item-gap) 2rem;
	}

	.krugio-footer--c1 .krugio-nav a {
		min-height: 0;
		padding-block: var(--krugio-space-1);
	}
}

.krugio-footer--c1 .krugio-footer__bar,
.krugio-footer--checkout .krugio-footer__bar {
	padding-block: var(--krugio-space-5);
	background: var(--krugio-color-brand);
	color: var(--krugio-color-on-brand-fill);
	font-size: var(--krugio-font-size-sm);
}

.krugio-footer--c1 .krugio-footer__copyright,
.krugio-footer--checkout .krugio-footer__copyright {
	margin: 0;
	font-size: var(--krugio-footer-copyright-size);
	color: var(--krugio-color-on-brand-fill);
	overflow-wrap: anywhere;
}

.krugio-footer--c1 .krugio-footer__copyright a,
.krugio-footer--checkout .krugio-footer__copyright a {
	color: var(--krugio-color-on-brand-fill);
	text-decoration: underline;
}

/* Checkout and order-received pages: a short page keeps the bar at the bottom of the window */
body.woocommerce-checkout .krugio-site {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

body.woocommerce-checkout .krugio-site > .krugio-main {
	flex: 1 0 auto;
}

/* ==========================================================================
   Notices (every page type): one message bar. Success gets a tick, info a muted start line, error the error line.
   Woo text and add-to-cart behaviour are untouched: this styles what Woo prints in redirect and in stay mode.
   .krugio-cart-error (KRG-82) is the error line the AJAX scripts insert (product page, cart page): the same bar as the error notice.
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice,
.krugio-cart-error {
	margin-bottom: var(--krugio-space-5);
	padding: 0.875rem 1.25rem;
	border: 0;
	border-inline-start: 4px solid var(--krugio-color-primary);
	border-radius: var(--krugio-radius-box);
	background: var(--krugio-color-surface);
	color: var(--krugio-color-text);
	font-size: var(--krugio-font-size-base);
	overflow-wrap: anywhere;
}

/* Message with an action button: tick, text, button in one row; on phones the button gets its own row under the text */
.woocommerce-message:has(> .button) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	justify-content: normal;
	gap: 0.75rem 1rem;
}

@media (min-width: 600px) {
	.woocommerce-message:has(> .button) {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
}

@media (max-width: 599.98px) {
	.woocommerce-message .button {
		grid-column: 1 / -1;
		justify-self: end;
	}
}

/* Message without a button: plain text block (inline links such as "Poništi?" keep flowing), tick at the first line */
.woocommerce-message:not(:has(> .button)),
.woocommerce-notice--success {
	display: block;
	position: relative;
	padding-inline-start: 3.25rem;
}

.woocommerce-message:not(:has(> .button))::before,
.woocommerce-notice--success::before {
	position: absolute;
	inset-block-start: 0.975rem;
	inset-inline-start: 1.25rem;
}

.woocommerce-info:has(> .button) {
	justify-content: flex-start;
	gap: 0.75rem 1rem;
}

.woocommerce-info {
	border-inline-start-color: var(--krugio-color-text-muted);
}

.woocommerce-error,
.krugio-cart-error {
	border-inline-start-color: var(--krugio-color-error);
}

/*
 * Tick: a mask in the primary colour (the image carries alpha only). Woo prints the notice, so a CSS mask is the only
 * option; it holds the Lucide `check` shape (ISC, Base assets/icons/LICENSE-lucide.txt). The stroke width in the data
 * URI is fixed at the Lucide default 2; --krugio-icon-stroke drives the inline icons only.
 */
.woocommerce-message::before,
.woocommerce-notice--success::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--krugio-color-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Action button in the bar ("Pogledaj korpu", "Nastavi kupovinu"): outlined, at the end of the row */
.woocommerce-message .button,
.woocommerce-info .button {
	order: 1;
	min-height: 2.5rem;
	margin-inline-start: auto;
	border: var(--krugio-border-width) solid var(--krugio-color-primary);
	background: transparent;
	color: var(--krugio-color-primary);
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background: var(--krugio-color-primary);
	color: var(--krugio-color-on-primary);
}

/*
 * Notice links (KRG-72, owner decisions).
 * The action buttons in the bar ("Nastavi kupovinu", "Pogledaj korpu") have no underline in any state (Base underlines
 * content links); hover changes the fill. Inline text links in a sentence ("Poništi?") keep the Base underline: primary on
 * text is under 3:1, so colour alone would not mark them as links (WCAG 1.4.1).
 */
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button:any-link {
	text-decoration: none;
}

/* Multi-line fields (order note) round their sides with the textarea radius; a pill would turn a tall box into a balloon (KRG-127) */
textarea {
	border-radius: var(--krugio-radius-textarea);
}

/* ==========================================================================
   Focus (owner decision 28 Oct 2026, KRG-97): no visual focus indicator. Base removes the outline globally; nothing here
   draws a ring, border or background on focus. A text field keeps only its caret in the design colour.
   ========================================================================== */

input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="password"], [type="search"], [type="number"]),
select,
textarea {
	caret-color: var(--krugio-color-primary);
}