/*
 * Clare Brady theme - main styles
 *
 * Breakpoints (same as the original Elementor site):
 *   desktop  : > 1024px   (default rules)
 *   tablet   : <= 1024px
 *   mobile   : <= 767px
 *
 * Sections:
 *   1. Tokens & base
 *   2. Header (top bar, menu bar, mobile menu)
 *   3. Footer
 *   4. Page banner + content panel
 *   5. Page content (blocks used in the editor)
 *   6. Page-specific layouts (About, Books, News, Links)
 *   7. Utilities
 */

/* ==========================================================================
   1. Tokens & base
   ========================================================================== */

:root {
	--cb-panel: #f2f2f2;
	--cb-text: #000;
	--cb-link: #c36;
	--cb-heading-font: "Rosarivo", sans-serif;
	--cb-body-font: "Roboto", sans-serif;
	--cb-system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--cb-header-h: 139px;
	--cb-admin-bar: var(--wp-admin--admin-bar--height, 0px);
}

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

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

body {
	margin: 0;
	padding-top: var(--cb-header-h);
	font-family: var(--cb-system-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #333;
	background: #fff url("../img/bg-desk-full.png") center top / cover no-repeat scroll;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* Desk photo stays put while scrolling on desktop only (as on the original) */
@media (min-width: 1025px) {
	body {
		background-attachment: fixed;
	}
}

/* These pages anchor the desk photo top-left instead of top-centre */
body.page-about,
body.page-news,
body.page-books,
body.page-my-process,
body.page-general-privacy-cookies-policy,
body.page-legal {
	background-position: left top;
}

@media (max-width: 767px) {
	body.page-my-process {
		background-position: left center;
	}
}

/* Home page: the wooden desk scrolls with the page */
body.is-desk {
	background: #fff url("../img/bg-wood-desk.jpg") center center / cover no-repeat scroll;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
	vertical-align: middle;
}

a {
	color: var(--cb-link);
	text-decoration: none;
	background-color: transparent;
}

a:hover,
a:active {
	color: #336;
}

h1, h2, h3, h4, h5, h6 {
	margin-block: 0 0.5rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
}

p {
	margin-block: 0 0.9rem;
}

button,
input,
select,
textarea {
	font: inherit;
}

.site-main {
	display: block;
	overflow-x: clip;
}

/* Home: the desk sits 10px in from the edges, like the original */
.site-main--desk {
	padding: 10px 10px 0;
}

/* ==========================================================================
   2. Header
   ========================================================================== */

.site-header {
	position: fixed;
	top: var(--cb-admin-bar);
	left: 0;
	right: 0;
	z-index: 99;
}

/* --- top bar --- */

.topbar {
	display: flex;
	gap: 20px;
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.84);
}

.topbar__email {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 10px;
	font-family: var(--cb-body-font);
	font-size: 14px;
	line-height: 24px;
	color: #fff;
}

.topbar__email:hover {
	color: #fff;
}

.topbar__email .icon {
	width: 17px;
	height: 17px;
	fill: #fff;
	transform: translateY(-2px);
	flex: 0 0 auto;
}

.topbar__email span {
	padding-left: 5px;
}

.topbar__icons {
	display: flex;
	flex: 1 1 auto;
	justify-content: flex-end;
	gap: 20px;
	padding-right: 20px;
}

.topbar__account {
	display: block;
	padding-top: 10px;
	line-height: 0;
}

.topbar__account .icon {
	width: 18px;
	height: 18px;
	fill: #fff;
}

.cart-toggle {
	position: relative;
	align-self: flex-start;
	padding: 10px 0 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.cart-toggle .icon {
	width: 20px;
	height: 20px;
	fill: #fff;
}

.cart-count {
	position: absolute;
	top: 2px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 100%;
	background-color: #d9534f;
	color: #fff;
	font-family: var(--cb-heading-font);
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}

/* --- menu bar --- */

.navbar {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 20px;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.79) 0%);
}

.navbar__logo {
	display: none;
}

.main-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav__list > li {
	margin: 0 7.5px;
}

