/*
Theme Name: Napolitani
Theme URI: https://napolitanipizzeria.com/
Template: kamakura
Author: Kōshi Studio
Author URI: https://koshi.studio
Description: Napolitani Pizzeria's site, built on Kamakura Pro. Italian street food at Molave Suites, Cebu: the cherub and graffiti wordmark, "PIZZERIA" in spaced gold capitals and one golden-orange accent from the cherub's halo. Pages: Home, Menu, Experiences (Pizza Saturday, birthdays and groups), Visit and Journal. Order buttons open the ordering app (Settings › Reading › Order link).
Requires at least: 6.6
Requires PHP: 7.4
Version: 1.10.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: napolitani
*/

/* ==========================================================================
   Type: Big Shoulders for headlines (street-poster capitals),
   Outfit for reading, Fraunces italic for the warm words in a headline.
   ========================================================================== */

:where(h1, h2, h3, .zzp-display) em {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 500;
	text-transform: none;
	letter-spacing: -0.015em;
	font-size: 0.92em;
	color: var(--wp--preset--color--accent-strong);
}
.has-display-font-size em,
.wp-block-cover h1 em,
.wp-block-cover h2 em,
.zzp-footer em { color: var(--wp--preset--color--accent); }

/* "PIZZERIA" spacing: every small label is gold, wide-set capitals */
.zzp-eyebrow,
.zzp-card2__kind,
.zzp-vlist__label,
.zzp-drawer__tab,
.np-kicker {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600 !important;
	letter-spacing: 0.32em !important;
	text-transform: uppercase;
	font-size: 0.72rem !important;
	color: var(--wp--preset--color--accent-strong);
}
.zzp-slide__label {
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-size: 0.72rem;
	color: var(--wp--preset--color--accent);
	opacity: 1;
}

/* "Ciao." in place of Kamakura's kanji */
.zzp-intro-kanji__mark.np-mark {
	font-family: var(--wp--preset--font-family--serif) !important;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(3rem, 6vw, 4.5rem) !important;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--accent-strong);
}
.zzp-booking__seal {
	font-family: var(--wp--preset--font-family--serif) !important;
	font-style: italic;
	font-weight: 500 !important;
	font-size: 1.9rem !important;
}

/* Menu: the vertical course words in gold capitals, not brush strokes */
.zzp-brush {
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.15rem) !important;
	color: var(--wp--preset--color--accent);
	transform: rotate(180deg);
}
.zzp-dish > span:first-child { font-weight: 600; }
.zzp-dish > span:last-child { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   The logo. The site name is drawn as the cherub logo: the graffiti
   wordmark in the header and Explore panel, the full cherub on the
   charcoal footer. An image uploaded in Site Editor › Logo takes over.
   ========================================================================== */

.np-brand { display: inline-block; line-height: 0; text-decoration: none; }
.np-brand img { display: block; height: auto; }
.np-brand--wordmark img { width: clamp(124px, 11vw, 160px); }
.zzp-menu-panel .np-brand--wordmark img { width: 150px; }
.np-brand--full img { width: clamp(150px, 16vw, 210px); }
.wp-block-site-logo.np-logo:has(img) + .wp-block-site-title { display: none; }
.wp-block-site-logo.np-logo:not(:has(img)) { display: none; }
.zzp-header .wp-block-site-logo img { max-height: 64px; width: auto; }
.np-footer-brand { display: flex; align-items: center; gap: 1rem; }

/* The cherub above the intro */
.np-cherub { margin: 0 auto 0.5rem !important; }
.np-cherub img { width: clamp(150px, 18vw, 230px); height: auto; }

/* ==========================================================================
   Buttons: charcoal, turning halo-gold on hover. Order sits beside Book.
   ========================================================================== */

.wp-element-button,
.wp-block-button__link { text-transform: uppercase; letter-spacing: 0.08em; }
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--accent) !important; color: var(--wp--preset--color--ink) !important; border-color: var(--wp--preset--color--accent) !important; }

/* Hero headlines keep the poster weight */
.zzp-slider .wp-block-cover h1,
.zzp-slider .wp-block-cover h2 { font-weight: 800 !important; letter-spacing: 0 !important; }
.zzp-slider .wp-block-cover h1 em,
.zzp-slider .wp-block-cover h2 em { font-weight: 500; }

