/**
 * The site's own rules, on every page: the box the header and footer are
 * centred in, Diwan's button, the sale badge, a page's own title, carousels
 * and icon lists before their scripts, the keyboard's focus ring, and words
 * for screen readers. Split from chrome.css in 3.6.0.
 */

.diwan-box {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: min(100%, var(--diwan-content-width, 1400px));
	padding-inline: 20px;
	width: 100%;
}

/* One class, no scoped copies. The header and footer rules that set a colour on
   their links exclude this class instead, which is what keeps the button the
   colour it says it is wherever it is dropped. */
.diwan-button {
	background: var(--diwan-btn-bg, #000);
	border: 1px solid var(--diwan-btn-border, #000);
	border-radius: var(--diwan-radius-sm, 4px);
	color: var(--diwan-btn-text, #fff);
	cursor: pointer;
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	padding: 11px 16px;
	text-align: center;
}

.diwan-button:hover {
	background: var(--diwan-papyrus, #e0b070);
	border-color: var(--diwan-papyrus, #e0b070);
	color: var(--diwan-wood, #3b0f00);
}

.diwan-button--block {
	display: block;
	inline-size: 100%;
}

/* ------------------------------------------------------------ sale badge */

/* WooCommerce draws "Sale!" in its own olive, which reads as decoration. Red
   says what it is. Written past WooCommerce's and Elementor's own rules for
   the badge, which carry two classes. */
body[class] span.onsale,
body[class] .woocommerce span.onsale,
body[class] .elementor-widget-woocommerce-product-images span.onsale {
	background: var(--diwan-sale, #c8102e);
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.2px;
}

/* ------------------------------------------------------- a page's own title */

/*
 * The basket, the checkout and the account pages are WooCommerce's own, and
 * their title is the theme's rather than one of ours. It is still the head of a
 * page, so it is the brand's blue like every other head on the site.
 *
 * A product's title is left out by name: that is the name of a book, and a book
 * keeps its own ink wherever it is written.
 */
.entry-title:not(.product_title),
.woocommerce-account .entry-title {
	color: var(--diwan-heading, #246b8f);
}

/* ------------------------------------------- the theme's own pages on a phone */

/*
 * The basket, the checkout and the account are WooCommerce's pages inside the
 * theme's wrapper, and the theme gives that wrapper a 10px gutter. Everything
 * this plugin draws uses 20, which is close enough to look like a mistake
 * rather than a difference. Raised to the site's own gutter on the widths where
 * the wrapper is the width of the screen; a page built in Elementor is left
 * alone, because its sections carry their own.
 */
@media (max-width: 1024px) {
	body:not(.elementor-page) main.site-main {
		padding-inline: 20px;
	}
}

/* The theme holds that wrapper to 600 pixels on a tablet and 800 on a small
   laptop, which put the account in a column a third of the screen wide with
   its own tabs running off the end (Diwan, 5 October 2026: every page between
   1300 and 768 looked over). The whole width instead, inside the gutter. */
@media (min-width: 768px) and (max-width: 1199px) {
	body:not(.elementor-page) main.site-main {
		max-inline-size: 100%;
		padding-inline: 20px;
	}
}

/* --------------------------------------- a carousel before its script arrives */

/*
 * Every carousel on the site is a row of slides that a script turns into a
 * carousel. Until it runs they are what the markup says they are — a stack, one
 * under the other — so the page opened four times its own height and collapsed
 * a moment later, in front of the reader.
 *
 * So the row is laid out in CSS first, exactly as the script will lay it out:
 * Elementor already writes how many slides to show and the gap between them
 * into the page's own stylesheet, as custom properties on the widget, and both
 * are read here. The slides past the first row are clipped rather than wrapped,
 * which is where the script puts them anyway.
 *
 * Everything here stops applying the instant Swiper marks the carousel as
 * started, so nothing fights the script once it is running.
 */
.swiper:not(.swiper-initialized) {
	overflow: hidden;
}

.swiper:not(.swiper-initialized) > .swiper-wrapper {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--swiper-slides-gap, 0px);
}

.swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
	flex: 0 0 calc(
		(100% - (var(--swiper-slides-to-display, 1) - 1) * var(--swiper-slides-gap, 0px))
		/ var(--swiper-slides-to-display, 1)
	);
}

/* Elementor's icon lists, sized before Elementor's own stylesheet for them
   arrives. Elementor asks for that stylesheet in the middle of the page, just
   before the first icon list (the event cards have one), and when the page is
   painted first the icons stand at their file's own size, a few hundred
   pixels tall, then fold. These are Elementor's own rules, so nothing changes
   once its stylesheet is read. */
.elementor-widget .elementor-icon-list-items {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.elementor-widget .elementor-icon-list-item,
.elementor-widget .elementor-icon-list-item a {
	align-items: var(--icon-vertical-align, center);
	display: flex;
}

.elementor-icon-list-icon svg {
	block-size: var(--e-icon-list-icon-size, 1em);
	inline-size: var(--e-icon-list-icon-size, 1em);
}

/* Words for screen readers only (the theme's own rule, repeated for a theme
   that has none): the listing headings and the names in card buttons. */
.screen-reader-text:not(:focus) {
	block-size: 1px;
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
	word-wrap: normal !important;
}

/*
 * WooCommerce's "Show password" eye, on the account, login and checkout forms:
 * 22 x 22 as WooCommerce draws it, under the 24 x 24 a finger can be asked to
 * hit (WCAG 2.2 target size). The eye itself stays as it is, centred in it.
 */
.woocommerce form .show-password-input {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-block-size: 24px;
	min-inline-size: 24px;
}

/* "Skip to content", out of sight until a keyboard reaches it, then plain to
   see over everything at the top of the page. */
.diwan-skip-link:focus {
	background: var(--diwan-black, #000000);
	clip: auto;
	clip-path: none;
	color: var(--diwan-white, #ffffff);
	block-size: auto;
	inline-size: auto;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	outline: 2px solid var(--diwan-hover, #e0b070);
	outline-offset: 2px;
	padding: 12px 16px;
	position: fixed !important;
	text-decoration: none;
	z-index: 100000;
}

/*
 * Where the keyboard is must always show (WCAG 2.4.7). Some of the site's
 * links and fields (the header's, the search box) had their focus ring taken
 * away by a theme or kit rule and nothing put in its place. A ring in the
 * element's own text colour shows on light grounds and on dark ones, and
 * :focus-visible keeps it to the keyboard: a click does not draw it.
 */
html body :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
}

/* The header's search field is the exception: a field shows the ring on a
   click as well, and a heavy black box opened up inside the search box every
   time it was clicked (Diwan, 5 October 2026). The box itself shows where
   the keyboard is instead, its edge darkening (.diwan-search:focus-within),
   and the field does not ease into anything. */
html body .diwan-search .diwan-search__field:focus-visible {
	outline: none !important;
}

/* Nor under the header that sticks (WCAG 2.4.11): tabbing down the home
   page, a book's heart was brought into view behind the header and its menu
   (local test, 16 October 2026). The page keeps the header's own height clear
   at the top when it brings anything into view; chrome.js writes the height. */
html {
	scroll-padding-block-start: calc(var(--diwan-header-h, 0px) + 16px);
}

.diwan-header .diwan-search__field {
	transition: none;
}

/*
 * Diwan's tab buttons (the book page, the collection under it, Diwan Kids):
 * the line under the chosen one is there from the start, only its colour
 * changes. Elementor eases the whole border, so a button going from no
 * border to a line underneath drew a thin box all round it for a moment
 * first (Diwan, 5 October 2026). Every button now carries the same 2-pixel
 * line, see-through until it is chosen, and only colours are eased.
 */
/* !important because Elementor writes every state's border through its own
   variables, hover included, and those rules outrank a stylesheet's. */
:is(.elementor-widget-n-tabs, .elementor-widget-nested-tabs)[class*="diwan-"] .e-n-tab-title {
	border-color: transparent !important;
	border-style: solid !important;
	border-width: 0 0 2px !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

:is(.elementor-widget-n-tabs, .elementor-widget-nested-tabs)[class*="diwan-"] .e-n-tab-title[aria-selected="true"] {
	border-color: var(--diwan-text, #000000) !important;
}