.main-nav__list > li:first-child {
	margin-left: 0;
}

.main-nav__list > li:last-child {
	margin-right: 0;
}

.main-nav__list a {
	display: flex;
	padding: 13px 20px;
	font-family: var(--cb-heading-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 9px;
	color: #3a3939;
	white-space: nowrap;
}

.main-nav__list a:hover,
.main-nav__list a:focus,
.main-nav__list .current-menu-item > a,
.main-nav__list .current_page_item > a {
	color: #000;
}

.nav-toggle {
	display: none;
}

.header-gap {
	height: 20px;
}

/* --- tablet --- */

@media (max-width: 1024px) {
	.topbar__email {
		font-size: 14px;
	}
}

/* --- mobile --- */

@media (max-width: 767px) {
	:root {
		/* top bar 64 + menu bar padding 20 + gap 20 + logo (48% of the bar, 500x137) */
		--cb-header-h: calc(104px + (100vw - 40px) * 0.48 * 0.274);
	}

	.topbar__email {
		margin-left: -14px;
		font-size: 12px;
	}

	.topbar__email .icon {
		display: none;
	}

	.navbar {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		background: rgba(0, 0, 0, 0.6);
	}

	.navbar__logo {
		display: block;
		width: 48%;
		max-width: 48%;
	}

	.navbar__logo img {
		display: block;
		width: 100%;
	}

	.nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 7px;
		margin: 0;
		border: 0;
		border-radius: 3px;
		background: transparent;
		color: #fff;
		cursor: pointer;
	}

	.nav-toggle .icon {
		width: 28px;
		height: 28px;
		fill: #fff;
	}

	.nav-toggle__close,
	.nav-open .nav-toggle__open {
		display: none;
	}

	.nav-open .nav-toggle__close {
		display: block;
	}

	.main-nav {
		position: absolute;
		top: calc(100% + 3px);
		left: 0;
		right: 0;
		z-index: 9998;
		background-color: rgba(0, 0, 0, 0.72);
		visibility: hidden;
		opacity: 0;
		transform: scaleY(0);
		transform-origin: top;
		transition: transform .3s, opacity .3s, visibility .3s;
	}

	.nav-open .main-nav {
		visibility: visible;
		opacity: 1;
		transform: scaleY(1);
	}

	.main-nav__list {
		display: block;
	}

	.main-nav__list > li,
	.main-nav__list > li:first-child,
	.main-nav__list > li:last-child {
		margin: 0;
	}

	.main-nav__list a {
		display: block;
		padding: 25px 20px;
		font-size: 20px;
		line-height: 9px;
		text-align: center;
		text-transform: uppercase;
		color: #ccc;
	}

	.main-nav__list a:hover,
	.main-nav__list a:focus,
	.main-nav__list .current-menu-item > a,
	.main-nav__list .current_page_item > a {
		color: #fff;
	}
}

/* ==========================================================================
   3. Footer
   ========================================================================== */

.site-footer {
	position: relative;
	padding: 50px 0 20px;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

.site-footer__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 1140px;
	margin: 0 auto;
}

.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 -20px;
	padding: 0;
	list-style: none;
}

.footer-nav__list li {
	margin: 0 20px;
}

.footer-nav__list a {
	display: flex;
	font-family: var(--cb-heading-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ccc;
	transition: color .5s;
}

.social {
	display: flex;
	justify-content: center;
	gap: 17px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #ccc;
	transition: transform .3s;
}

a.social__icon:hover {
	transform: translateY(-8px);
}

.social__icon .icon {
	width: 18px;
	height: 18px;
	fill: #000;
}

.footer-logo {
	display: block;
	width: min(500px, 100%);
	margin: 0 auto;
}

.footer-logo img {
	display: block;
	width: 70%;
	margin: 0 auto;
}

.footer-copy {
	font-family: var(--cb-body-font);
	font-size: 12px;
	line-height: 24px;
	color: #fff;
	text-align: center;
}

@media (max-width: 1024px) {
	.site-footer {
		padding: 30px;
	}

	.footer-nav__list {
		margin: 0 -10px;
	}

	.footer-nav__list li {
		margin: 0 10px;
	}

	.footer-nav__list a {
		font-size: 11px;
	}

	.footer-logo img {
		width: 60%;
	}
}

@media (max-width: 767px) {
	.site-footer {
		padding: 30px 20px;
	}

	.footer-nav__list a {
		font-size: 13px;
		line-height: 2.6em;
	}

	.footer-logo img {
		width: 75%;
	}

	.footer-copy {
		margin-bottom: -17px;
	}
}

/* ==========================================================================
   4. Page banner + content panel
   ========================================================================== */

.page-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 0 10px;
}

