/* Nailbox Co. — homepage sections, service pages and menu (loaded after theme.css). */

/* ---------- v1.1 homepage sections ---------- */
.nb-hero .nb-rating { margin-top: 28px; }
.nb-hero .nb-rating a { font-size: 15px; }
.nb-hero__title { max-width: 900px; }
.nb-welcome__title { font-size: var(--wp--preset--font-size--heading); }

.nb-card__price { font-family: var(--wp--preset--font-family--heading); font-style: normal; color: var(--wp--preset--color--gold); font-size: 18px; margin: 6px 0 0 !important; }
.nb-card__img img { object-position: 50% 55%; }
.nb-also { font-size: 18px; margin-top: 44px !important; }
.nb-also a { text-decoration-color: rgba(40,43,40,.35); }

.nb-split.nb-russian > .wp-block-column > .nb-menu-img:only-child img { aspect-ratio: 1542 / 1763; }  /* the photo's own proportions: nothing cropped, watermark intact */
.nb-russian .nb-section-title { text-align: left; }
.nb-pull { border-left: 2px solid var(--wp--preset--color--gold); padding: 4px 0 4px 20px; margin-top: 28px !important; }
.nb-pull > * { margin: 0 !important; }
.nb-pull__text { font-size: 20px; }
.nb-pull__name { font-family: var(--wp--preset--font-family--heading); font-style: normal; text-transform: uppercase; font-size: 13px; margin-top: 8px !important; }
.nb-pull__name a { text-decoration: none; color: var(--wp--preset--color--gold); }

.nb-why { gap: 32px; margin-top: 48px; }
.nb-why__title { font-family: var(--wp--preset--font-family--heading); font-size: 22px; margin: 0 0 10px !important; }
.nb-why__text { font-size: 17px; max-width: 260px; margin-inline: auto !important; }

.nb-reviews-cover { padding-block: var(--nb-section-y); }
.nb-reviews-cover .nb-section-title { color: #fff; }
.nb-reviews { gap: 40px; margin-top: 48px; }
.nb-review__name a { text-decoration: none; }
.nb-reviews-cover .wp-block-buttons { margin-top: 48px; }

.nb-visit__phone { font-family: var(--wp--preset--font-family--heading); font-style: normal; font-size: 22px; margin-top: 12px !important; }
.nb-visit__phone a { text-decoration: none; }
#visit .wp-block-buttons { margin-top: 32px; gap: 16px; }

.nb-faq { max-width: 820px; margin: 40px auto 0 !important; }
.nb-faq__item { border-bottom: 1px solid rgba(40,43,40,.18); padding: 22px 0; margin: 0 !important; }
.nb-faq__item summary { font-family: var(--wp--preset--font-family--heading); font-style: normal; text-transform: uppercase; font-size: 20px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; }
.nb-faq__item summary::-webkit-details-marker { display: none; }
.nb-faq__item summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--wp--preset--color--gold); transition: transform .2s ease; }
.nb-faq__item[open] summary::after { transform: rotate(45deg); }
.nb-faq__item p { margin: 12px 0 0; font-size: 17px; max-width: 720px; }

@media (max-width: 781px) {
	.nb-hero .wp-block-buttons { gap: 14px; margin-top: 28px; }
	.nb-why { gap: 28px; }
	.nb-faq__item summary { font-size: 17px; }
	.nb-russian .nb-section-title { text-align: center; }
}

/* ---------- v1.2 service pages ---------- */
.nb-menu--narrow { max-width: 760px; margin: 48px auto 0 !important; }
.nb-menu-section .nb-menu--narrow + .wp-block-buttons, .nb-menu--narrow + .wp-block-buttons { margin-top: 40px; }
.nb-service-intro .nb-section-title { text-align: left; }
.nb-service-intro .nb-lead { margin-inline: 0; }
.nb-service-intro .nb-menu-img img { aspect-ratio: 4 / 5; object-fit: cover; }
.nb-split.nb-service-intro > .wp-block-column > .nb-menu-img:only-child img { aspect-ratio: 4 / 5; }
.nb-hero--service .nb-hero__title { max-width: 820px; }
.nb-footer__services { font-size: 16px; margin-top: 12px !important; }
.nb-footer__services a { text-decoration: none; }
.nb-footer__services a:hover { text-decoration: underline; }
@media (max-width: 781px) { .nb-service-intro .nb-section-title { text-align: center; } }

/* ---------- v1.2.1 Services dropdown + section links ---------- */
.nb-nav .wp-block-navigation__submenu-container { background: var(--wp--preset--color--charcoal) !important; color: #fff !important; border: 0 !important; padding: 10px 0; min-width: 240px !important; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.nb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 22px !important; font-size: 16px; border-bottom: 0 !important; }
.nb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.nb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.nb-nav .wp-block-navigation__submenu-icon { color: currentColor; }
.nb-more-link { font-size: 17px; margin-top: 14px !important; }
.nb-more-link a { text-decoration-color: var(--wp--preset--color--gold); }
@media (max-width: 781px) {
	.nb-nav .is-menu-open .wp-block-navigation__submenu-container { box-shadow: none; padding: 8px 0 0 !important; min-width: 0 !important; background: transparent !important; }
	.nb-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 17px; padding: 6px 0 !important; opacity: .85; }
}

/* ---------- v1.3.2 Services price lists: photos span the list ---------- */
/* In "fill" sections the photo column is exactly as tall as the price list:
   from the first service name to the last service. Stacked photos share it. */
@media (min-width: 782px) {
	.nb-split.nb-split--fill { align-items: stretch !important; }
	.nb-split.nb-split--fill > .wp-block-column { align-self: stretch !important; }
	.nb-split.nb-split--fill > .wp-block-column:has(> .nb-menu-img) { display: flex; flex-direction: column; gap: 16px; }
	.nb-split.nb-split--fill > .wp-block-column > .nb-menu-img { flex: 1 1 0; min-height: 0; margin: 0 !important; }
	.nb-split.nb-split--fill > .wp-block-column > .nb-menu-img img { width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }
	/* Button + links centred under the list column. */
	.nb-menu-after { margin-top: 40px !important; width: calc(50% - clamp(32px, 6vw, 76px) / 2); }
	.nb-menu-after--media-left { margin-left: auto !important; margin-right: 0 !important; }
	.nb-menu-after--media-right { margin-left: 0 !important; margin-right: auto !important; }
}
.nb-menu-after > .wp-block-buttons { margin-top: 0; }
@media (max-width: 781px) { .nb-menu-after { margin-top: 32px !important; } }