/*
Theme Name: ArtOf Taiga
Theme URI: https://growthtechnology.se
Author: ArtOf · Mikael L. Hansson
Author URI: https://artof.se
Description: Byggt av Micke & Claude. Ett lugnt, nordiskt tema i mörkgrönt och beige med Cinzel-rubriker. Byggt för Growth Technology Skandinavien, med stöd för WooCommerce och utan sidbyggare.
Version: 1.1.1
Requires at least: 6.4
Tested up to: 6.9
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: artof-taiga
Tags: e-commerce, one-column, custom-logo, footer-widgets
*/

/* =========================================================================
   1. Grundvärden
   ========================================================================= */
:root {
	--artof-green: #1c3328;
	--artof-green-2: #3d5f4d;
	--artof-beige: #eeece6;
	--artof-beige-2: #f2f1ed;
	--artof-beige-3: #f7f6f3;
	--artof-ink: #262626;
	--artof-head: #333333;
	--artof-dark: #111111;
	--artof-muted: #777777;
	--artof-line: rgba(29, 29, 27, 0.12);
	--artof-accent: #958e09;
	--artof-white: #ffffff;

	--artof-serif: "Cinzel", "Cormorant Garamond", Georgia, serif;
	--artof-sans: "Raleway", "Helvetica Neue", Arial, system-ui, sans-serif;

	/* Flytande mått: minsta värde vid 390 px bredd, största vid 1420 px. */
	--artof-gutter: clamp(20px, calc(20px + 100 * (100vw - 390px) / 1030), 120px);
	--artof-space: clamp(44px, calc(44px + 79 * (100vw - 390px) / 1030), 123px);
	--artof-logo-h: clamp(64px, calc(64px + 40 * (100vw - 390px) / 1030), 104px);
	--artof-head-pad: clamp(14px, calc(20px - 5 * (100vw - 390px) / 1030), 20px);
	--artof-masthead-top: clamp(105px, calc(105px + 92 * (100vw - 390px) / 1030), 197px);
	--artof-width: 900px;
	--artof-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

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

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

body {
	margin: 0;
	background: var(--artof-white);
	color: var(--artof-ink);
	font-family: var(--artof-sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--artof-green);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.2s, opacity 0.2s;
}

a:hover {
	color: var(--artof-green-2);
}

p {
	margin: 0 0 1.3em;
}

/* Rubriker: Cinzel, flytande storlekar */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	font-family: var(--artof-serif);
	font-weight: 400;
	color: var(--artof-head);
	line-height: 1.15;
}
h1 { font-size: clamp(35px, calc(35px + 53 * (100vw - 320px) / 1600), 88px); line-height: 1.13; }
h2 { font-size: clamp(31px, calc(31px + 30 * (100vw - 320px) / 1600), 61px); }
h3 { font-size: clamp(28px, calc(28px + 14 * (100vw - 320px) / 1600), 42px); line-height: 1.25; }
h4 { font-size: clamp(22px, calc(22px + 4 * (100vw - 320px) / 1600), 26px); line-height: 1.3; color: var(--artof-ink); }
h5 { font-size: 18px; line-height: 1.4; color: var(--artof-ink); }
h6 { font-size: 14px; line-height: 1.5; color: var(--artof-ink); }

strong, b { font-weight: 700; }

hr {
	height: 1px;
	margin: 2.4em 0;
	border: 0;
	background: var(--artof-line);
}

blockquote {
	margin: 1.6em 0;
	padding: 0 0 0 1.4em;
	border-left: 2px solid var(--artof-green-2);
	font-size: 1.15em;
	font-style: italic;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0 1.6em;
	font-size: 0.95em;
	line-height: 1.5;
}
th,
td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--artof-line);
	text-align: left;
	vertical-align: top;
}
th { font-weight: 700; }

figure { margin: 1.4em 0; }
figcaption { font-size: 0.85em; color: var(--artof-muted); }

.screen-reader-text,
.artof-skip:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.artof-skip:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 10px 16px;
	background: var(--artof-white);
	color: var(--artof-green);
}

/* =========================================================================
   2. Sidhuvud
   ========================================================================= */
.artof-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: var(--artof-head-pad) var(--artof-gutter);
	background: transparent;
	transition: background-color 0.4s var(--artof-ease), padding 0.4s var(--artof-ease);
	pointer-events: none;
}
body.admin-bar .artof-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .artof-header { top: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar .artof-header { position: absolute; }
	body.admin-bar .artof-header.is-stuck { position: fixed; top: 0; }
}

.artof-header.is-stuck {
	background-color: var(--artof-green);
}

.artof-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.artof-logo {
	display: inline-block;
	line-height: 0;
	pointer-events: auto;
}
.artof-header .artof-logo .artof-logo__img {
	display: block;
	width: auto;
	height: var(--artof-logo-h);
	max-width: none;
}
/* Ljusa sidor: mörkgrön logga tills sidhuvudet fäster (då blir bakgrunden grön). */
.artof-has-masthead .artof-header:not(.is-stuck) .artof-logo__img {
	filter: brightness(0) invert(16%) sepia(13%) saturate(1046%) hue-rotate(97deg) brightness(93%) contrast(92%);
}
.artof-has-masthead .artof-header:not(.is-stuck) .artof-logo__text { color: var(--artof-green); }

.artof-logo__text {
	font-family: var(--artof-serif);
	font-size: 22px;
	line-height: 1.2;
	color: var(--artof-white);
}

/* =========================================================================
   3. Rubrikyta (masthead) och sidram
   ========================================================================= */
.artof-masthead {
	padding: var(--artof-masthead-top) var(--artof-gutter) 0;
	background: var(--artof-beige);
	text-align: center;
}
.artof-masthead__inner {
	max-width: 1100px;
	margin: 0 auto;
}
.artof-masthead__title {
	margin: 0;
	overflow-wrap: break-word;
	hyphens: manual;
}
.artof-masthead__line {
	display: block;
	width: clamp(48px, 5vw, 72px);
	height: 1px;
	margin: clamp(22px, 2.4vw, 32px) auto 0;
	background: rgba(29, 29, 27, 0.3);
}

.artof-page {
	padding: var(--artof-space) var(--artof-gutter);
	background: var(--artof-beige);
}
.artof-card {
	padding: var(--artof-space) 20px;
	background: var(--artof-white);
}
.artof-content {
	max-width: var(--artof-width);
	margin: 0 auto;
}
.artof-content::after {
	content: "";
	display: table;
	clear: both;
}

/* Produktsidor: vit yta direkt under rubriken, ingen ram */
.artof-page--plain {
	padding: 0;
	background: var(--artof-white);
}
.artof-page--plain .artof-card {
	padding: var(--artof-space) var(--artof-gutter);
}

@media (max-width: 767px) {
	.artof-page { padding: var(--artof-space) 0 0; }
	.artof-card { padding: var(--artof-space) 20px; }
	.artof-page--plain .artof-card { padding: var(--artof-space) 20px; }
}

/* Innehåll */
.artof-content > *:first-child { margin-top: 0; }
.artof-content h2 { margin: 1.4em 0 0.5em; }
.artof-content h3 { margin: 1.3em 0 0.4em; }
.artof-content h4,
.artof-content h5,
.artof-content h6 { margin: 1.3em 0 0.4em; }
.artof-content > h2:first-child,
.artof-content > h3:first-child { margin-top: 0; }

.artof-content ul:not([class]),
.artof-content ol:not([class]) {
	margin: 0 0 1.4em;
	padding-left: 0;
}
.artof-content ul:not([class]) { list-style: none; }
.artof-content ul:not([class]) > li {
	position: relative;
	padding-left: 1.8em;
	margin-bottom: 0.4em;
}
.artof-content ul:not([class]) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.9em;
	width: 1em;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}
.artof-content ol:not([class]) { padding-left: 1.4em; }
.artof-content ol:not([class]) > li { margin-bottom: 0.4em; padding-left: 0.3em; }

.artof-content img { border-radius: 2px; }
.artof-content .alignleft { float: left; margin: 0.4em 1.6em 1em 0; }
.artof-content .alignright { float: right; margin: 0.4em 0 1em 1.6em; }
.artof-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }

.artof-list { list-style: none; margin: 0; padding: 0; }
.artof-list li { padding: 1.2em 0; border-bottom: 1px solid var(--artof-line); }
.artof-list a { font-family: var(--artof-serif); font-size: 1.4em; text-decoration: none; }
.artof-list p { margin: 0.3em 0 0; color: var(--artof-muted); }

/* =========================================================================
   4. Knappar och formulär
   ========================================================================= */
.artof-button,
.artof-content .wp-block-button__link,
.artof-content input[type="submit"],
.artof-content button[type="submit"],
.wpcf7 input[type="submit"] {
	display: inline-block;
	padding: 0.95em 2.2em;
	border: 1.5px solid var(--artof-green);
	border-radius: 999px;
	background: var(--artof-green);
	color: var(--artof-white);
	font-family: var(--artof-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.artof-button:hover,
.artof-content .wp-block-button__link:hover,
.artof-content input[type="submit"]:hover,
.artof-content button[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover {
	background: transparent;
	color: var(--artof-green);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.75em 0.9em;
	border: 1px solid rgba(29, 29, 27, 0.22);
	border-radius: 4px;
	background: var(--artof-white);
	color: var(--artof-ink);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--artof-green-2);
	box-shadow: 0 0 0 3px rgba(61, 95, 77, 0.15);
}
input[type="number"].qty { width: 5em; text-align: center; }
label { font-weight: 600; }

.wpcf7 p { margin-bottom: 1.1em; }
.wpcf7 label { display: block; }

/* =========================================================================
   5. Sidfot
   ========================================================================= */
.artof-footer {
	padding: clamp(48px, 6vw, 80px) var(--artof-gutter) 24px;
	background: var(--artof-white);
	color: var(--artof-ink);
	font-size: 15px;
	line-height: 1.75;
}
.artof-footer__inner { max-width: 1180px; margin: 0 auto; }
.artof-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px clamp(24px, 4vw, 64px);
	padding-bottom: clamp(32px, 4vw, 56px);
	border-bottom: 1px solid var(--artof-line);
}
.artof-footer .artof-widget { margin: 0 0 1.4em; }
.artof-footer .artof-widget__title {
	margin: 0 0 0.6em;
	font-family: var(--artof-sans);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.6;
	color: var(--artof-dark);
}
.artof-footer ul { list-style: none; margin: 0; padding: 0; }
.artof-footer li { margin: 0; }
.artof-footer a { color: var(--artof-muted); text-decoration: none; }
.artof-footer a:hover { color: var(--artof-dark); }
.artof-footer p { margin: 0 0 0.8em; }
.artof-footer__bottom {
	padding-top: 22px;
	text-align: center;
	font-size: 13px;
	color: var(--artof-muted);
}
.artof-footer__bottom .artof-widget { margin: 0; }
.artof-footer__bottom p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	.artof-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.artof-footer__cols { grid-template-columns: 1fr; }
}

