/* Fibi · UX layer
   Brand name colour, mobile header, courses, club, accessibility, WhatsApp. */

:root {
	--fibi-name: #A8685A;          /* warm rose-brown for "Noy Fibi" */
	--fibi-cream: #FFF1F1;         /* warm light section background */
	--fibi-gold: #C9A56B;
	--fibi-gold-soft: #E8CFA0;
	--fibi-focus: #7E5245;
}

/* ---------- Type: Heebo body, Rubik headings ---------- */
body { font-family: var(--wp--preset--font-family--heebo); }
h1, h2, h3, h4, .fibi-eyebrow, .fibi-wordmark__name { font-family: var(--wp--preset--font-family--rubik); }
body h1, body h2, body h3 { font-weight: 500; letter-spacing: -.005em; }
body h1 strong, body h2 strong, body h3 strong, body h1 b, body h2 b { font-weight: 600; }

/* ---------- Brand name ---------- */
.fibi-wordmark__name { color: var(--fibi-name); font-weight: 500; letter-spacing: .02em; }
.fibi-wordmark--light .fibi-wordmark__name { color: var(--fibi-title-rose); }
.fibi-name { color: var(--fibi-name); }

/* ---------- Focus + skip link ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--fibi-focus);
	outline-offset: 3px;
	border-radius: 2px;
}
.fibi-footer :where(a, button):focus-visible, .fibi-spot--dark :where(a, button):focus-visible { outline-color: var(--fibi-gold-soft); }
.fibi-skip {
	position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 100000;
	padding: .75rem 1.25rem; background: var(--fibi-espresso); color: var(--fibi-white) !important;
	transform: translateY(-200%); transition: transform .2s; text-decoration: none; font-weight: 500;
}
.fibi-skip:focus { transform: none; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#fibi-main:focus { outline: none; }

/* ---------- Mobile header: menu in the right corner, logo centred, tools on the left ---------- */
@media (max-width: 599px) {
	:root { --fibi-header-h: 64px; }
	.fibi-header__row { gap: .25rem; flex-wrap: nowrap !important; align-items: center; padding-inline: 0; }
	.fibi-header__row > .wp-block-navigation { order: -1; flex: 0 0 auto; margin: 0; }
	.fibi-header__row > .fibi-wordmark,
	.fibi-header__row > .wp-block-site-logo { order: 0; flex: 1 1 auto; align-items: center; text-align: center; margin-inline: auto; }
	.fibi-header__row > .fibi-header__tools { order: 1; flex: 0 0 auto; gap: 0; }
	.fibi-wordmark__name { font-size: 1.55rem; }
	.fibi-wordmark__sub { font-size: .5rem; letter-spacing: .38em; }
	.fibi-nav .wp-block-navigation__responsive-container-open { padding: .6rem; margin: 0; color: var(--fibi-ink); }
	.fibi-header__tools .wp-block-search__button,
	.fibi-header__tools .wc-block-mini-cart__button,
	.fibi-header__tools .wc-block-customer-account a { padding: .5rem; }
	.fibi-scrolled .fibi-wordmark { transform: none; }
	/* the open menu: right-aligned, large tap targets */
	.wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem; background: var(--fibi-blush); }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; padding-block: .75rem; }
}

/* ---------- Buttons used by the new components ---------- */
.fibi-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
	padding: .8rem 1.6rem; border-radius: 2px; border: 1px solid var(--fibi-espresso);
	font-weight: 500; font-size: .95rem; text-decoration: none; transition: background-color .25s, color .25s, border-color .25s;
}
.fibi-btn--solid { background: var(--fibi-espresso); color: var(--fibi-white) !important; }
.fibi-btn--solid:hover { background: var(--fibi-title-deep); border-color: var(--fibi-title-deep); }
.fibi-btn--ghost { background: transparent; color: var(--fibi-espresso) !important; }
.fibi-btn--ghost:hover { background: var(--fibi-espresso); color: var(--fibi-white) !important; }

