/* Beaded by Chloe — theme styles. Tokens live in theme.json; this file handles layout and component detail. */

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--petal); color: var(--wp--preset--color--ink); }
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--berry);
	outline-offset: 3px;
}
img { max-width: 100%; height: auto; }

/* Sections inside main manage their own rhythm */
.bbc-main.is-layout-constrained > * { margin-block-start: 0; }
.bbc-section { padding-block: var(--wp--preset--spacing--50); }
.bbc-section__head { margin-block-end: var(--wp--preset--spacing--40); gap: var(--wp--preset--spacing--20); }
.bbc-section__head :where(h2, p) { margin: 0; }
.bbc-section__head .wp-block-group > * + * { margin-block-start: 0.5rem; }

.bbc-more a { font-weight: 700; color: var(--wp--preset--color--berry); text-decoration: none; }
.bbc-more a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Block styles ---------- */
.is-style-bbc-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-block-end: 0;
}
.is-style-bbc-eyebrow:not(.has-text-color) { color: var(--wp--preset--color--berry); }
.wp-block-group.is-style-bbc-panel { border-radius: var(--wp--custom--radius--lg); }
.wp-block-group.is-style-bbc-card { border-radius: var(--wp--custom--radius--md); }
.wp-block-image.is-style-bbc-rounded img,
.wp-block-post-featured-image.is-style-bbc-rounded img { border-radius: var(--wp--custom--radius--md); }

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-bbc-light > .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--berry);
}
.wp-block-button.is-style-bbc-light > .wp-block-button__link:hover {
	background: var(--wp--preset--color--petal);
	color: var(--wp--preset--color--berry-dark);
}

/* ---------- Announcement + header ---------- */
.bbc-announcement { padding: 0.6rem var(--wp--custom--gutter); text-align: center; }
.bbc-announcement p { margin: 0; }

body .wp-block-group.bbc-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 5.5rem;
	padding-inline: var(--wp--custom--gutter);
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin: 0;
}
.bbc-header__nav { justify-self: start; }
.bbc-header__nav .wp-block-navigation__container { gap: 2rem; }
.bbc-header__nav a:hover { color: var(--wp--preset--color--berry); }
.bbc-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--cream);
	padding: 1.25rem var(--wp--custom--gutter) 2rem;
}
.bbc-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
	gap: 1.25rem;
}
.bbc-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
}
.bbc-header__logo { justify-self: center; margin: 0; line-height: 0; }
.bbc-header__logo img { width: 104px; height: auto; transition: transform 0.3s ease; }
.bbc-header__logo a:hover img { transform: rotate(-6deg); }
body .wp-block-group.bbc-header { padding-block: 0.5rem; }
.bbc-header__actions { justify-self: end; gap: 0.25rem; }
.bbc-header__search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--ink);
	padding: 0.6rem;
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--wp--custom--radius--pill);
}
.bbc-header__search .wp-block-search__button:hover { background: var(--wp--preset--color--blush); }

/* ---------- Hero ---------- */
.bbc-hero { padding-block: var(--wp--preset--spacing--50); }
.bbc-hero__cols { gap: var(--wp--preset--spacing--50); }
.bbc-hero__copy > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.bbc-hero__copy h1 { margin-block-start: var(--wp--preset--spacing--20); }
.bbc-lede { max-width: 32em; }
.bbc-hero__copy .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--40); }
.bbc-hero__panel { min-height: clamp(20rem, 38vw, 31rem); padding: var(--wp--preset--spacing--40); align-items: center; }
.bbc-hero__image { margin: 0; width: min(100%, 24rem); }

/* ---------- Trust strip ---------- */
.bbc-trust {
	padding-block: 1.75rem;
	border-block: 1px solid var(--wp--preset--color--line);
	gap: var(--wp--preset--spacing--30);
}
.bbc-trust__item { gap: 0.9rem; align-items: center; }
.bbc-trust__icon { margin: 0; flex: 0 0 28px; }
.bbc-trust__icon img { width: 28px; height: 28px; }
.bbc-trust__text p { margin: 0; }
.bbc-trust__title { font-weight: 700; }

/* ---------- Shop by style ---------- */
.bbc-styles__grid { gap: var(--wp--preset--spacing--30); }
.bbc-cat {
	position: relative;
	min-height: 16rem;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	gap: 1.25rem;
	align-items: center;
}
.bbc-cat__image { margin: 0; width: 8.5rem; }
.bbc-cat__image a { display: block; }
.bbc-cat__image img { display: block; width: 100%; transition: transform 0.5s ease; }
.bbc-cat:hover .bbc-cat__image img { transform: rotate(24deg); }
.bbc-cat__title { margin: 0; font-size: var(--wp--preset--font-size--large); }
.bbc-cat__title a { text-decoration: none; }
.bbc-cat__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bbc-cat:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--berry); outline-offset: 3px; }
.bbc-cat a:focus-visible { outline: none; }

/* ---------- Banner ---------- */
.bbc-banner {
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50) clamp(1.5rem, 5vw, 4.5rem);
}
.bbc-banner h2 { margin-block: 0.75rem; }
.bbc-banner .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--30); }
.bbc-banner__art .wp-block-image { margin: 0 auto; max-width: 28rem; }