.zzp-book { gap: 0.5rem; flex-wrap: nowrap; }
.zzp-book .np-order .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1.5px solid var(--wp--preset--color--ink);
}
@media (max-width: 781px) {
	.zzp-book .np-order { display: none; }
}
.zzp-booking__links a,
.zzp-arrow a { text-decoration-color: var(--wp--preset--color--accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* Raked-gravel ripples become a faint golden halo */
.zzp-ripples::before { background: var(--wp--preset--color--accent); opacity: 0.16; }

/* Top bar on charcoal: links in cream */
.has-deep-background-color a { color: var(--wp--preset--color--on-deep); }

/* Experiences: detail rows read as label / value */
.zzp-tlist .zzp-dish > span:last-child { color: var(--wp--preset--color--ink-2); }

/* Footer on charcoal (Kamakura's calm edition draws it light) */
.zzp-footer.np-dark.has-background { background: var(--wp--preset--color--deep) !important; color: var(--wp--preset--color--on-deep-2) !important; }
.zzp-footer.np-dark.has-background :is(.has-on-deep-color, .zzp-footer__brand, .wp-block-site-title, h2, h3, h4) { color: var(--wp--preset--color--on-deep) !important; }
.zzp-footer.np-dark.has-background :is(.has-on-deep-2-color, p, li, a) { color: var(--wp--preset--color--on-deep-2); }
.zzp-footer.np-dark.has-background .wp-block-button__link { background: var(--wp--preset--color--accent) !important; color: var(--wp--preset--color--ink) !important; }
.zzp-footer.np-dark.has-background .wp-block-button__link:hover { background: var(--wp--preset--color--on-deep) !important; }
.zzp-footer.np-dark .zzp-footer__base { border-color: color-mix(in srgb, var(--wp--preset--color--on-deep) 18%, transparent); }

/* Hero: both actions read as the same quiet links on the photo */
.zzp-slider .is-style-outline .wp-block-button__link { border: 0 !important; }

/* Explore panel: the page names as poster capitals */
.zzp-menu-panel .zzp-menu-panel__nav .wp-block-navigation-item__content { font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.01em; }
.zzp-menu-panel .zzp-menu-panel__nav [aria-current] { font-family: var(--wp--preset--font-family--display) !important; font-style: normal !important; color: var(--wp--preset--color--accent-strong); }

/* ==========================================================================
   Napolitani Night (Styles › Napolitani Night).
   ========================================================================== */
/* The slide-in menu follows the Night colours: charcoal, cream text, gold course words */
.zzp-night .zzp-dw .zzp-dw__in { background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--ink); box-shadow: -1px 0 0 color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent); }
.zzp-night .zzp-dw .zzp-dish__desc { color: var(--wp--preset--color--ink-3); }
.zzp-night .zzp-dw .zzp-dish > span:last-child { color: var(--wp--preset--color--accent); }
.zzp-night .zzp-ripples::before { opacity: 0.09; }
.zzp-night .zzp-book .np-order .wp-block-button__link { color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); }
.zzp-night .wp-block-button__link:hover { color: #1D1D1B !important; }
.zzp-night .zzp-stack__body, .zzp-night .zzp-chapter__body, .zzp-night .zzp-ex__line, .zzp-night .zzp-card2 p { color: var(--wp--preset--color--ink-2); }

/* ==========================================================================
   The Napolitani doodles (the original street-food pattern: pizza, pasta,
   the jeepney...) as a wall behind the booking card.
   Kamakura's raked-gravel ripples are switched off everywhere else.
   ========================================================================== */
.zzp-ripples::before { display: none; }
.zzp-booking.zzp-ripples::before {
	content: "" !important;
	display: block;
	position: absolute;
	inset: 0;
	left: 0; top: 0;
	width: auto;
	aspect-ratio: auto;
	transform: none;
	background: var(--wp--preset--color--accent);
	-webkit-mask: url("assets/patterns/napolitani-doodles.png") 0 0 / 760px auto repeat;
	mask: url("assets/patterns/napolitani-doodles.png") 0 0 / 760px auto repeat;
	opacity: 0.16;
	pointer-events: none;
	z-index: 0;
}
.zzp-night .zzp-booking.zzp-ripples::before { opacity: 0.11; }
.zzp-footer.np-dark > * { position: relative; z-index: 1; }

/* The booking card sits on the sticker wall like a note */
.zzp-booking .zzp-booking__box {
	position: relative;
	background: var(--wp--preset--color--surface);
	padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px);
	border-radius: 0 0 var(--wp--custom--corner) 0;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
	max-width: 640px;
	margin-inline: auto;
}

/* A short gold line under the intro heading */
.zzp-intro-kanji h2::after {
	width: 44px !important;
	height: 2px !important;
	background: var(--wp--preset--color--accent) !important;
}

/* ==========================================================================
   Pizza class page: the four steps, the two ways to book, the form
   ========================================================================== */
