/* pages: styles for this area only. Global tokens/components stay in theme.css. */

/* ---------- Contact page ---------- */
/* Same left edge as the header, shop, cart and account pages (the title and cards use the wide column). */
main:has(.nv-contact) > .wp-block-post-title,
main:has(.nv-contact) > .wp-block-post-content,
.nv-contact { max-width: var(--wp--style--global--wide-size) !important; }
/* two cards while the WhatsApp card is hidden (number unconfirmed): no empty third slot */
@media (min-width: 782px) { .nv-contact__cards:not(:has(.nv-usp--whatsapp)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.nv-contact__intro { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--wp--preset--color--ink-soft); max-width: 40rem; margin: 0 0 var(--wp--preset--spacing--40); }
.nv-contact__cards { gap: 1.25rem; }
.nv-contact__card { position: relative; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--sand); border-radius: var(--nv-radius); padding: 1.5rem; padding-top: 5.5rem; display: flex; flex-direction: column; }
.nv-contact__card::before { content: ""; position: absolute; left: 1.5rem; top: 1.5rem; width: 56px; height: 56px; border-radius: 50%; background: var(--bg) var(--icon) center / 28px no-repeat; }
.nv-contact__card--phone { --bg: var(--wp--preset--color--maroon); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.nv-contact__card--email { --bg: var(--wp--preset--color--tomato); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.nv-contact__card h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.nv-contact__value { margin: 0 0 .35rem; font-weight: 700; font-size: 1.1rem; color: var(--wp--preset--color--ink); overflow-wrap: anywhere; }
.nv-contact__note { margin: 0 0 1rem; font-size: .9rem; color: var(--wp--preset--color--ink-soft); }
.nv-contact__card .wp-block-buttons { margin-top: auto; }
.nv-contact .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; }

.nv-contact__more { margin-top: var(--wp--preset--spacing--50); gap: 1.5rem; }
.nv-contact__bulk { background: var(--wp--preset--color--cream); border-radius: var(--nv-radius); padding: clamp(1.5rem, 4vw, 2.5rem); }
.nv-contact__bulk .nv-h { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.nv-contact__list { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: grid; gap: .9rem; }
.nv-contact__list li { position: relative; padding-left: 2.25rem; color: var(--wp--preset--color--ink-soft); font-size: .95rem; }
.nv-contact__list li::before { content: ""; position: absolute; left: 0; top: .1rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--wp--preset--color--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.nv-contact__list strong { display: block; color: var(--wp--preset--color--ink); }
.nv-contact__info { border: 1px solid var(--wp--preset--color--sand); border-radius: var(--nv-radius); padding: clamp(1.5rem, 4vw, 2.5rem); }
.nv-contact__info h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.nv-contact__info h3:not(:first-child) { margin-top: 1.75rem; }
.nv-contact__info p, .nv-contact__bulk > p { margin: 0 0 .5rem; font-size: 1rem; }
.nv-contact__legal { font-size: .9rem; color: var(--wp--preset--color--ink-soft); }
.nv-contact__links { list-style: none; padding: 0; margin: 0; }
.nv-contact__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 600; }

/* ---------- Policy pages: one readable column, title aligned with it ---------- */
main:has(.nv-policy) > .wp-block-post-title,
.nv-policy { max-width: 46rem !important; margin-left: auto !important; margin-right: auto !important; }
main:has(.nv-policy) > .wp-block-post-title { font-size: clamp(2.25rem, 5vw, 3rem); }
.nv-policy { line-height: 1.7; }
.nv-policy__draft { background: var(--wp--preset--color--cream); border-left: 4px solid var(--wp--preset--color--saffron); border-radius: var(--nv-radius-sm); padding: .85rem 1.1rem; font-size: .9rem; margin: 0 0 1.5rem; }
.nv-policy__lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--wp--preset--color--ink-soft); line-height: 1.55; }
.nv-policy h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin: 2.5rem 0 .6rem; }
.nv-policy ul, .nv-policy ol { padding-left: 1.25rem; }
.nv-policy li + li { margin-top: .4rem; }
.nv-policy li::marker { color: var(--wp--preset--color--maroon); font-weight: 700; }
.nv-policy a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- About Us, Bulk Orders, Recipes: same wide left edge as Contact ---------- */
main:has(.nv-about) > .wp-block-post-title,
main:has(.nv-about) > .wp-block-post-content,
main:has(.nv-bulk) > .wp-block-post-title,
main:has(.nv-bulk) > .wp-block-post-content,
main:has(.nv-recipes) > .wp-block-post-title,
main:has(.nv-recipes) > .wp-block-post-content,
.nv-about, .nv-bulk, .nv-recipes { max-width: var(--wp--style--global--wide-size) !important; }
.nv-about > * + * { margin-top: var(--wp--preset--spacing--60); }
.nv-about__story { gap: var(--wp--preset--spacing--50); }
.nv-about__story .nv-story__img { max-width: 380px; }
.nv-about__promise .nv-feats { margin-top: var(--wp--preset--spacing--40); }
/* navrang/sizes is a full-bleed band on the homepage; here it sits in the page column as a cream card */
.nv-about .nv-sizes { border-radius: var(--nv-radius); padding-inline: clamp(1rem, 3vw, 2.5rem) !important; }
.nv-about__cta { gap: .75rem; }
.nv-about__cta .wp-block-button__link { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }

/* Milestones: vertical line with dots on phones and tablets, one horizontal row from 1024px */
.nv-timeline { list-style: none; padding: 0; margin: var(--wp--preset--spacing--40) 0 0; position: relative; display: grid; gap: 1.5rem; }
.nv-timeline::before { content: ""; position: absolute; left: 11px; top: .5rem; bottom: .5rem; width: 2px; background: var(--wp--preset--color--sand); }
.nv-timeline li { position: relative; padding-left: 2.75rem; color: var(--wp--preset--color--ink-soft); font-size: .95rem; }
.nv-timeline li::before { content: ""; position: absolute; left: 0; top: .15rem; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; background: var(--wp--preset--color--white); border: 3px solid var(--wp--preset--color--gold); }
.nv-timeline strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; line-height: 1.1; color: var(--wp--preset--color--maroon); margin-bottom: .2rem; }
@media (min-width: 1024px) {
  .nv-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
  .nv-timeline::before { left: 0; right: 0; top: 11px; bottom: auto; width: auto; height: 2px; }
  .nv-timeline li { padding: 2.5rem 0 0; text-align: center; }
  .nv-timeline li::before { left: 50%; top: 0; transform: translateX(-50%); }
}

/* ---------- Bulk Orders ---------- */
.nv-bulk__cols { gap: 1.5rem; margin-top: 0; }
.nv-bulk__form { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--sand); border-radius: var(--nv-radius); padding: clamp(1.25rem, 4vw, 2.5rem); }
.nv-bulk__form h3 { font-size: 1.25rem; margin: 0 0 1rem; }
/* Fluent Forms fields styled like the checkout fields (cart-checkout.css): labelled, ink-soft border, maroon focus ring */
/* Errors sit in the gap under each field (absolute), so fixing a field never moves the submit button: a blur that removed an
   in-flow error used to shift the button mid-tap and the first tap on "Send bulk enquiry" did nothing. */
.nv-bulk .fluentform .ff-el-group { margin-bottom: 1.75rem; position: relative; }
.nv-bulk .fluentform .ff-t-cell .ff-el-group { margin-bottom: 2.5rem; } /* half-width cells: room for a two-line error */
.nv-bulk .fluentform .ff-el-input--label label { font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--wp--preset--color--ink); }
.nv-bulk .fluentform .ff-el-input--label.asterisk-right label::after { color: var(--wp--preset--color--tomato); }
.nv-bulk .fluentform .ff-el-form-control {
  min-height: 48px; box-sizing: border-box; padding: .7rem .9rem; font: inherit; font-size: 1rem; color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--ink-soft); border-radius: var(--nv-radius-sm); background: #fff;
}
.nv-bulk .fluentform textarea.ff-el-form-control { min-height: 8rem; resize: vertical; }
.nv-bulk .fluentform .ff-el-form-control::placeholder { color: var(--wp--preset--color--ink-soft); opacity: .8; }
.nv-bulk .fluentform .ff-el-form-control:focus { border-color: var(--wp--preset--color--maroon); box-shadow: 0 0 0 1px var(--wp--preset--color--maroon); outline: 0; }
.nv-bulk .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--tomato); box-shadow: 0 0 0 1px var(--wp--preset--color--tomato); }
.nv-bulk .fluentform .ff-el-group .error { position: absolute; left: 0; right: 0; top: 100%; margin-top: .25rem; color: var(--wp--preset--color--tomato); font-size: .8rem; line-height: 1.25; }
.nv-bulk .fluentform .ff-t-container { gap: 1rem; }
.nv-bulk .fluentform .ff-t-cell { padding: 0 !important; }
@media (max-width: 599px) { .nv-bulk .fluentform .ff-t-container { display: block; } }
.nv-bulk .fluentform .ff-btn-submit {
  min-height: 48px; padding: .8rem 1.75rem; border: 0; border-radius: 999px; font: inherit; font-weight: 600; font-size: 1rem;
  background: var(--wp--preset--color--maroon) !important; color: #fff !important; cursor: pointer; opacity: 1;
}
@media (hover: hover) { .nv-bulk .fluentform .ff-btn-submit:hover { background: var(--wp--preset--color--maroon-deep) !important; } }
.nv-bulk .fluentform .ff-btn-submit:focus-visible { outline: 2px solid var(--wp--preset--color--maroon); outline-offset: 2px; }
.nv-bulk .ff-message-success { border: 0; border-left: 4px solid var(--wp--preset--color--green); border-radius: var(--nv-radius-sm); background: var(--wp--preset--color--cream); box-shadow: none; padding: 1rem 1.25rem; color: var(--wp--preset--color--ink); }
.nv-bulk .ff-message-success p { margin: 0; }

/* Homepage "Bulk Orders" USP (patterns/trust.php): the whole badge is the tap target */
.nv-usp--bulk a { color: inherit; text-decoration: none; }
.nv-usp--bulk a::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { .nv-usp--bulk a:hover { text-decoration: underline; } }

/* "Sample" tag: content shown for layout until the client sends the real thing (scripts/fb1-samples.php) */
.nv-sample {
  display: inline-block; vertical-align: middle; margin-left: .4em; padding: .3em .7em; border-radius: 999px;
  background: var(--wp--preset--color--saffron); color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--body); font-size: .75rem; font-weight: 700; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
}
.nv-market__note:has(.nv-sample) { opacity: 1; }
.nv-market__note .nv-sample { margin-left: 0; }
.nv-recipes__sample { margin: 0 0 var(--wp--preset--spacing--30); color: var(--wp--preset--color--ink-soft); }
.nv-recipes__sample .nv-sample { margin: 0 .5em 0 0; }
.nv-post-card__title .nv-sample { display: block; width: fit-content; margin: .5rem 0 0; }   /* own line under the card title */