/* =========================================================================
   6. WooCommerce
   ========================================================================= */
.artof-shop .woocommerce-products-header { margin-bottom: 1.6em; }
.artof-shop .term-description,
.artof-shop .page-description { margin-bottom: 1.8em; }
.artof-shop .woocommerce-result-count { font-size: 0.85rem; color: var(--artof-muted); }
.artof-shop .woocommerce-ordering select { width: auto; font-size: 0.85rem; padding: 0.5em 2em 0.5em 0.8em; }

/* Produktkort */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	font-family: var(--artof-serif);
	font-size: 16px;
	color: var(--artof-head);
	padding: 0.6em 0 0.3em;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--artof-accent);
	font-weight: 500;
}
.woocommerce ul.products li.product a { text-decoration: none; }

/* Produktsida */
.woocommerce div.product .product_title { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 1.6em;
	border-bottom: 1px solid var(--artof-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 1.6em 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0.8em 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--artof-muted);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	box-shadow: inset 0 -2px 0 var(--artof-green);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--artof-green); }
.woocommerce div.product .woocommerce-tabs .panel h2:first-child { margin-top: 0; }
.woocommerce div.product .product_meta { font-size: 0.85rem; color: var(--artof-muted); }
.woocommerce div.product .product_meta a { color: var(--artof-muted); }
.woocommerce .related.products,
.woocommerce .upsells.products { clear: both; padding-top: 2em; }
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 { font-size: clamp(26px, 3vw, 40px); }

/* Knappar i butiken (lägg till, uppdatera, skicka beställning) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce button.button.alt.disabled {
	padding: 0.95em 1.8em;
	border: 1.5px solid var(--artof-green);
	border-radius: 999px;
	background: var(--artof-green);
	color: var(--artof-white);
	font-family: var(--artof-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
	transition: background 0.25s, color 0.25s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--artof-green-2);
	border-color: var(--artof-green-2);
	color: var(--artof-white);
}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	opacity: 0.5;
	padding: 0.95em 1.8em;
	color: var(--artof-white);
}

/* Meddelanden */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	border-top-color: var(--artof-green-2);
	background: var(--artof-beige-3);
	color: var(--artof-ink);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--artof-green-2); }
.woocommerce-error { border-top-color: #b23a2b; }

/* Beställning och kassa */
.woocommerce table.shop_table {
	border: 1px solid var(--artof-line);
	border-radius: 4px;
	border-collapse: separate;
}
.woocommerce table.shop_table th { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-top-color: var(--artof-line); }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review { font-size: 0.95rem; }
.woocommerce form .form-row label { font-weight: 600; line-height: 1.6; }
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select { padding: 0.75em 0.9em; }
.woocommerce-checkout #payment {
	border-radius: 4px;
	background: var(--artof-beige-3);
}
.woocommerce-checkout #payment div.payment_box { background: var(--artof-beige-2); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--artof-beige-2); }

/* Rubriker i beställning, kassa och konto: mindre än sidrubriker */
.woocommerce-cart .artof-content h2,
.woocommerce-checkout .artof-content h3,
.woocommerce-checkout .artof-content h2,
.woocommerce-account .artof-content h2,
.woocommerce-account .artof-content h3,
.woocommerce-order-received .artof-content h2 {
	font-size: clamp(20px, calc(20px + 6 * (100vw - 390px) / 1030), 26px);
	line-height: 1.3;
	margin: 0 0 0.8em;
	overflow-wrap: break-word;
}

/* Mitt konto */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 2em; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--artof-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 0.7em 0; text-decoration: none; color: var(--artof-ink); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--artof-green); font-weight: 700; }
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password {
	border: 1px solid var(--artof-line);
	border-radius: 6px;
	padding: 24px;
}

@media (max-width: 767px) {
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary { float: none; width: 100%; }
}

/* =========================================================================
   7. Rörelse
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}