/* ---------- TikTok ---------- */
.bbc-tiktok__cols { gap: var(--wp--preset--spacing--50); }
.bbc-tiktok__copy h2 { margin-block: 0.75rem; }
.bbc-tiktok__grid { gap: var(--wp--preset--spacing--20); align-items: start; }
.bbc-tiktok__grid .wp-block-embed { margin: 0; }
.bbc-tiktok__grid .wp-block-embed blockquote.tiktok-embed { margin: 0 !important; min-width: 0 !important; }
.bbc-tiktok__follow .wp-block-button__link { background: var(--wp--preset--color--ink); }
.bbc-tiktok__follow .wp-block-button__link:hover { background: var(--wp--preset--color--berry); }
@media (min-width: 782px) {
	.bbc-tiktok__cols > .bbc-tiktok__copy { flex: 0 0 34%; }
}

/* ---------- Story ---------- */
.bbc-story .wp-block-columns { gap: var(--wp--preset--spacing--50); }
.bbc-story__panel { min-height: clamp(18rem, 30vw, 26rem); align-items: center; }
.bbc-story__image { margin: 0; width: min(70%, 18rem); }
.bbc-story h2 { margin-block: 0.75rem 1.25rem; }

/* ---------- About page ---------- */
.bbc-about { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.bbc-about__cols { gap: var(--wp--preset--spacing--50); }
.bbc-about__panel { min-height: clamp(18rem, 34vw, 28rem); align-items: center; padding: var(--wp--preset--spacing--40); }
.bbc-about__logo { margin: 0; width: min(80%, 22rem); }
.bbc-about__copy h1 { margin-block: 0 1.25rem; font-size: var(--wp--preset--font-size--x-large); }
.bbc-about__copy p { max-width: 36em; }
.bbc-about__copy .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--30); }

/* ---------- Bead club ---------- */
.bbc-club {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) clamp(1.5rem, 5vw, 4.5rem);
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}
.bbc-club__copy h2 { margin: 0 0 0.5rem; font-size: var(--wp--preset--font-size--large); }
.bbc-club__copy p { margin: 0; }

/* ---------- Footer ---------- */
.bbc-footer { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
.bbc-footer__cols { gap: var(--wp--preset--spacing--40); }
.bbc-footer__logo { margin: 0 0 0.5rem; line-height: 0; }
.bbc-footer__logo img { width: 132px; height: auto; }
.bbc-footer__heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--wp--preset--color--white);
	margin: 0 0 1rem;
}
.bbc-footer__list { list-style: none; padding: 0; margin: 0; }
.bbc-footer__list li + li { margin-block-start: 0.6rem; }
.bbc-footer a { color: var(--wp--preset--color--blush); text-decoration: none; }
.bbc-footer a:hover { color: var(--wp--preset--color--white); text-decoration: underline; text-underline-offset: 0.2em; }
.bbc-footer__social .wp-social-link { color: var(--wp--preset--color--blush); }
.bbc-footer__base {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid #4A3740;
	font-size: var(--wp--preset--font-size--small);
	color: #D9C3CB;
}
.bbc-footer__base p { margin: 0; }

/* ---------- Pages and posts ---------- */
.bbc-page-title { margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); }
.bbc-main--page, .bbc-main--single, .bbc-main--index, .bbc-main--archive, .bbc-main--search, .bbc-main--404 {
	padding-block-end: var(--wp--preset--spacing--60);
}
.bbc-post-card > * + * { margin-block-start: 0.75rem; }

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	body .wp-block-group.bbc-header { grid-template-columns: auto 1fr auto; min-height: 4rem; padding-inline: 0.5rem; }
	.bbc-header__logo img { width: 68px; }
	.bbc-header__search { display: none; }
	.bbc-hero__copy .wp-block-buttons .wp-block-button { flex: 1 1 100%; }
	.bbc-hero__copy .wp-block-button__link { width: 100%; }
	.bbc-club > * { flex: 1 1 100%; }
	.bbc-styles__grid { gap: 0.75rem; }
	.bbc-cat { min-height: 12rem; padding: 1.5rem 1rem; }
	.bbc-cat__image { width: 6rem; }
	.bbc-cat__title { font-size: var(--wp--preset--font-size--medium); }
	.bbc-footer__cols { flex-wrap: wrap; }
	.bbc-footer__cols > .wp-block-column:nth-child(2),
	.bbc-footer__cols > .wp-block-column:nth-child(3) { flex-basis: calc(50% - 1.25rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- FAQ (details blocks) ---------- */
.wp-block-details.bbc-faq { border-bottom: 1px solid var(--wp--preset--color--line); padding-block: 0.25rem; margin-block: 0; }
.wp-block-details.bbc-faq summary { cursor: pointer; padding-block: 1rem; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--medium); list-style-position: outside; }
.wp-block-details.bbc-faq summary:hover { color: var(--wp--preset--color--berry); }
.wp-block-details.bbc-faq > p { margin-block: 0 1.25rem; color: var(--wp--preset--color--muted); }