.page-hero__title {
	margin: 0;
	font-family: var(--cb-heading-font);
	font-size: 45px;
	font-weight: 600;
	line-height: 63px;
	color: #fff;
	text-align: center;
	text-shadow: 4px 5px 34px rgba(0, 0, 0, 0.96);
}

.page-body {
	padding: 120px 10px;
	background-color: var(--cb-panel);
}

.page-body__inner {
	max-width: 1140px;
	margin: 0 auto;
}

.page-body__inner--wide {
	max-width: 1400px;
}

@media (max-width: 1024px) {
	.page-hero {
		min-height: 220px;
	}

	.page-body {
		padding: 80px 120px;
	}

	/* pages whose original layout used the wider tablet panel */
	.page-about .page-body,
	.page-news .page-body,
	.page-body--shop {
		padding: 50px 30px;
	}
}

@media (max-width: 767px) {
	.page-hero {
		min-height: 0;
		padding: 20px 20px 50px;
	}

	.page-body,
	.page-about .page-body,
	.page-news .page-body,
	.page-body--shop {
		padding: 50px 20px;
	}

	.page-media-kit .page-hero__title {
		font-size: 28px;
		line-height: 28px;
	}

	.page-general-privacy-cookies-policy .page-hero__title {
		font-size: 36px;
		line-height: 1.2;
	}
}

/* ==========================================================================
   5. Page content (blocks)
   ========================================================================== */

.entry-content {
	font-family: var(--cb-body-font);
	font-size: 16px;
	line-height: 24px;
	color: var(--cb-text);
}

/*
 * Vertical rhythm (matches Elementor):
 *  - 20px between blocks (headings, images, groups, columns...)
 *  - consecutive text (paragraphs / lists) flows like one text block:
 *    paragraphs keep a 14.4px bottom margin, lists have none.
 * Containers are vertical flex boxes so margins add up instead of collapsing,
 * exactly like Elementor's separate widgets.
 */
.entry-content,
.entry-content :is(.wp-block-group__inner-container, .wp-block-column, .wp-block-group) {
	display: flex;
	flex-direction: column;
}

.entry-content > *,
.entry-content :is(.wp-block-group__inner-container, .wp-block-column, .wp-block-group, .wp-block-quote) > * {
	margin-top: 0;
	margin-bottom: 0;
}

.entry-content > * + *,
.entry-content :is(.wp-block-group__inner-container, .wp-block-column, .wp-block-group) > * + * {
	margin-top: 20px;
}

.entry-content > :is(p, ul, ol) + :is(p, ul, ol),
.entry-content :is(.wp-block-group__inner-container, .wp-block-column, .wp-block-group) > :is(p, ul, ol) + :is(p, ul, ol) {
	margin-top: 0;
}

.entry-content > p,
.entry-content :is(.wp-block-group__inner-container, .wp-block-column, .wp-block-group) > p {
	margin-bottom: 14.4px;
}

/* Text placed straight on the page sits in a centred 700px column */
/*
 * .cb-text = a run of plain text pasted as one block (legal pages). It flows like
 * normal text: paragraph margins collapse, lists have no margins.
 */
.entry-content .cb-text {
	display: block;
}

.entry-content .cb-text p {
	margin: 0 0 14.4px;
}

.entry-content .cb-text :is(ul, ol) {
	margin-top: 0;
	margin-bottom: 0;
}

