/*
Theme Name: Handknitted
Theme URI: https://handknitted.local
Author: Tactica
Author URI: https://tactica.is
Description: Custom theme for The Handknitting Association of Iceland. A lightweight, block-editor-friendly classic theme with editable menus.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
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: handknitted
Tags: custom-menu, featured-images, block-styles, wide-blocks, translation-ready
*/

/* -------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */
:root {
	--hk-brand: #00a5ce;          /* primary cyan: headings, links, chips, hairlines (Figma) */
	--hk-brand-dark: #0090b4;     /* hover shade of --hk-brand */
	--hk-brand-btn: #05b6dd;      /* filled CTA buttons (Figma uses a brighter cyan there) */
	--hk-brand-btn-dark: #04a3c6; /* hover shade of --hk-brand-btn */
	--hk-ink: #111418;            /* near-black text */
	--hk-ink-soft: #3a3f45;
	--hk-muted: #6b7177;
	--hk-line: #e7e9ec;
	--hk-bg: #ffffff;

	--hk-content-width: 1200px;
	--hk-wide-width: 1400px;
	--hk-gutter: clamp(1rem, 4vw, 2.5rem);

	/* Inter = base/body font per the design; Nexa (licensed, self-hosted) is
	   applied explicitly to titles, menus and product names. */
	--hk-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--hk-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--hk-ink);
	background: var(--hk-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--hk-brand);
	text-decoration: none;
}
a:hover,
a:focus { text-decoration: underline; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
	color: var(--hk-ink);
}

/* Accessibility: visually hidden but available to screen readers */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: #fff;
	clip: auto;
	clip-path: none;
	color: var(--hk-ink);
	display: block;
	height: auto;
	left: 5px;
	padding: 12px 20px;
	top: 5px;
	width: auto;
	z-index: 100000;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
}
.skip-link:focus {
	left: 6px;
	top: 6px;
	z-index: 100001;
	background: #fff;
	padding: 10px 16px;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

/* -------------------------------------------------------------------------
   Layout container (mirrors theme.json contentSize / wideSize)
   ------------------------------------------------------------------------- */
.hk-container {
	width: 100%;
	max-width: var(--hk-content-width);
	margin-inline: auto;
	padding-inline: var(--hk-gutter);
}

.site-content {
	padding-block: 2.5rem;
}

/* Let Gutenberg alignwide / alignfull behave inside default page templates */
.entry-content > * {
	max-width: var(--hk-content-width);
	margin-inline: auto;
}
.entry-content > .alignwide {
	max-width: var(--hk-wide-width);
}
.entry-content > .alignfull {
	max-width: none;
	width: 100%;
}

/* -------------------------------------------------------------------------
   Generic content pages (Shipping info, Privacy policy, Return policy,
   Terms and condition …) — the site's design language on plain page.php:
   Nexa titles/headings, Inter body, cyan links, narrow reading column.
   body-scoped to plain pages only: the FRONT PAGE article is also .hk-page
   (and page-template-default), and these rules must never leak onto it.
   ------------------------------------------------------------------------- */
body.page-template-default:not(.home) .hk-page .entry-header,
body.page-template-default:not(.home) .hk-page .entry-content > * {
	max-width: 780px;
	margin-inline: auto;
}
body.page-template-default:not(.home) .hk-page .entry-title {
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.5rem); /* like the product/About titles */
	line-height: 1.15;
	margin: 0.5rem 0 2.25rem;
}
body.page-template-default:not(.home) .hk-page .entry-content h2 {
	font-family: "Nexa", var(--hk-font);
	font-weight: 700;
	font-size: 1.25rem;   /* 20px, matches section headings elsewhere */
	color: var(--hk-ink);
	margin: 2.4rem auto 0.75rem; /* auto: stay in the centered column */
}
body.page-template-default:not(.home) .hk-page .entry-content p,
body.page-template-default:not(.home) .hk-page .entry-content li {
	color: var(--hk-ink-soft);
	font-size: 1.0625rem; /* 17px body, like product descriptions */
	line-height: 1.7;
	margin: 0 auto 1rem;
}
body.page-template-default:not(.home) .hk-page .entry-content ul {
	max-width: 780px;
	padding-left: 1.25rem;
	margin: 0 auto 1rem;
}
body.page-template-default:not(.home) .hk-page .entry-content li { margin-bottom: 0.4rem; }
body.page-template-default:not(.home) .hk-page .entry-content a { color: var(--hk-brand); text-decoration: none; }
body.page-template-default:not(.home) .hk-page .entry-content a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.hk-button,
.wp-block-button__link {
	display: inline-block;
	background: var(--hk-brand-btn);
	color: #fff;
	padding: 0.7em 1.4em;
	border-radius: 999px;
	font-weight: 600;
	border: 0;
	cursor: pointer;
}
.hk-button:hover,
.wp-block-button__link:hover {
	background: var(--hk-brand-btn-dark);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Export price
   ------------------------------------------------------------------------- */
/* The net "Export orders:" amount always sits on its own row under the price.
   Its typography is per context: assets/css/wc-cards.css for product cards,
   assets/css/product.css for the product page. This one rule lives here so
   plain WooCommerce archives, which load neither file, still break the line. */
.hk-export-price { display: block; }

/* -------------------------------------------------------------------------
   Add-to-cart notice marker
   ------------------------------------------------------------------------- */
/* The theme replaces Woo's "added to cart" notice text with a hidden
   .hk-added-marker (the minicart JS reads it). The emptied notice box must
   never render; the rule lives HERE because pages that show notices without
   loading minicart.css (e.g. the cart page after a redirect add) would
   otherwise print bare bordered bars. Hides each emptied box individually so
   real notices next to it stay visible. */
.hk-added-marker,
.woocommerce-message:has(> .hk-added-marker:only-child) { display: none; }

/* Footer styles live in assets/css/footer.css */