/* ---------- Warm "built by a professional" section ---------- */
.fibi-academy.fibi-academy--warm .fibi-courselist { border-top-color: rgba(126, 82, 69, .25); }
.fibi-academy--warm .fibi-courselist li { border-bottom-color: rgba(126, 82, 69, .25); }
.fibi-academy--warm .fibi-courselist a { color: var(--fibi-ink); }
.fibi-academy--warm .fibi-courselist a:hover { color: var(--fibi-title-deep); }
.fibi-academy--warm .fibi-courselist__name { font-weight: 400; }
.fibi-academy--warm .fibi-courselist__tag { color: var(--fibi-title-deep); }
.fibi-academy--warm .fibi-film__label { color: var(--fibi-white) !important; }

/* ---------- Learning path ---------- */
.fibi-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.fibi-path__step {
	position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem;
	background: var(--fibi-white); border-radius: var(--fibi-radius); border: 1px solid var(--fibi-line);
}
.fibi-path__step:not(:last-child)::after {
	content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: -1rem; width: 1rem; height: 1px; background: var(--fibi-rose);
}
.fibi-path__num { font-family: var(--wp--preset--font-family--rubik); font-size: 2.5rem; font-weight: 300; line-height: 1; color: var(--fibi-rose); }
.fibi-path__title { font-family: var(--wp--preset--font-family--rubik); font-size: 1.2rem; font-weight: 500; color: var(--fibi-ink); }
.fibi-path__text { color: var(--fibi-muted); font-size: .95rem; line-height: 1.6; }
.fibi-path__link { margin-top: auto; padding-top: .75rem; font-weight: 500; color: var(--fibi-title-deep); }
@media (max-width: 781px) {
	.fibi-path { grid-template-columns: 1fr; }
	.fibi-path__step:not(:last-child)::after { inset: auto auto -1rem 50%; width: 1px; height: 1rem; }
}