.page-body__inner.entry-content > :is(p, ul, ol, h2, h3, h4, blockquote, table, .cb-text) {
	align-self: center;
	width: 100%;
	max-width: 700px;
}

.page-body__inner.entry-content > h2 {
	text-align: center;
}

.entry-content h2,
.entry-content h3 {
	font-family: var(--cb-heading-font);
	font-size: 30px;
	font-weight: 700;
	line-height: 63px;
	color: #000;
}

.entry-content h4 {
	font-family: var(--cb-heading-font);
	font-size: 22px;
	font-weight: 600;
	line-height: 22px;
	color: #000;
}

.entry-content a {
	color: var(--cb-link);
}

.entry-content figure {
	margin-left: 0;
	margin-right: 0;
}

.entry-content .wp-block-image img {
	display: inline-block;
	vertical-align: middle;
}

.entry-content .has-text-align-center,
.entry-content .aligncenter {
	text-align: center;
}

.entry-content .wp-block-image.aligncenter,
.entry-content .wp-block-image .aligncenter {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

.entry-content .wp-block-columns {
	display: flex;
	gap: 20px;
}

.entry-content .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 1024px) {
	.page-about .entry-content h2 {
		line-height: 1.3em;
	}
}

@media (max-width: 767px) {
	.entry-content h2,
	.entry-content h3 {
		line-height: 1.3em;
	}

	.entry-content .wp-block-columns {
		flex-direction: column;
	}
}

/* ==========================================================================
   6. Page-specific layouts
   ========================================================================== */

/* --- About ------------------------------------------------------------- */

.cb-about.wp-block-columns {
	max-width: 900px;
	margin: 0 auto;
	align-items: flex-start;
}

.cb-about > .wp-block-column {
	padding: 10px;
}

.cb-about > .wp-block-column:first-child {
	flex: 0 0 calc(40% - 8px);
	text-align: center;
}

.cb-about > .wp-block-column:last-child {
	flex: 0 0 calc(60% - 12px);
}

.cb-about .wp-block-image img {
	width: 332px;
}

@media (max-width: 767px) {
	.page-about .page-body {
		padding: 40px 20px;
	}

	.cb-about > .wp-block-column,
	.cb-about > .wp-block-column:first-child,
	.cb-about > .wp-block-column:last-child {
		flex: 1 1 auto;
		padding: 0;
		text-align: center;
	}

	.cb-about .wp-block-image img {
		width: 100%;
	}
}

/* --- Books ------------------------------------------------------------- */