.np-step__n { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(3rem, 5vw, 4.5rem); line-height: 1; color: var(--wp--preset--color--accent); margin: 0 0 0.6rem !important; }
.np-steps .zzp-cards__track { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 781px) { .np-steps .zzp-cards__track { grid-template-columns: 1fr 1fr !important; } }

.np-options > .zzp-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
@media (max-width: 781px) { .np-options > .zzp-inner { grid-template-columns: 1fr; } }
.np-option { padding: clamp(24px, 3vw, 40px); background: var(--wp--preset--color--surface-2); border-radius: 0 0 var(--wp--custom--corner) 0; }
.np-option h3 { margin: 0.4rem 0 0.6rem !important; }

.np-book .zzp-booking__box { max-width: 720px; }
.np-form { display: grid; gap: 1rem; margin-top: 1.5rem; text-align: left; }
.np-form label { display: grid; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }
.np-form input[type=text], .np-form input[type=tel], .np-form input[type=date], .np-form input[type=number], .np-form select, .np-form textarea {
	font: inherit; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none;
	color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--line); border-radius: 0; padding: 0.75rem 0.85rem; width: 100%; box-sizing: border-box;
}
.np-form :focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.np-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.np-form__row[hidden] { display: none; }
@media (max-width: 600px) { .np-form__row { grid-template-columns: 1fr; } }
.np-form__type { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.np-form__type legend { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); margin-bottom: 0.5rem; }
.np-form__type label { display: flex; align-items: center; gap: 0.5rem; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--wp--preset--color--ink); }
.np-form__type input { accent-color: var(--wp--preset--color--accent); width: 1.1rem; height: 1.1rem; }
.np-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; }
.np-form__total { margin: 0; font-size: 1rem; color: var(--wp--preset--color--ink-2); }
.np-form__total strong { font-family: var(--wp--preset--font-family--display); font-size: 2rem; font-weight: 800; color: var(--wp--preset--color--ink); margin-left: 0.4rem; }
.np-form button { cursor: pointer; border: 0; }
.np-form__small { margin: 0; font-size: 0.85rem; color: var(--wp--preset--color--ink-3); }
.np-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.np-form__error { margin: 0; padding: 0.75rem 1rem; border-left: 3px solid var(--wp--preset--color--accent); background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--ink); }
.np-form--done { text-align: center; padding: 1rem 0; }
.np-form__done-title { font-family: var(--wp--preset--font-family--display); font-weight: 800; text-transform: uppercase; font-size: 1.8rem; color: var(--wp--preset--color--accent); margin: 0 0 0.5rem; }
.np-class-page .zzp-float-book { display: none !important; }

/* ==========================================================================
   Split cover: the opening of Menu, Experiences, Visit and Pizza class.
   Headline, buttons and key facts on charcoal; the photo runs to the right edge.
   ========================================================================== */