/* ---------- Course cards ---------- */
.fibi-courses__filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.5rem; }
.fibi-courses__filter button {
	min-height: 44px; padding: .5rem 1.25rem; border: 1px solid var(--fibi-line); background: var(--fibi-white);
	border-radius: 999px; font: inherit; font-weight: 500; color: var(--fibi-ink); cursor: pointer;
}
.fibi-courses__filter button.is-active { background: var(--fibi-espresso); border-color: var(--fibi-espresso); color: var(--fibi-white); }
.fibi-courses__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.fibi-course {
	display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.25rem, 2.5vw, 2rem);
	background: var(--fibi-white); border: 1px solid var(--fibi-line); border-radius: var(--fibi-radius);
	scroll-margin-top: calc(var(--fibi-header-h) + 1.5rem);
}
.fibi-course[hidden] { display: none; }
.fibi-course__meta { display: flex; align-items: center; gap: .75rem; }
.fibi-chip--plain { margin: 0 !important; }
.fibi-course__level { font-size: .85rem; color: var(--fibi-muted); }
.fibi-course__title { margin: .5rem 0 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.25; }
.fibi-course__sub { margin: .25rem 0 0; color: var(--fibi-title-deep); font-weight: 500; }
.fibi-course__intro { margin: 0; color: var(--fibi-ink); line-height: 1.75; }
.fibi-course__note { margin: 0; padding: .75rem 1rem; background: var(--fibi-cream); border-inline-start: 3px solid var(--fibi-rose); font-size: .95rem; }
.fibi-course__facts { list-style: none; margin: 0; padding: 1rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-block: 1px solid var(--fibi-line); }
.fibi-course__facts li { display: flex; flex-direction: column; gap: .15rem; }
.fibi-course__facts span { font-size: .78rem; letter-spacing: .06em; color: var(--fibi-muted); }
.fibi-course__facts strong { font-weight: 500; font-size: .95rem; line-height: 1.4; }
.fibi-course__more { border: 1px solid var(--fibi-line); border-radius: var(--fibi-radius); background: var(--fibi-blush); }
.fibi-course__more summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px;
	padding: .75rem 1.1rem; cursor: pointer; font-weight: 600; list-style: none;
}
.fibi-course__more summary::-webkit-details-marker { display: none; }
.fibi-course__plus { position: relative; width: 14px; height: 14px; flex: none; }
.fibi-course__plus::before, .fibi-course__plus::after { content: ""; position: absolute; background: var(--fibi-title-deep); inset: 6px 0 auto 0; height: 2px; transition: transform .25s; }
.fibi-course__plus::after { transform: rotate(90deg); }
.fibi-course__more[open] .fibi-course__plus::after { transform: rotate(0); }
.fibi-course__body { display: grid; gap: 1.5rem; padding: .5rem 1.1rem 1.25rem; }
.fibi-course__body h4 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; color: var(--fibi-title-deep); }
.fibi-course__body p { margin: 0 0 .5rem; line-height: 1.7; }
.fibi-check { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.fibi-check li { position: relative; padding-inline-start: 1.6rem; line-height: 1.6; }
.fibi-check li::before {
	content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .45em; width: .85rem; height: .45rem;
	border-inline-start: 2px solid var(--fibi-rose); border-block-end: 2px solid var(--fibi-rose); transform: rotate(-45deg) scaleX(-1);
}
.fibi-course__closing { padding-top: 1rem; border-top: 1px dashed var(--fibi-line); }
.fibi-course__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: auto; }
@media (max-width: 900px) { .fibi-courses__list { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .fibi-course__facts { grid-template-columns: 1fr; } .fibi-course__cta .fibi-btn { flex: 1 1 100%; } }

/* ---------- Club: luxury ---------- */
.fibi-club--lux {
	background: linear-gradient(180deg, #FFF1F1 0%, #FFF1F1 100%) !important;
	color: var(--fibi-ink) !important;
}
.fibi-club--lux h2, .fibi-club--lux h3 { color: var(--fibi-title-deep) !important; }
.fibi-club--lux .fibi-eyebrow { color: var(--fibi-title-deep) !important; }
.fibi-club--lux p { color: var(--fibi-ink); }
.fibi-club--lux .wp-block-button__link { background: var(--fibi-espresso) !important; color: var(--fibi-white) !important; border-color: var(--fibi-espresso) !important; }
.fibi-club--lux .wp-block-button__link:hover { background: var(--fibi-title-deep) !important; border-color: var(--fibi-title-deep) !important; }
.fibi-club--lux a:not(.wp-block-button__link) { color: var(--fibi-title-deep); }

.fibi-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.fibi-card {
	position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.5rem 1.35rem;
	min-height: 320px; border-radius: 14px; overflow: hidden; isolation: isolate;
	box-shadow: 0 28px 50px -34px rgba(60, 35, 25, .55); border: 1px solid rgba(126, 82, 69, .18);
}
.fibi-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .12) 70%, rgba(255, 255, 255, 0) 100%); }
.fibi-card--silver { background: linear-gradient(145deg, #F3EDE8, #CFC3BC); color: #2B1D1A; }
.fibi-card--gold { background: linear-gradient(145deg, #F0D9AE, #B8904F); color: #2B1D1A; }
.fibi-card--vip { background: linear-gradient(145deg, #2E221E, #0E0A09); color: var(--fibi-gold-soft); border: 1px solid rgba(201, 165, 107, .5); }
.fibi-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.fibi-card__name { font-family: var(--wp--preset--font-family--rubik); font-weight: 600; font-size: 1.35rem; letter-spacing: .3em; }
.fibi-card__brand { font-size: .62rem; letter-spacing: .3em; opacity: .7; }
.fibi-card p { margin: 0; color: inherit !important; }
.fibi-card__need { font-weight: 500; }
.fibi-card__bonus { font-size: .9rem; opacity: .85; }
.fibi-card__ladder { width: 100%; margin-top: .75rem; border-collapse: collapse; font-size: .9rem; }
.fibi-card__ladder th, .fibi-card__ladder td { padding: .5rem 0; border-top: 1px solid currentColor; border-color: rgba(43, 29, 26, .22); font-weight: 400; text-align: start; }
.fibi-card--vip .fibi-card__ladder th, .fibi-card--vip .fibi-card__ladder td { border-color: rgba(232, 207, 160, .25); }
.fibi-card__ladder td { text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.fibi-card__value { display: flex; flex-direction: column; margin-top: auto; }
.fibi-card__value strong { font-family: var(--wp--preset--font-family--rubik); font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: 400; line-height: 1; }
.fibi-card__earn { margin-top: auto !important; padding-top: .75rem; font-size: .8rem; letter-spacing: .02em; opacity: .85; }
@media (max-width: 900px) { .fibi-cards { grid-template-columns: 1fr; } .fibi-card { min-height: 0; } }

.fibi-clubsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.fibi-clubsteps li { padding-top: 1.25rem; border-top: 1px solid var(--fibi-rose); }
.fibi-clubsteps__num { font-family: var(--wp--preset--font-family--rubik); font-size: 1rem; letter-spacing: .3em; color: var(--fibi-title-deep); }
.fibi-clubsteps h3 { margin: .5rem 0; font-size: 1.35rem; }
.fibi-clubsteps p { margin: 0; color: var(--fibi-muted); line-height: 1.7; }
.fibi-club--lux .fibi-clubsteps li { border-color: var(--fibi-rose); }
.fibi-club--lux .fibi-clubsteps__num { color: var(--fibi-title-deep); }
.fibi-club--lux .fibi-clubsteps p { color: var(--fibi-muted); }
.fibi-clubnote { margin: 1.5rem auto 0; max-width: 60rem; font-size: .9rem; line-height: 1.7; color: var(--fibi-muted); text-align: center; }
.fibi-club--lux .fibi-clubnote { color: var(--fibi-muted); }
@media (max-width: 781px) { .fibi-clubsteps { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ---------- Floating WhatsApp + accessibility ---------- */
.fibi-float { position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 9990; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; pointer-events: none; }
.fibi-float > * { pointer-events: auto; }
.fibi-wa {
	display: inline-flex; align-items: center; gap: .6rem; min-height: 56px; min-width: 56px; padding: 0 1rem;
	border-radius: 999px; background: #1F8A4C; color: #fff !important; text-decoration: none; font-weight: 500;
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); transition: transform .2s, background-color .2s;
}
.fibi-wa:hover { background: #17713D; transform: translateY(-2px); }
.fibi-wa svg { flex: none; }
.fibi-wa__label { font-size: .95rem; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s; }
.fibi-wa:hover .fibi-wa__label, .fibi-wa:focus-visible .fibi-wa__label { max-width: 14rem; }
.fibi-a11y-toggle {
	display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0;
	border-radius: 50%; border: 2px solid #fff; background: #2B3A67; color: #fff; cursor: pointer;
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
}
.fibi-a11y-toggle:hover { background: #1E2A4D; }
.fibi-a11y {
	position: fixed; inset-block-end: 5.5rem; inset-inline-end: 1rem; width: min(22rem, calc(100vw - 2rem));
	max-height: calc(100vh - 8rem); overflow: auto; padding: 1rem; background: #fff; color: #1C1412;
	border: 1px solid var(--fibi-line); border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45);
}
.fibi-a11y[hidden] { display: none; }
.fibi-a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.fibi-a11y__head h2 { margin: 0; font-size: 1.15rem; }
.fibi-a11y__close { width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.75rem; line-height: 1; cursor: pointer; color: inherit; }
.fibi-a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.fibi-a11y button[data-a11y] {
	min-height: 52px; padding: .5rem .75rem; border: 1px solid var(--fibi-line); border-radius: 8px;
	background: var(--fibi-blush); color: #1C1412; font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; text-align: center;
}
.fibi-a11y button[aria-pressed="true"] { background: #1C1412; color: #fff; border-color: #1C1412; }
.fibi-a11y__reset { width: 100%; margin-top: .5rem; }
.fibi-a11y__statement { display: block; margin-top: .75rem; text-align: center; font-size: .9rem; color: #1C1412; }
@media (max-width: 860px) { body.single-product .fibi-float { inset-block-end: 5.5rem; } body.single-product .fibi-a11y { inset-block-end: 10rem; } }

/* ---------- Accessibility modes (set on <html>) ---------- */
html.fibi-a11y-readable, html.fibi-a11y-readable * { font-family: Arial, "Segoe UI", Heebo, sans-serif !important; letter-spacing: 0 !important; }
html.fibi-a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 2px solid transparent; background: rgba(255, 235, 59, .35); color: #000 !important; }
html.fibi-a11y-gray body { filter: grayscale(1); }
html.fibi-a11y-contrast body { background: #000 !important; color: #fff !important; }
html.fibi-a11y-contrast body *:not(img):not(svg):not(video):not(.fibi-a11y *):not(.fibi-a11y-toggle):not(.fibi-wa):not(.fibi-wa *) {
	background-color: #000 !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; box-shadow: none !important; background-image: none !important;
}
html.fibi-a11y-contrast a { color: #ffeb3b !important; }
html.fibi-a11y-contrast .fibi-a11y, html.fibi-a11y-contrast .fibi-a11y * { background: #fff !important; color: #000 !important; }
html.fibi-a11y-contrast .fibi-a11y button[aria-pressed="true"] { background: #000 !important; color: #fff !important; }
html.fibi-a11y-motion *, html.fibi-a11y-motion *::before, html.fibi-a11y-motion *::after {
	animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html.fibi-a11y-motion video { display: none; }
html.fibi-a11y-motion .fibi-reveal { opacity: 1 !important; transform: none !important; }
html.fibi-a11y-cursor, html.fibi-a11y-cursor * {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'><path fill='black' stroke='white' stroke-width='1.2' d='M4 2l15 9-6.5 1.6L9 19z'/></svg>") 4 2, auto !important;
}

@media (prefers-reduced-motion: reduce) { .fibi-wa, .fibi-course__plus::before, .fibi-course__plus::after { transition: none; } }

/* ---------- Long legal text ---------- */
.fibi-legal { max-width: 52rem; }
.fibi-legal h2 { font-size: 1.35rem; margin: 2.25rem 0 .75rem; }
.fibi-legal p { line-height: 1.8; margin: 0 0 .6rem; }

/* An open mobile menu must cover the screen: backdrop-filter would trap its fixed overlay inside the header. */
.fibi-header:has(.is-menu-open), .has-modal-open .fibi-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
.wp-block-navigation__responsive-container.is-menu-open { z-index: 100001; }
.has-modal-open .fibi-float { display: none; }

/* ---------- Logo: flower on the left, "noy fibi" over "nails academy" (as on the Wix site) ---------- */
.fibi-logo { display: inline-flex; flex-direction: row; direction: ltr; align-items: center; gap: .55rem; }
.fibi-logo__flower { display: block; height: 46px; width: auto; }
.fibi-logo__text { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.fibi-logo__name { display: block; height: 30px; width: auto; }
.fibi-logo__sub { display: block; height: 15px; width: auto; }
.fibi-scrolled .fibi-logo { transform: scale(.88); }
@media (max-width: 599px) {
	.fibi-logo__flower { height: 38px; }
	.fibi-logo__name { height: 25px; }
	.fibi-logo__sub { height: 12px; }
}

/* Club page hero: warm light instead of dark */
.fibi-hero--warm.wp-block-cover { min-height: min(62vh, 640px) !important; }
.fibi-hero--warm .wp-block-cover__background { background: linear-gradient(180deg, #FFF1F1 0%, #FFF1F1 100%) !important; opacity: 1 !important; }
.fibi-hero--warm .fibi-hero__title, .fibi-hero--warm h1 { color: var(--fibi-title-deep) !important; }
.fibi-hero--warm .fibi-rose { color: var(--fibi-name) !important; }
.fibi-hero--warm .fibi-eyebrow { color: var(--fibi-title-deep) !important; }
.fibi-hero--warm .fibi-hero__lead { color: var(--fibi-ink) !important; }
.fibi-hero--warm .wp-block-button__link { background: var(--fibi-espresso) !important; color: var(--fibi-white) !important; }

/* WhatsApp pill: no empty gap before the label is revealed */
.fibi-wa { gap: 0; padding-inline: 13px; }
.fibi-wa:hover .fibi-wa__label, .fibi-wa:focus-visible .fibi-wa__label { padding-inline-start: .6rem; }
.fibi-wa { min-width: 56px; justify-content: center; }
.fibi-wa__label { display: none; max-width: none; }
.fibi-wa:hover .fibi-wa__label, .fibi-wa:focus-visible .fibi-wa__label { display: inline; }

/* ---------- Navigation progress ---------- */
html.fibi-loading, html.fibi-loading a { cursor: progress; }
html.fibi-loading::before {
	content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100002;
	background: linear-gradient(90deg, transparent, var(--fibi-rose), var(--fibi-title-deep), transparent);
	background-size: 40% 100%; background-repeat: no-repeat; animation: fibi-progress 1.1s linear infinite;
}
html.fibi-loading body { opacity: .86; transition: opacity .25s .15s; }
@keyframes fibi-progress { from { background-position: 140% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { html.fibi-loading::before { animation: none; background-size: 100% 100%; } }