.cb-book {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.cb-book .wp-block-image .aligncenter {
	width: 49.6%; /* 347px at full width, as on the original */
}

.cb-book .wp-block-image img {
	width: 100%;
}

.cb-book__blurb {
	text-align: left;
}

.cb-book h2.cb-book__title {
	font-size: 45px;
	font-weight: 700;
	line-height: 63px;
}

.cb-book .cb-book__by {
	font-family: var(--cb-heading-font);
	font-size: 22px;
}

.cb-book__buy.wp-block-columns {
	max-width: 716px;
	margin-left: -8px;
	margin-right: -8px;
	padding: 20px;
	gap: 20px;
}

.cb-book__buy h2 {
	font-size: 18px;
	font-weight: 700;
	font-style: italic;
	line-height: 63px;
	text-align: center;
}

.cb-book__buy h2 a {
	color: #000;
}

@media (max-width: 1024px) {
	.cb-book h2.cb-book__title {
		line-height: 63px;
	}

	.cb-book__buy h2 {
		line-height: 63px;
	}
}

@media (max-width: 767px) {
	.page-books .page-body {
		padding: 50px 20px;
	}

	.cb-book h2.cb-book__title {
		max-width: 187px;
		margin-left: auto;
		margin-right: auto;
		line-height: 1.3em;
	}

	.cb-book__buy.wp-block-columns {
		margin-left: 0;
		margin-right: 0;
		gap: 20px;
	}

	.cb-book__buy h2 {
		line-height: 1.3em;
	}

	.entry-content .cb-book__buy .wp-block-column > h2 {
		margin: -5px 0;
	}
}

/* --- News -------------------------------------------------------------- */

.cb-news.wp-block-columns {
	align-items: center;
	gap: 70px;
}

.cb-news + .cb-news {
	margin-top: 160px;
}

/* Elementor split these rows 30% / 70% of the width left after the gap */
.cb-news > .wp-block-column:first-child {
	flex: 0 0 calc((100% - 70px) * 0.3);
	text-align: center;
}

.cb-news .wp-block-image img {
	width: 289px;
}

.cb-news h2 {
	line-height: 63px;
}

.cb-news p {
	font-size: 18px;
	line-height: 32px;
}

.cb-news > .wp-block-column:last-child > * + * {
	margin-top: 0;
}

@media (max-width: 1024px) {
	.cb-news.wp-block-columns {
		gap: 30px;
	}

	.cb-news + .cb-news {
		margin-top: 80px;
	}

	.cb-news > .wp-block-column:first-child {
		flex-basis: calc((100% - 30px) * 0.3);
	}

	.cb-news .wp-block-image .aligncenter,
	.cb-news .wp-block-image img {
		width: 100%;
	}

	.cb-news h2 {
		line-height: 1.3em;
	}

	.cb-news:first-child p {
		font-size: 16px;
		line-height: 30px;
	}
}

@media (max-width: 767px) {
	.page-news .page-body {
		padding: 40px 20px;
	}

	.cb-news.wp-block-columns {
		gap: 20px;
		text-align: center;
	}

	.cb-news > .wp-block-column:first-child {
		flex-basis: auto;
	}

	.cb-news .wp-block-image .aligncenter {
		width: auto;
	}

	.cb-news + .cb-news.wp-block-columns {
		gap: 30px;
	}

	.cb-news:first-child .wp-block-image img {
		width: 245px;
	}

	.cb-news .wp-block-image img {
		width: 280px;
	}
}

/* --- Links (Narrow panel template) ------------------------------------- */

.page-body--narrow {
	max-width: 67%;
	min-height: 534px;
	margin: 0 auto;
	padding: 120px 10px;
}

.page-body-after {
	height: 60px;
}

.cb-stores {
	position: relative;
	min-height: 20px;
}

.cb-stores .wp-block-image {
	position: absolute;
	margin: 0 !important;
}

.cb-stores .wp-block-image img {
	display: block;
	width: 100%;
}

/* positions relative to the area under the heading, measured from the original */
.cb-stores .cb-store--cover { left: 11.64%; top: -19px; width: 17.04%; }
.cb-stores .cb-store--us    { left: 43.92%; top: 34px;  width: 15.56%; }
.cb-stores .cb-store--au    { left: 70.9%;  top: 34px;  width: 13.54%; }

@media (max-width: 1024px) {
	.page-body--narrow {
		max-width: min(100%, 706px);
		min-height: 512px;
		padding: 80px 120px;
	}

	.page-body--narrow .entry-content h2 {
		line-height: 63px;
	}

	.cb-stores .cb-store--cover { left: -57px; top: -26px; width: 119px; }
	.cb-stores .cb-store--us    { left: 97px;  top: -18px; width: 124px; }
	.cb-stores .cb-store--au    { left: 269px; top: -16px; width: 107px; }
}

@media (max-width: 767px) {
	.page-body--narrow {
		max-width: min(100%, 415px);
		min-height: 691px;
		padding: 50px 20px;
	}

	.page-body--narrow .entry-content h2 {
		line-height: 39px;
	}

	.cb-stores .cb-store--cover { left: 116px; top: -8px;  width: 108px; }
	.cb-stores .cb-store--us    { left: 18px;  top: 181px; width: 156px; }
	.cb-stores .cb-store--au    { left: 198px; top: 175px; width: 119px; }
}

/* ==========================================================================
   7. Utilities
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

.skip-link:focus {
	position: fixed !important;
	top: 10px;
	left: 10px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 24px;
	clip: auto;
	background: #fff;
	color: #000;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0s !important;
		animation-duration: 0s !important;
	}
}