.np-cover {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	min-height: calc(100svh - var(--wp--custom--header-height, 88px));
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--on-deep);
	margin: 0 !important;
	overflow: hidden;
}
.zzp-night .np-cover { background: var(--wp--preset--color--surface); }
.np-cover__text {
	align-self: center;
	padding: clamp(48px, 7vw, 120px) clamp(24px, 4vw, 64px) clamp(48px, 6vw, 96px) max(var(--wp--style--root--padding-left, 24px), calc((100vw - var(--wp--style--global--wide-size, 1340px)) / 2));
	position: relative;
	z-index: 2;
}
.np-cover__text > * { margin-block: 0 !important; }
.np-cover .zzp-eyebrow { color: var(--wp--preset--color--accent); margin-bottom: 1.2rem !important; }
.np-cover__title {
	color: var(--wp--preset--color--on-deep);
	font-size: clamp(2.8rem, 5.2vw, 5.4rem) !important;
	line-height: 0.92 !important;
	margin-bottom: 1.6rem !important;
}
.np-cover__title em { display: block; color: var(--wp--preset--color--accent); }
.np-cover__line { max-width: 34ch; font-size: clamp(1.05rem, 1.2vw, 1.2rem); line-height: 1.65; color: var(--wp--preset--color--on-deep-2); margin-bottom: 2rem !important; }
.np-cover__buttons { gap: 0.75rem; margin-bottom: clamp(2rem, 4vw, 3.2rem) !important; }
.np-cover__buttons .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--on-deep); border: 1.5px solid currentColor; background: transparent; }
.np-cover__facts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 1.4rem clamp(28px, 4vw, 64px); }
.np-fact > * { margin: 0 !important; }
.np-fact__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--wp--preset--color--on-deep-2); opacity: 0.85; }
.np-fact__value {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 2.3vw, 2.3rem);
	line-height: 1.05;
	padding-top: 0.3rem;
	color: var(--wp--preset--color--on-deep);
}
.np-cover__media { position: relative; min-height: 100%; }
.np-cover__photo { position: absolute !important; inset: 0; margin: 0 !important; }
.np-cover__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-cover__media::before {
	content: ""; position: absolute; inset: 0 auto 0 0; width: 38%; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, var(--wp--preset--color--deep) 0%, transparent 100%);
}
.zzp-night .np-cover__media::before { background: linear-gradient(90deg, var(--wp--preset--color--surface) 0%, transparent 100%); }
@media (max-width: 900px) {
	.np-cover { grid-template-columns: 1fr; min-height: 0; }
	.np-cover__media { order: -1; aspect-ratio: 4 / 5; max-height: 70svh; }
	.np-cover__media::before { inset: auto 0 0 0; width: auto; height: 35%; background: linear-gradient(0deg, var(--wp--preset--color--deep) 0%, transparent 100%); }
	.zzp-night .np-cover__media::before { background: linear-gradient(0deg, var(--wp--preset--color--surface) 0%, transparent 100%); }
	.np-cover__text { padding: 8px 24px 56px; }
}
.np-cover > *, .np-cover__facts > *, .np-cover__media > * { margin: 0 !important; }
@media (max-width: 900px) { .np-cover__media { aspect-ratio: 4 / 3; max-height: 56svh; } }
.np-focus-top img { object-position: 50% 30%; }
.np-qr { margin: 1.25rem auto !important; max-width: 260px; background: #fff; padding: 10px; border-radius: 0 0 var(--wp--custom--corner-small) 0; }
.np-qr img { display: block; width: 100%; height: auto; }

/* Gold buttons always carry charcoal text (in Napolitani Night "ink" turns cream) */
.wp-block-button__link.has-accent-background-color,
.zzp-footer.np-dark.has-background .wp-block-button__link { color: #1D1D1B !important; }
.wp-block-button__link.has-accent-background-color:hover,
.wp-block-button__link.has-accent-background-color:focus-visible { background-color: #F6F0E4 !important; color: #1D1D1B !important; }

/* Footer billboard: the graffiti wordmark across the full width, under the links */
.np-billboard { margin-top: clamp(48px, 7vw, 104px) !important; }
.np-billboard .wp-block-site-title { margin: 0; }
.np-brand--billboard { display: block; }
.np-brand--billboard img { width: 100%; height: auto; }
.np-footer-brand.np-billboard { display: block; }
.np-billboard .wp-block-site-title, .np-billboard .np-brand--billboard { width: 100%; }

/* Gold wall: the booking sections in halo gold, the doodles in charcoal, the card in charcoal on top */
.zzp-booking.zzp-ripples { background: var(--wp--preset--color--accent) !important; }
.zzp-booking.zzp-ripples::before,
.zzp-night .zzp-booking.zzp-ripples::before { background: #1D1D1B; opacity: 0.82; }
.zzp-booking .zzp-booking__box { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); }
.zzp-night .zzp-booking .zzp-booking__box { background: #1B1C18; }
.zzp-booking.zzp-ripples::after { display: none; }

/* Booking sections on a photo of the dining room, softly tinted (replaces the gold doodle wall) */
.zzp-booking.zzp-ripples {
	background: linear-gradient(rgba(18, 19, 16, 0.62), rgba(18, 19, 16, 0.62)), url("assets/images/np-room-wide.jpg?v=1.9.2") center 55% / cover no-repeat !important;
}
.zzp-booking.zzp-ripples::before { display: none !important; }
.zzp-booking .zzp-booking__box { background: rgba(27, 28, 24, 0.94) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); border: 1px solid rgba(251, 193, 44, 0.35); }

/* Live Instagram feed in "Life at the pizzeria" */
.np-ig { margin-top: 2rem; }
.np-ig #sb_instagram, .np-ig .sbi { padding: 0 !important; }
.np-ig #sb_instagram .sbi_photo, .np-ig .sbi_item img { border-radius: 0 0 var(--wp--custom--corner-small) 0; }
.np-ig__follow { text-align: center; margin-top: 2rem !important; }

/* Instagram strip: 8 posts in rows of 4 (2 on phones), whatever the plugin's own feed settings say */
.np-ig #sbi_images { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; padding: 0 !important; }
.np-ig #sbi_images > .sbi_item { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.np-ig #sbi_images > .sbi_item:nth-child(n+9) { display: none !important; }
.np-ig .sb_instagram_header, .np-ig #sbi_load, .np-ig .sbi_load_btn, .np-ig .sbi_follow_btn { display: none !important; }
@media (max-width: 781px) { .np-ig #sbi_images { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }