/*
Theme Name: Blocksy Child
Theme URI: https://isikdesign.com
Author: Isik Designs
Description: Child theme for Blocksy. Visual customizations for isikdesign.com — colors, spacing, alignment and typography — belong here. Functionality belongs in the isik-core plugin instead.
Template: blocksy
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blocksy-child
*/

/* Custom styles below this line.
 *
 * Colours come from the Customizer palette rather than being written out here,
 * so changing a colour under Customizer > Colors updates the whole site. The
 * variables Blocksy exposes:
 *   --theme-palette-color-1  links and buttons        (#3f6152 green)
 *   --theme-palette-color-2  link and button hover    (#2c453a)
 *   --theme-palette-color-3  body text                (#414740)
 *   --theme-palette-color-4  headings                 (#1b2620)
 *   --theme-palette-color-5  borders                  (#e5dfd4 sand)
 *   --theme-palette-color-6  footer background        (#1b2620)
 *   --theme-palette-color-7  page background          (#fdfbf7 warm paper)
 *   --theme-palette-color-8  subtle section background(#f5f0e7 sand)
 *
 * Fonts are Customizer settings too (Customizer > Typography): Fraunces for
 * headings, Karla for body and UI. Sizes and weights are set there, not here.
 */

/* =====================================================================
 * 1. Design tokens
 *
 * Blocksy's palette has exactly eight slots and all eight are in use, so the
 * brass accent lives here instead. It is decorative only — thin rules, markers,
 * the active menu underline — never body text: brass on paper measures 3.9:1,
 * short of the 4.5:1 a paragraph needs. Anything that has to carry text wants a
 * darker mix (#8a5f22 clears white text at 5.6:1) rather than this one.
 * ================================================================== */

:root {
	--isik-accent: #a5762f;

	--isik-radius: 10px;
	--isik-radius-sm: 6px;

	--isik-shadow-sm: 0 1px 2px rgba(27, 38, 32, 0.04), 0 6px 16px -10px rgba(27, 38, 32, 0.2);

	/* Drawn at the same 1.7px stroke Blocksy uses for the header's search and
	 * cart icons, and painted through a mask so it inherits the link colour. */
	--isik-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21c0-4.1 3.4-6.6 7.5-6.6s7.5 2.5 7.5 6.6'/%3E%3C/svg%3E");

	/* Review stars ship in WooCommerce orange (#FDA256), which fights the green.
	 * Blocksy exposes both states as variables, so no star markup is touched. */
	--star-rating-initial-color: var(--isik-accent);
	--star-rating-inactive-color: rgba(165, 118, 47, 0.25);
}

/* =====================================================================
 * 2. Typography and global polish
 * ================================================================== */

/* Headings are short lines of display type; balancing them stops a single
 * orphaned word on the second line. Paragraphs only need the last line fixed. */
h1,
h2,
h3,
h4,
.page-title,
.entry-title {
	text-wrap: balance;
}

p,
li,
figcaption,
dd {
	text-wrap: pretty;
}

::selection {
	background: rgba(63, 97, 82, 0.16);
	color: var(--theme-palette-color-4);
}

/* Blocksy styles focus on its own components but leaves content links and
 * details/summary without a visible ring for keyboard users. */
.entry-content a:focus-visible,
.ct-footer a:focus-visible,
.ct-header a:focus-visible,
.woocommerce a:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--theme-palette-color-1);
	outline-offset: 3px;
}

/* The first paragraph after a page title reads as a standfirst. */
.entry-content > p:first-child {
	font-size: 1.1em;
	line-height: 1.6;
}

/* A short brass rule under centred section headings. Section headings on the
 * home page are centred; body copy headings are left aligned and keep the
 * plain treatment, so this stays a section marker rather than decoration. */
.entry-content > .wp-block-heading.has-text-align-center::after {
	background: var(--isik-accent);
	border-radius: 2px;
	content: "";
	display: block;
	height: 2px;
	margin-block-start: 0.75em;
	margin-inline: auto;
	width: 46px;
}

/* =====================================================================
 * 3. Buttons and links
 *
 * Size, padding, radius and the hover lift are Customizer settings
 * (Customizer > General > Buttons). Only what the Customizer cannot express is
 * written out here.
 * ================================================================== */

/* Blocksy's outline style borrows the text colour for its border, which on
 * paper reads as an unfinished box. Pin it to the brand green instead.
 *
 * "On paper" is the whole point, so cover blocks are excluded: a cover sits
 * inside .entry-content like everything else, and without this exclusion brand
 * green lands on a dark photo where it is unreadable. The exclusion is wrapped
 * in :where() so it costs no specificity — these selectors already count five
 * classes, and section 6's cover rules need to stay able to outrank them. */
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):where(:not(.wp-block-cover *)) {
	border-color: var(--theme-palette-color-1);
	border-width: 1px;
	color: var(--theme-palette-color-1);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):where(:not(.wp-block-cover *)):hover {
	background: var(--theme-palette-color-1);
	border-color: var(--theme-palette-color-1);
	color: #ffffff;
}

/* Content links get an underline that sits clear of the descenders rather than
 * cutting through them. */
.entry-content p a:not(.wp-block-button__link),
.entry-content li a:not(.wp-block-button__link) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* =====================================================================
 * 4. Header
 * ================================================================== */

/* The header band and the page background are both warm neutrals a shade
 * apart, so the edge between them needs a hairline to read as an edge.
 *
 * Blocksy applies the row's shadow from `#header [data-row]`, an ID selector
 * that outranks any class selector here, so the hairline has to go through the
 * variable it reads. Setting it also overrides Customizer > Header > Row >
 * Shadow — remove this block if that option is ever used instead. */
#header [data-row="middle"] {
	--theme-box-shadow: inset 0 -1px 0 var(--theme-palette-color-5);
}

/* An underline that appears on hover and stays put on the current page. Using
 * text-decoration rather than a positioned pseudo-element keeps it aligned to
 * the text baseline whatever height the header row is set to. */
.ct-header [data-id="menu"] > ul > li > .ct-menu-link {
	text-decoration: underline 2px transparent;
	text-underline-offset: 7px;
	transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.ct-header [data-id="menu"] > ul > li:hover > .ct-menu-link,
.ct-header [data-id="menu"] > ul > li:focus-within > .ct-menu-link {
	text-decoration-color: currentColor;
}

.ct-header [data-id="menu"] > ul > li.current-menu-item > .ct-menu-link,
.ct-header [data-id="menu"] > ul > li.current-menu-ancestor > .ct-menu-link,
.ct-header [data-id="menu"] > ul > li.current_page_item > .ct-menu-link {
	color: var(--theme-palette-color-4);
	text-decoration-color: var(--isik-accent);
}

@media (prefers-reduced-motion: reduce) {
	.ct-header [data-id="menu"] > ul > li > .ct-menu-link {
		transition: none;
	}
}

/* Account ------------------------------------------------------------ */

/* "Account" is a utility link, not another place to browse, so it takes a mark
 * of the same weight as the search and cart icons next to it instead of sitting
 * in the run of category names unmarked. The label stays — an icon on its own
 * would leave the link with nothing to read out.
 *
 * The item is the one carrying the `isik-account-link` class under Appearance >
 * Menus > Account > CSS Classes; clear that field and it goes back to a plain
 * menu item. */
.ct-header .isik-account-link > .ct-menu-link::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 1.05em;
	margin-inline-end: 0.45em;
	-webkit-mask: var(--isik-account-icon) center / contain no-repeat;
	mask: var(--isik-account-icon) center / contain no-repeat;
	vertical-align: -0.16em;
	width: 1.05em;
}

/* Cart --------------------------------------------------------------- */

.ct-header-cart .ct-cart-item {
	gap: 0.6rem;
}

/* "$0.00" next to an empty cart is noise; the icon and its badge already say
 * the cart is empty. The subtotal returns as soon as something is in it. */
.ct-header-cart:has(.ct-cart-content[data-count="0"]) .ct-label {
	display: none;
}

/* =====================================================================
 * 5. Page titles
 *
 * Inner pages open on a bare title with nothing marking where the heading
 * ends and the copy begins. A hairline under it does that, and lines up with
 * the content because the title shares the content's width.
 * ================================================================== */

.hero-section[data-type="type-1"]:has(.page-title) {
	border-block-end: 1px solid var(--theme-palette-color-5);
	margin-block-end: clamp(2rem, 4vw, 3rem);
	padding-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
}

.hero-section .page-title {
	margin: 0;
}

/* Product-category pages put the category photo behind the title, and the shop
 * uses the same band without one. Both now carry a white title (set under
 * Customizer > Page Title > Title > Font Color, because Blocksy's default left
 * it the same colour as the band behind it). Blocksy also leaves the photo's
 * overlay empty, so white type could land on a pale shot — these category
 * thumbnails are products on light wood. This is that missing dim. */
.hero-section[data-type="type-2"] > figure > .ct-media-container::after {
	background: linear-gradient(
		180deg,
		rgba(27, 38, 32, 0.5) 0%,
		rgba(27, 38, 32, 0.68) 100%
	);
}

/* Blocksy sets breadcrumbs uppercase at 12px (Customizer > Page Title >
 * Breadcrumbs). Uppercase at that size needs tracking to stay readable. */
.ct-breadcrumbs {
	letter-spacing: 0.06em;
}

/* =====================================================================
 * 6. Cover hero on the home page
 * ================================================================== */

/* The overlay colour and the dim percentage are both editor settings on the
 * cover block itself (select the cover > Styles > Overlay), so neither is
 * written out here — a gradient set from this file would sit on top of the
 * opaque overlay colour and never show through anyway. The dim has to stay at
 * or above 60% for white text to clear 4.5:1 over this particular photo, which
 * is bright, high-contrast wood grain from edge to edge. Swap the photo for a
 * calmer one and the dim can come back down. */

.wp-block-cover h1 {
	margin-block-end: 0.4em;
	max-width: 22ch;
	margin-inline: auto;
}

.wp-block-cover .wp-block-cover__inner-container > p {
	margin-inline: auto;
	max-width: 52ch;
}

.wp-block-cover .wp-block-buttons {
	gap: 0.75rem 1rem;
}

/* Blocksy's outline button style is nearly invisible over a dark photo, and an
 * outline button is the one element on the cover with no surface of its own —
 * white letters land straight on the wood grain, which swings from bright sap
 * to near-black in the width of a single character. The filled button beside it
 * has no such trouble because it brings its own background.
 *
 * So this one gets a surface too: a translucent wash, dark enough to hold the
 * text (worst point over this photo goes from 3.1:1 to 7.6:1) and light enough
 * that the button still reads as the secondary of the pair. */
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link {
	backdrop-filter: blur(2px);
	background-color: rgba(27, 38, 32, 0.45);
	border-color: #ffffff;
	color: #ffffff;
}

.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--theme-palette-color-4);
}

/* =====================================================================
 * 7. Category grid on the home page
 *
 * The WooCommerce categories block ships as a plain bulleted list. With a
 * thumbnail set on each category it works far better as a card grid.
 * ================================================================== */

.wc-block-product-categories-list--depth-0 {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.wc-block-product-categories-list-item {
	margin: 0;
}

.wc-block-product-categories-list-item > a {
	background: var(--theme-palette-color-7);
	border: 1px solid var(--theme-palette-color-5);
	border-radius: var(--isik-radius);
	color: var(--theme-palette-color-4);
	display: flex;
	flex-direction: column;
	font-weight: 600;
	height: 100%;
	letter-spacing: 0.01em;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-block-product-categories-list-item > a:hover,
.wc-block-product-categories-list-item > a:focus-visible {
	border-color: var(--theme-palette-color-1);
	box-shadow: var(--isik-shadow-sm);
	transform: translateY(-2px);
}

/* The image is wrapped in a span, which defaults to inline and would leave a
 * baseline gap under the photo. */
.wc-block-product-categories-list-item__image {
	display: block;
	overflow: hidden;
}

.wc-block-product-categories-list-item__image img {
	aspect-ratio: 4 / 3;
	display: block;
	object-fit: cover;
	transition: transform 0.45s ease;
	width: 100%;
}

.wc-block-product-categories-list-item > a:hover .wc-block-product-categories-list-item__image img {
	transform: scale(1.045);
}

.wc-block-product-categories-list-item__name {
	display: block;
	padding: 0.95rem 0.75rem 1.05rem;
}

/* Sub-categories would nest a card inside a card; the Shop menu covers that. */
.wc-block-product-categories-list-item .wc-block-product-categories-list {
	display: none;
}

/* =====================================================================
 * 8. Product listings
 * ================================================================== */

.woocommerce ul.products li.product {
	transition: transform 0.2s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
}

.woocommerce ul.products li.product .ct-media-container {
	background: var(--theme-palette-color-8);
	border-radius: var(--isik-radius);
	overflow: hidden;
}

.woocommerce ul.products li.product .ct-media-container img {
	transition: transform 0.5s ease;
}

.woocommerce ul.products li.product:hover .ct-media-container img {
	transform: scale(1.03);
}

/* The category line above the title is a label, not a heading. */
.woocommerce ul.products li.product .entry-meta {
	opacity: 0.72;
}

/* The price is the one number a shopper scans for, so it takes the heading
 * colour to sit a step above the muted category label; the smaller size keeps
 * it from competing with the product name. */
.woocommerce ul.products li.product .price {
	color: var(--theme-palette-color-4);
	font-size: 0.95rem;
}

/* Shop toolbar ------------------------------------------------------- */

.woo-listing-top {
	border-block-end: 1px solid var(--theme-palette-color-5);
	padding-block-end: 1rem;
}

.woocommerce-result-count {
	letter-spacing: 0.01em;
	opacity: 0.75;
}

/* Notices ------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--isik-radius-sm);
}

/* =====================================================================
 * 9. Single product page
 * ================================================================== */

.single-product .entry-summary .price {
	margin-block-end: 1.1em;
}

/* Variation dropdowns sit directly above the personalisation panel, so the
 * two need to read as one continuous set of choices. */
.single-product table.variations {
	margin-block-end: 1.5em;
}

.single-product table.variations th,
.single-product table.variations td {
	padding-block: 0.35em;
}

.single-product table.variations th {
	font-weight: 600;
}

.single-product .woocommerce-variation-price {
	margin-block-end: 1em;
}

.single-product .product_meta {
	border-block-start: 1px solid var(--theme-palette-color-5);
	font-size: 0.88rem;
	margin-block-start: 2em;
	padding-block-start: 1.25em;
}

.single-product .product_meta > span {
	display: block;
	margin-block-end: 0.35em;
	opacity: 0.85;
}

/* The gallery and the summary are two panels of one block; rounding the
 * gallery to match the cards keeps them in the same family. */
.single-product .woocommerce-product-gallery .flexy-item .ct-media-container {
	border-radius: var(--isik-radius);
	overflow: hidden;
}

/* Related products run straight on from the description with nothing between
 * them, so a rule and real space mark where the product ends. */
.single-product .related,
.single-product .up-sells {
	border-block-start: 1px solid var(--theme-palette-color-5);
	margin-block-start: clamp(3rem, 6vw, 4.5rem);
	padding-block-start: clamp(2.25rem, 4vw, 3rem);
}

/* =====================================================================
 * 10. Cart and checkout
 * ================================================================== */

/* Personalisation answers are listed under each line item; they are reference
 * detail, not headline text. */
.woocommerce-cart .cart_item dl.variation,
.woocommerce-checkout .cart_item dl.variation,
.wc-block-components-product-details {
	font-size: 0.86rem;
	opacity: 0.85;
}

.woocommerce-cart dl.variation dt {
	font-weight: 600;
}

/* Long engraving text should wrap rather than stretch the table. */
.woocommerce-cart dl.variation dd p {
	overflow-wrap: anywhere;
}

/* =====================================================================
 * 11. Forms
 *
 * Field height, radius and border colour are Customizer settings
 * (Customizer > General > Form Elements).
 * ================================================================== */

.woocommerce form .form-row label,
.wc-block-components-text-input label {
	font-weight: 600;
}

.woocommerce form .form-row .required {
	color: var(--theme-danger-color, #b32d2e);
	text-decoration: none;
}

/* =====================================================================
 * 12. My Account
 *
 * Two different pages share one shortcode. Logged out, `[woocommerce_my_account]`
 * is the login and registration page and Blocksy marks it `.ct-woo-unauthorized`;
 * logged in it is the account area, marked `.ct-woo-account`, and Blocksy already
 * builds that as a sidebar of links beside the content — nav width, the icons and
 * the active row's colours are its styles, and the Customizer sets the colours
 * (Customizer > WooCommerce > Account Page). Only the two forms and the dashboard
 * are styled from scratch here.
 * ================================================================== */

/* Login and registration ---------------------------------------------- */

/* Woo floats the two halves at 48% with nothing between them, which reads as
 * one long form that happens to have two submit buttons. Panels with real space
 * between them make it obvious they are alternatives. */
.ct-woo-unauthorized #customer_login {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.ct-woo-unauthorized #customer_login > .col-1,
.ct-woo-unauthorized #customer_login > .col-2 {
	background: var(--theme-palette-color-7);
	border: 1px solid var(--theme-palette-color-5);
	border-radius: var(--isik-radius);
	box-shadow: var(--isik-shadow-sm);
	float: none;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	width: auto;
}

.ct-woo-unauthorized #customer_login h2 {
	border-block-end: 1px solid var(--theme-palette-color-5);
	font-size: 1.35rem;
	margin-block: 0 1.5rem;
	padding-block-end: 0.75rem;
}

/* First and last name sit side by side; below the panel's own breakpoint there
 * is not enough width left for two fields, so they stack. */
.ct-woo-unauthorized .woocommerce-form-register {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: 1fr 1fr;
}

.ct-woo-unauthorized .woocommerce-form-register > *:not(.form-row-first):not(.form-row-last) {
	grid-column: 1 / -1;
}

.ct-woo-unauthorized .woocommerce-form-register .form-row-first,
.ct-woo-unauthorized .woocommerce-form-register .form-row-last {
	float: none;
	width: auto;
}

@media (max-width: 30rem) {
	.ct-woo-unauthorized .woocommerce-form-register {
		grid-template-columns: 1fr;
	}
}

/* The one action each panel is for. */
.ct-woo-unauthorized .woocommerce-form-login__submit,
.ct-woo-unauthorized .woocommerce-form-register__submit {
	width: 100%;
}

.ct-woo-unauthorized .woocommerce-form-login__rememberme {
	display: block;
	margin-block-end: 1rem;
}

.ct-woo-unauthorized .lost_password {
	font-size: 0.9rem;
	margin-block-end: 0;
	text-align: center;
}

/* Woo prints the privacy notice as a plain paragraph between the password field
 * and the button, where it competes with both. */
.ct-woo-unauthorized .woocommerce-privacy-policy-text p,
.ct-woo-unauthorized .woocommerce-form-register > p:not([class]) {
	font-size: 0.85rem;
	opacity: 0.8;
}

/* Account area --------------------------------------------------------- */

.ct-acount-nav {
	border-radius: var(--isik-radius);
}

/* Blocksy's active row is a solid green bar. A marker down its leading edge
 * says the same thing without the nav out-shouting the content beside it. */
.woocommerce-MyAccount-navigation ul li.is-active a {
	box-shadow: inset 3px 0 0 var(--isik-accent);
}

.ct-account-user-box {
	color: var(--theme-palette-color-4);
	font-weight: 600;
}

/* Dashboard ------------------------------------------------------------ */

.isik-account-greeting {
	margin-block-end: 2rem;
}

.isik-account-recent__title {
	border-block-end: 1px solid var(--theme-palette-color-5);
	margin-block-end: 1.25rem;
	padding-block-end: 0.6rem;
}

.isik-order-list {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The order number and its status lead; the date, the total and the link to the
 * order itself follow on the second line, with the link kept out on the end so
 * a run of orders has one column to scan down. */
.isik-order {
	align-items: center;
	background: var(--theme-palette-color-8);
	border-radius: var(--isik-radius-sm);
	column-gap: 1.5rem;
	display: grid;
	grid-template-columns: 1fr auto;
	padding: 1rem 1.25rem;
	row-gap: 0.3rem;
}

.isik-order__summary {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.isik-order__number {
	color: var(--theme-palette-color-4);
	font-weight: 600;
	text-decoration: none;
}

.isik-order__status {
	background: var(--theme-palette-color-7);
	border-radius: 100px;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	padding: 0.2em 0.7em;
	text-transform: uppercase;
}

/* A finished order is the one status worth colouring; everything else is still
 * in progress and reads the same. */
.isik-order--status-completed .isik-order__status {
	background: rgba(63, 97, 82, 0.12);
	color: var(--theme-palette-color-2);
}

.isik-order__meta {
	column-gap: 0.6rem;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.88rem;
	opacity: 0.8;
}

/* A middot between the date and the total, drawn rather than typed so it is not
 * read out as content. */
.isik-order__meta > * + *::before {
	content: "·";
	margin-inline-end: 0.6rem;
}

.isik-order__view {
	font-weight: 600;
	grid-column: 2;
	grid-row: 1 / span 2;
	white-space: nowrap;
}

.isik-account-recent__all {
	margin-block-start: 1.25rem;
}

.isik-account-empty {
	background: var(--theme-palette-color-8);
	border-radius: var(--isik-radius-sm);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	text-align: center;
}

.isik-account-empty p {
	margin-block-end: 1.25rem;
}

/* Addresses and account details ---------------------------------------- */

.woocommerce-Addresses {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.woocommerce-Addresses > .woocommerce-Address {
	border: 1px solid var(--theme-palette-color-5);
	border-radius: var(--isik-radius-sm);
	float: none;
	padding: 1.25rem 1.5rem;
	width: auto;
}

.woocommerce-Address-title {
	align-items: baseline;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
}

.woocommerce-EditAccountForm fieldset {
	border: 0;
	border-block-start: 1px solid var(--theme-palette-color-5);
	margin-inline: 0;
	padding: 1.5rem 0 0;
}

.woocommerce-EditAccountForm legend {
	font-weight: 600;
	padding-inline: 0;
}

/* =====================================================================
 * 13. FAQ accordions
 * ================================================================== */

.wp-block-details {
	border-block-end: 1px solid var(--theme-palette-color-5);
	padding-block: 1rem;
}

.wp-block-details summary {
	align-items: baseline;
	color: var(--theme-palette-color-4);
	cursor: pointer;
	display: flex;
	font-weight: 600;
	gap: 0.85rem;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* A chevron drawn from two borders: points right when closed, down when open.
 * Nudged down a touch so it centres on the first line of the question. */
.wp-block-details summary::before {
	border-bottom: 2px solid var(--isik-accent);
	border-right: 2px solid var(--isik-accent);
	content: "";
	flex: none;
	height: 0.45em;
	transform: translateY(0.15em) rotate(-45deg);
	transition: transform 0.2s ease;
	width: 0.45em;
}

.wp-block-details[open] summary::before {
	transform: translateY(0.05em) rotate(45deg);
}

.wp-block-details[open] summary {
	margin-block-end: 0.5rem;
}

/* Answers line up with the question text rather than with the chevron: the
 * chevron's own width plus the flex gap that follows it. */
.wp-block-details > *:not(summary) {
	padding-inline-start: calc(0.45em + 0.85rem);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details summary::before {
		transition: none;
	}
}

/* =====================================================================
 * 14. Content elements
 * ================================================================== */

/* Photographs in the flow of a page should match the cards around them. */
.entry-content > .wp-block-image img,
.entry-content > .wp-block-gallery img {
	border-radius: var(--isik-radius);
}

.entry-content blockquote {
	border-inline-start: 2px solid var(--isik-accent);
	padding-inline-start: 1.5rem;
}

.entry-content hr.wp-block-separator {
	border: 0;
	border-block-start: 1px solid var(--theme-palette-color-5);
}

/* A step or feature set built from columns reads as a set when each column
 * starts on the same brass rule. */
.entry-content > .wp-block-columns > .wp-block-column > .wp-block-heading:first-child {
	border-block-start: 2px solid var(--isik-accent);
	margin-block-start: 0;
	padding-block-start: 0.9rem;
}

/* =====================================================================
 * 15. Footer
 *
 * The footer runs on a dark background while the rest of the site is light,
 * so the text colours Blocksy inherits from the page would be unreadable.
 * Re-pointing the variables inside .ct-footer keeps everything — widgets,
 * menu, copyright — legible without styling each piece separately.
 * ================================================================== */

.ct-footer {
	--theme-text-color: #c9d2cc;
	--theme-headings-color: #ffffff;
	--theme-link-initial-color: #c9d2cc;
	--theme-link-hover-color: #ffffff;
	--theme-border-color: rgba(255, 255, 255, 0.14);
}

.ct-footer [data-row="middle"] {
	padding-block: 55px 15px;
}

/* Column headings, not page headings: the footer is three short lists and they
 * only need labelling.
 *
 * The !important is not decoration. Each widget block carries the editor's
 * "medium" font size preset, and WordPress prints preset font sizes as
 * !important, so a plain declaration here loses and the headings stay at their
 * editor size. Clear the size on the three widget blocks under Appearance >
 * Widgets and both this and the !important can go. */
.ct-footer h3 {
	font-size: 1rem !important;
	letter-spacing: 0.02em;
	margin-block-end: 1.2em;
}

.ct-footer h3::after {
	background: var(--isik-accent);
	content: "";
	display: block;
	height: 2px;
	margin-block-start: 0.85em;
	width: 28px;
}

.ct-footer .isik-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ct-footer .isik-footer-list li {
	margin-block-end: 0.5em;
}

.ct-footer a {
	text-decoration: none;
}

.ct-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ct-footer [data-row="bottom"] {
	border-block-start: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.9rem;
}

/* The copyright and the footer menu share one column; keep them apart. */
.ct-footer [data-row="bottom"] [data-column] {
	align-items: center;
	column-gap: 2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 0.75rem;
}

.ct-footer #footer-menu .menu {
	column-gap: 1.5rem;
	row-gap: 0.4rem;
}

/* =====================================================================
 * 16. Shared spacing
 * ================================================================== */

.entry-content > .wp-block-heading {
	margin-block-start: 1.6em;
}

/* Full-width cover directly under the header should not leave a gap. */
.page .entry-content > .wp-block-cover.alignfull:first-child {
	margin-block-start: 0;
}

/* =====================================================================
 * 17. Reduced motion
 *
 * Everything above that moves is listed here once, so a visitor who asks for
 * less motion gets the colour and border changes but none of the travel.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product .ct-media-container img,
	.wc-block-product-categories-list-item > a,
	.wc-block-product-categories-list-item__image img {
		transition: none;
	}

	.woocommerce ul.products li.product:hover,
	.woocommerce ul.products li.product:hover .ct-media-container img,
	.wc-block-product-categories-list-item > a:hover,
	.wc-block-product-categories-list-item > a:hover .wc-block-product-categories-list-item__image img {
		transform: none;
	}
}