/*
Theme Name: Saffron
Theme URI: https://example.com/saffron
Author: Opstel IT
Author URI: https://example.com
Description: Saffron is a fully dynamic restaurant WordPress theme converted from the Restoria HTML template. Every text string and image on the front page is editable from the Customizer, and the repeating content (dishes, hero slides, testimonials, gallery posts) is managed through dedicated custom post types.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saffron
Tags: restaurant, food, one-column, custom-menu, custom-logo, featured-images, translation-ready, theme-options, blog

Saffron is based on the Restoria HTML template. The design assets in css/, js/,
fonts/ and images/ belong to their original author (Kalanidhi Themes).

NOTE: The visual design lives in css/style.css (which @imports the rest of the
css/ folder). This file only carries the theme header plus the WordPress-specific
rules the original template did not need to ship.
*/

/* ==========================================================================
   1. WordPress core required classes
   ========================================================================== */

.alignleft {
	float: left;
	margin: 0 30px 20px 0;
}

.alignright {
	float: right;
	margin: 0 0 20px 30px;
}

.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto 20px;
}

.alignnone {
	margin: 0 0 20px;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 20px;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0;
}

.wp-caption .wp-caption-text,
.wp-caption-text,
.gallery-caption {
	font-size: 14px;
	font-style: italic;
	padding: 10px 0 0;
	margin: 0;
	color: var(--white-color-opacity-two);
}

.sticky .blog_info h4 a::before {
	content: "\f005";
	font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", sans-serif;
	font-weight: 900;
	font-size: 13px;
	color: var(--main-color);
	margin-right: 10px;
	vertical-align: middle;
}

.bypostauthor > .comment .authore_info .text::after {
	content: "";
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-one);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--main-color);
	display: block;
	font-size: 14px;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
}

/* ==========================================================================
   2. Editor / post content typography (Gutenberg + classic)
   ========================================================================== */

.saffron-entry-content > *:first-child {
	margin-top: 0;
}

.saffron-entry-content > *:last-child {
	margin-bottom: 0;
}

.saffron-entry-content p {
	margin-bottom: 25px;
	color: var(--white-color-opacity-two);
}

.saffron-entry-content h1,
.saffron-entry-content h2,
.saffron-entry-content h3,
.saffron-entry-content h4,
.saffron-entry-content h5,
.saffron-entry-content h6 {
	color: var(--heading-color);
	margin: 40px 0 20px;
}

.saffron-entry-content ul,
.saffron-entry-content ol {
	margin: 0 0 25px 20px;
	color: var(--white-color-opacity-two);
}

.saffron-entry-content ul {
	list-style: disc outside;
}

.saffron-entry-content ol {
	list-style: decimal outside;
}

.saffron-entry-content li {
	margin-bottom: 10px;
}

.saffron-entry-content a {
	color: var(--main-color);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.saffron-entry-content blockquote {
	position: relative;
	margin: 40px 0;
	padding: 30px 40px;
	border-left: 3px solid var(--main-color);
	background-color: var(--color-two);
	font-family: var(--font-family-Fraunces);
	font-size: 20px;
	line-height: 1.6em;
	color: var(--white-color);
}

.saffron-entry-content blockquote p:last-child,
.saffron-entry-content blockquote cite {
	margin-bottom: 0;
}

.saffron-entry-content blockquote cite {
	display: block;
	margin-top: 15px;
	font-size: 14px;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--main-color);
}

.saffron-entry-content img,
.saffron-entry-content iframe,
.saffron-entry-content video {
	max-width: 100%;
	height: auto;
}

.saffron-entry-content figure {
	margin: 0 0 30px;
}

.saffron-entry-content pre {
	overflow-x: auto;
	padding: 25px;
	margin-bottom: 30px;
	background-color: var(--color-two);
	border: 1px solid var(--white-color-opacity-four);
	color: var(--white-color-opacity);
	font-size: 14px;
}

.saffron-entry-content code {
	padding: 2px 6px;
	background-color: var(--color-two);
	color: var(--main-color);
	font-size: 14px;
}

.saffron-entry-content table {
	width: 100%;
	margin-bottom: 30px;
	border-collapse: collapse;
	color: var(--white-color-opacity-two);
}

.saffron-entry-content th,
.saffron-entry-content td {
	padding: 12px 15px;
	border: 1px solid var(--white-color-opacity-four);
	text-align: left;
}

.saffron-entry-content th {
	color: var(--white-color);
}

.saffron-entry-content .wp-block-image,
.saffron-entry-content .wp-block-embed {
	margin-bottom: 30px;
}

/* Post navigation (single) */
.saffron-post-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	margin: 50px 0 0;
	padding-top: 30px;
	border-top: 1px solid var(--white-color-opacity-four);
}

.saffron-post-nav a {
	display: block;
	max-width: 48%;
	color: var(--white-color);
	transition: 0.4s all;
}

.saffron-post-nav a:hover {
	color: var(--main-color);
}

.saffron-post-nav span {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--main-color);
	margin-bottom: 8px;
}

.saffron-post-nav .next-post {
	margin-left: auto;
	text-align: right;
}

/* ==========================================================================
   3. Sidebar widget areas (rendered inside .blog_right_side)
   ========================================================================== */

.blog_list_section .blog_right_side .widget {
	margin-bottom: 60px;
}

.blog_list_section .blog_right_side .widget-title,
.blog_list_section .blog_right_side .widget h2 {
	border-bottom: solid 1px var(--white-color-opacity-four);
	padding-bottom: 10px;
	margin-bottom: 30px;
	font-size: 20px;
	font-weight: 700;
	color: var(--white-color);
}

.blog_list_section .blog_right_side .widget ul {
	list-style: none;
}

.blog_list_section .blog_right_side .widget ul li {
	margin-bottom: 12px;
	color: var(--white-color-opacity-two);
}

.blog_list_section .blog_right_side .widget ul li a {
	color: var(--white-color);
	transition: 0.4s all;
}

.blog_list_section .blog_right_side .widget ul li a:hover {
	color: var(--main-color);
}

.blog_list_section .blog_right_side .widget select,
.blog_list_section .blog_right_side .widget input[type="text"],
.blog_list_section .blog_right_side .widget input[type="search"],
.blog_list_section .blog_right_side .widget input[type="email"] {
	width: 100%;
	height: 50px;
	padding: 10px 15px;
	border: 1px solid var(--white-color-opacity-four);
	background-color: var(--color-two);
	color: var(--white-color);
	border-radius: 0;
}

.blog_list_section .blog_right_side .widget .wp-block-search__inside-wrapper {
	gap: 0;
}

/* Search results / archive helpers */
.saffron-no-results {
	padding: 40px 0 80px;
	text-align: center;
}

.saffron-no-results p {
	color: var(--white-color-opacity-two);
	margin-bottom: 30px;
}

.saffron-no-results form {
	max-width: 460px;
	margin: 0 auto;
}

/* ==========================================================================
   4. 404 page
   ========================================================================== */

.saffron-error-section {
	padding: 120px 0;
	text-align: center;
}

.saffron-error-section .error-code {
	font-family: var(--font-family-Fraunces);
	font-size: 160px;
	line-height: 1;
	color: var(--main-color);
	margin-bottom: 20px;
}

.saffron-error-section p {
	max-width: 560px;
	margin: 0 auto 40px;
	color: var(--white-color-opacity-two);
}

/* ==========================================================================
   5. Form feedback messages (reservation / newsletter)
   ========================================================================== */

.saffron-form-message {
	display: block;
	width: 100%;
	padding: 14px 20px;
	margin-bottom: 25px;
	font-size: 15px;
	border-left: 3px solid var(--main-color);
	background-color: rgba(230, 177, 95, 0.12);
	color: var(--white-color);
}

.saffron-form-message.is-error {
	border-left-color: #e05c4a;
	background-color: rgba(224, 92, 74, 0.12);
}

.saffron-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   6. Empty-state notices (shown to editors when a post type has no content)
   ========================================================================== */

.saffron-empty-notice {
	padding: 40px 20px;
	margin: 0 auto;
	max-width: 720px;
	text-align: center;
	border: 1px dashed var(--white-color-opacity-four);
	color: var(--white-color-opacity-two);
	font-size: 15px;
}

.saffron-empty-notice a {
	color: var(--main-color);
	text-decoration: underline;
}

/* ==========================================================================
   7. Comment list flattening helpers
   ========================================================================== */

.comment_section ul {
	list-style: none;
}

.comment_section ul li.replay_comment.depth-3 {
	margin-left: 160px;
}

.comment_section .comment-reply-link,
.comment_section .comment-edit-link {
	display: inline-block;
	margin-top: 10px;
	margin-right: 15px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--main-color);
}

.comment_section .comment-awaiting-moderation {
	display: block;
	font-size: 13px;
	font-style: italic;
	color: var(--main-color);
}

.comment_form_section form .logged-in-as,
.comment_form_section form .comment-notes {
	font-size: 14px;
	color: var(--white-color-opacity-two);
	margin-bottom: 20px;
}

.comment_form_section form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 25px;
	font-size: 14px;
	color: var(--white-color-opacity-two);
}

.comment_form_section form .comment-form-cookies-consent input {
	margin-top: 5px;
}

/* ==========================================================================
   8. Dish card grid (Full Menu page + dish category archive)
   --------------------------------------------------------------------------
   `.offer-block-two` already supports use outside the carousel — the template
   gives it a 30px bottom margin and resets it to 0 only inside
   `.special-offer .owl-theme`. These rules add what a grid additionally needs:
   equal-height cards across a row, a badge slot, and linkable filter tabs.
   ========================================================================== */

.special-offer .row.clearfix {
	display: flex;
	flex-wrap: wrap;
}

.special-offer .offer-col {
	display: flex;
	margin-bottom: 30px;
}

/* Stretch each card so every arch in a row ends at the same height. */
.special-offer .offer-col .offer-block-two {
	display: flex;
	width: 100%;
	margin-bottom: 0;
}

.special-offer .offer-col .offer-block-two .inner-box {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Push the price to the bottom edge of the card. */
.special-offer .offer-col .offer-block-two .price {
	margin-top: auto;
	padding-top: 15px;
}

/*
 * Four or more cards across leaves each one roughly 370px wide, where the
 * original three-up 65px padding would squeeze the text to ~240px. Tighten it
 * for the grid and for a carousel showing four or more — a three-up carousel
 * keeps the original spacing.
 */
.special-offer .offer-col .offer-block-two .inner-box,
.special-offer .items-4 .offer-block-two .inner-box,
.special-offer .items-5 .offer-block-two .inner-box,
.special-offer .items-6 .offer-block-two .inner-box {
	padding: 50px 32px;
}

.special-offer .offer-col .offer-block-two .inner-box .image,
.special-offer .items-4 .offer-block-two .inner-box .image,
.special-offer .items-5 .offer-block-two .inner-box .image,
.special-offer .items-6 .offer-block-two .inner-box .image {
	margin-top: 20px;
	margin-bottom: 30px;
}

.special-offer .offer-col .offer-block-two .desc,
.special-offer .items-4 .offer-block-two .desc,
.special-offer .items-5 .offer-block-two .desc,
.special-offer .items-6 .offer-block-two .desc {
	font-size: 14px;
}

/*
 * Owl's nav arrows sit 100px outside the container. With four cards the row is
 * wider, so pull them in to stay on screen at mid-desktop widths.
 */
@media (max-width: 1700px) {
	.special-offer .owl-theme .owl-nav {
		left: -30px;
		right: -30px;
	}
}

/* Badge next to the category label, following the template's .special-tag look. */
.offer-block-two .cat-name .s-info {
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
	padding: 2px 12px;
	background-color: var(--main-color);
	color: var(--color-one);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 50px;
}

/*
 * The Full Menu page reuses the template's `.tabs-box` so custom-script.js gives
 * it the same instant switching as the front page. `.tabs-content` is styled for
 * that section's dish list though — a paper texture plus a 70px decorative strip
 * down the left edge — which would sit oddly behind arch cards and overlap the
 * first column. Neutralise it here so the cards keep the section background.
 */
.special-offer .saffron-menu-filter .tabs-content {
	background: none;
}

.special-offer .saffron-menu-filter .tabs-content::before {
	display: none;
}

.special-offer .saffron-menu-filter .tabs-content .tab {
	padding: 0;
}

.special-offer .saffron-menu-filter .buttons {
	padding-bottom: 50px;
}

@media (max-width: 991px) {
	.special-offer .offer-block-two .inner-box {
		padding: 40px 30px;
	}
}

/* ==========================================================================
   9. Contact page
   --------------------------------------------------------------------------
   The template's own divider column is col-md-1, where a 1px line sitting at the
   column's left edge reads as centred. This layout gives both info blocks equal
   width with a col-lg-2 divider, so the line has to be centred explicitly.
   ========================================================================== */

.contact-page .middle-line-wrapper .middle-line-container {
	margin: 0 auto;
}

/*
 * `.more-link` is styled for links; the address and hours rows are plain text,
 * so give the span the same colour and spacing without the hover underline.
 */
.contact-page .loc-block.info-block .more-link span {
	display: inline-block;
	vertical-align: top;
	color: var(--white-color);
	line-height: 1.5em;
	padding-bottom: 4px;
}

.contact-page .lower-link-box {
	margin-top: 60px;
}

/* ==========================================================================
   10. Logo aspect ratio
   --------------------------------------------------------------------------
   The template's logo.png is exactly 180x46 — the same height the CSS pins the
   header logo to — so `height: 46px` with no width rule never actually scaled
   it. A logo uploaded through Site Identity has different dimensions, and
   WordPress prints real width/height attributes on the <img>, so the fixed
   height squashed it to the attribute's width. `width: auto` hands the ratio
   back to the browser; `object-fit: contain` guarantees no distortion even if a
   narrow container also constrains the width.
   ========================================================================== */

.main-header .main-box .logo-box .logo img {
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* These two are capped with max-height, so height must be free to follow width. */
.hidden-bar .inner-box .logo-box img,
.info-bar .inner-box .logo-box img {
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/* The footer logo has no height rule of its own, so keep a sane ceiling. */
.main-footer .info-col .logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 60px;
	object-fit: contain;
}

/* ==========================================================================
   11. About page story block
   --------------------------------------------------------------------------
   The home page's story column holds a single paragraph, so `.text` needs no
   bottom margin there. The About template can show two, and its column sits
   beside the same tall arch image, so it needs real paragraph spacing and a
   guaranteed gap above the booking line even when the highlights are removed.
   Scoped to `.about-page` so the front page is untouched.
   ========================================================================== */

/*
 * The copy column is shorter than the tall arch image beside it, so centre the
 * two against each other instead of letting the text hang from the top with a
 * void underneath. Bootstrap's .row is already flex, so this is all it takes.
 */
.story-section.about-page .row.clearfix {
	align-items: center;
}

.story-section.about-page .text-col .inner {
	padding-top: 0;
}

.story-section.about-page .text {
	margin-bottom: 25px;
}

.story-section.about-page .text:last-of-type {
	margin-bottom: 0;
}

/* Only needed when the highlights block is absent — it supplies its own 60px. */
.story-section.about-page .text + .booking-info {
	margin-top: 45px;
}

.story-section.about-page .booking-info {
	align-items: center;
	flex-wrap: wrap;
	gap: 20px 0;
}

.story-section.about-page .booking-info .bk-title {
	margin-top: 0;
}

@media (max-width: 991px) {
	.story-section.about-page .text-col .inner {
		padding-right: 0;
		padding-bottom: 40px;
	}
}

/* ==========================================================================
   12. Blog image height
   --------------------------------------------------------------------------
   `saffron-blog-card` is cropped 570x700 (portrait) because that is the shape
   the front page's three-up card grid needs, where each card is ~370px wide.
   The blog archive puts the same image in a col-lg-8 column and the template
   sizes it `width: 100%`, so it scales up to ~745px wide — and therefore ~915px
   tall, a whole screen of photo before the title is reached. The single post
   is worse: it prints the image at `full` size inside a ~1140px container.

   Pinning the ratio crops both to a landscape band roughly half as tall. Doing
   it in CSS rather than by changing add_image_size() means it applies to images
   already in the media library without a thumbnail regeneration, and the
   front-page cards keep their portrait crop.
   ========================================================================== */

.blog_list_section .blog_left_side .blog_panel .main_img img,
.blog_detail_section .blog_inner_pannel .main_img img {
	aspect-ratio: 16 / 10;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/* ==========================================================================
   13. Single dish page
   --------------------------------------------------------------------------
   The dish page is built from `.story-section` (arch photo + copy column) and
   `.special-offer` (arch cards), so it needs no new components — only the few
   things those blocks cannot supply: a price line, the badge chip, and a
   predictable silhouette for the photo.
   ========================================================================== */

/* Same reason as the About page: the copy column is shorter than the arch
   image beside it, so centre the two instead of leaving a void underneath. */
.story-section.dish-page .row.clearfix {
	align-items: center;
}

.story-section.dish-page .text-col .inner {
	padding-top: 0;
}

/*
 * Featured images are uploaded at whatever ratio the photo happened to be, so
 * the ratio is pinned here to give every dish page the same silhouette.
 *
 * 3:2 rather than the portrait 4:5 this started at: the copy column beside it
 * is only ever four or five short lines, and a portrait frame left the photo
 * towering over it and the section scrolling far longer than it had content
 * for. A landscape frame halves the height and still rounds into an arch under
 * the `border-radius: 100% 100% 0 0` mask — just a wider, shallower one.
 */
.story-section.dish-page .image-col .images img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
}

/* With no featured image the copy column spans the row, so drop the gutter. */
.story-section.dish-page.no-image .text-col .inner {
	padding-right: 0;
}

/*
 * `.title-box` carries 30px of padding-bottom plus the story section's own 10px
 * margin, sized for a heading that sits alone above a row. Here the price line
 * follows immediately, so let that line own the gap instead.
 */
.story-section.dish-page .title-box {
	padding-bottom: 0;
	margin-bottom: 0;
}

/* The category label is a link on this page; the template styles the subtitle
   itself, never an anchor inside it. */
.story-section.dish-page .title-box .subtitle a {
	color: inherit;
	transition: 0.4s all;
}

.story-section.dish-page .title-box .subtitle a:hover {
	color: var(--white-color);
}

.story-section.dish-page .dish-price-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	margin: 20px 0 25px;
}

.story-section.dish-page .dish-price-row .price {
	font-family: var(--font-family-Fraunces);
	font-size: 40px;
	line-height: 1;
	color: var(--main-color);
}

/* The same chip the dish cards use for a badge (section 8). */
.story-section.dish-page .dish-price-row .s-info {
	display: inline-block;
	padding: 4px 14px;
	background-color: var(--main-color);
	color: var(--color-one);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 50px;
}

/*
 * On the About page `.booking-info` gets its top gap from the `.feature-info`
 * block above it, which this layout has no room for.
 */
.story-section.dish-page .booking-info {
	align-items: center;
	flex-wrap: wrap;
	gap: 20px 0;
	margin-top: 45px;
}

.story-section.dish-page .booking-info .bk-title {
	margin-top: 0;
}

/* The full description, when the dish has more to say than the intro line. */
.story-section.dish-page .dish-body-row {
	margin-top: 80px;
}

.story-section.dish-page .dish-body-row .saffron-entry-content {
	max-width: 900px;
	margin: 0 auto;
}

@media (max-width: 991px) {
	.story-section.dish-page .text-col .inner {
		padding-right: 0;
		padding-bottom: 40px;
	}

	.story-section.dish-page .dish-price-row .price {
		font-size: 32px;
	}

	.story-section.dish-page .dish-body-row {
		margin-top: 50px;
	}
}

/* ==========================================================================
   14. Admin bar offset for the fixed header
   ========================================================================== */

body.admin-bar .main-header.fixed-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .main-header.fixed-header {
		top: 46px;
	}
}

/* ==========================================================================
   15. Header navigation
   --------------------------------------------------------------------------
   The template ships two header behaviours and picks one with a single rule:
   `.main-header .header-upper .nav-box { display: none }` in css/style.css,
   which hides the horizontal menu and leaves only the hamburger opening the
   slide-out panel. The menu markup, its dropdowns, hover underline and
   current-item state are all present and styled — just never shown.

   This turns the other one on: the menu inline in the header, in the place the
   hamburger used to sit. Nothing is re-styled, only the visibility swap the
   vendor rule was doing, plus the ordering below.

   The 1200px breakpoint is the template's own: css/responsive.css already
   hides `.nav-outer` and shows `.nav-toggler` below it, so the hamburger and
   the slide-out panel stay exactly as they were on tablet and phone, where an
   inline menu has nowhere to go.
   ========================================================================== */

@media only screen and (min-width: 1200px) {

	.main-header .header-upper .nav-box {
		display: block;
	}

	/*
	 * The hamburger is the only thing in .links-box. Hiding the box rather than
	 * the button drops it out of the flex row as well — left in place as a
	 * zero-width item it would still claim a share of the gaps that
	 * `justify-content: space-between` hands out.
	 */
	.main-header .header-upper .links-box {
		display: none;
	}

	/*
	 * Source order is logo, then menu. The menu belongs on the left, where the
	 * hamburger was, so pull it ahead of the logo — `order` moves it without the
	 * markup having to change.
	 *
	 * Menu and button then each take an equal share of the row (`flex: 1 1 0`)
	 * with the logo auto-width between them, which is what actually holds the
	 * logo in the centre. Plain space-between would only centre it if those two
	 * happened to be the same width, and the menu is three times the button.
	 */
	.main-header .header-upper .nav-box {
		order: -1;
		flex: 1 1 0;
	}

	.main-header .header-upper .main-box .link-btn {
		flex: 1 1 0;
		display: flex;
		justify-content: flex-end;
	}

	/*
	 * .logo-box carries a 130px left margin that centred it against the narrow
	 * hamburger. The flex shares above do that job now, so the margin would only
	 * push it off centre.
	 */
	.main-header .main-box .logo-box {
		flex: 0 0 auto;
		margin-left: 0;
		padding-left: 30px;
		padding-right: 30px;
	}

	/* First item sits against the container edge, so it needs no lead-in gap. */
	.main-menu .navigation > li:first-child {
		margin-left: 0;
	}
}

/* ==========================================================================
   16. Contact page manager card
   --------------------------------------------------------------------------
   Borrows the contact page's own vocabulary rather than inventing one: the
   arch photo frame with its inset gold outline (`.contact-image`), the muted
   uppercase label (`.c-info-ttl`) and the gold hover on links. Laid out
   horizontally so it reads as one person rather than a third column, and set
   on `--color-two` so it lifts off the section behind it.
   ========================================================================== */

.contact-page .manager-block {
	position: relative;
	display: flex;
	align-items: center;
	gap: 40px;
	max-width: 640px;
	margin: 90px auto 0;
	padding: 40px 45px;
	background-color: var(--color-two);
}

/* A hairline in the accent colour, at the weight the arch outlines use. */
.contact-page .manager-block::before {
	content: '';
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	bottom: 12px;
	border: 1px solid var(--main-color);
	opacity: 0.25;
	pointer-events: none;
	box-sizing: border-box;
}

.contact-page .manager-block .manager-photo {
	position: relative;
	flex: 0 0 auto;
	width: 150px;
	border-radius: 500px 500px 0 0;
	overflow: hidden;
}

.contact-page .manager-block .manager-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center top;
	border-radius: 500px 500px 0 0;
}

/* The same inset outline the two info-block photos carry. */
.contact-page .manager-block .manager-photo::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	bottom: 8px;
	border: 1px solid var(--main-color);
	border-radius: 500px 500px 0 0;
	pointer-events: none;
	z-index: 2;
	box-sizing: border-box;
}

.contact-page .manager-block .manager-content {
	position: relative;
	text-align: left;
}

.contact-page .manager-block .c-info-ttl {
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 13px;
	color: var(--color-three);
}

.contact-page .manager-block h5 {
	margin: 8px 0 0;
	color: var(--main-color);
}

.contact-page .manager-block .manager-note {
	margin-top: 10px;
	color: var(--color-three);
}

.contact-page .manager-block .manager-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 30px;
	margin-top: 18px;
}

.contact-page .manager-block .manager-link {
	position: relative;
	display: inline-block;
	color: var(--white-color);
	line-height: 1.5em;
	padding-bottom: 4px;
	transition: 0.4s all;
}

/* Underline grows out from the centre, as the info-block links do. */
.contact-page .manager-block .manager-link::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: var(--main-color);
	opacity: 0;
	transform: scale(0.2, 1);
	transition: 0.5s all;
}

.contact-page .manager-block .manager-link:hover {
	color: var(--main-color);
}

.contact-page .manager-block .manager-link:hover::before {
	opacity: 1;
	transform: scale(1, 1);
}

/* With no photo the card has nothing to sit beside, so centre it instead. */
.contact-page .manager-block.no-photo {
	max-width: 520px;
	justify-content: center;
}

.contact-page .manager-block.no-photo .manager-content {
	text-align: center;
}

.contact-page .manager-block.no-photo .manager-links {
	justify-content: center;
}

@media (max-width: 599px) {
	.contact-page .manager-block {
		flex-direction: column;
		gap: 28px;
		margin-top: 60px;
		padding: 35px 25px;
		text-align: center;
	}

	.contact-page .manager-block .manager-content,
	.contact-page .manager-block .manager-links {
		text-align: center;
		justify-content: center;
	}
}

/* ==========================================================================
   17. Floating WhatsApp chat button
   --------------------------------------------------------------------------
   Not from the original template, so it is styled here rather than in css/.

   Kept in WhatsApp's own green instead of the theme gold: this is the one
   element on the page whose job is to be recognised at a glance, and the
   colour is most of that recognition. It reads as a deliberate utility
   against the dark green rather than a clash.

   The pill is built as a fixed-height flex row with no padding or gap of its
   own — the icon is a 54px square and all the breathing room lives on the
   label. Clearing the label in the Customizer therefore leaves a clean circle
   with nothing to tidy up.
   ========================================================================== */

.saffron-whatsapp {
	position: fixed;
	bottom: 20px;
	z-index: 99;
	display: inline-flex;
	align-items: center;
	height: 54px;
	border-radius: 27px;
	background-color: #25d366;
	color: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	transition: 0.4s background-color, 0.4s transform;
	animation: saffron-whatsapp-pulse 2.4s ease-out infinite;
}

/*
 * The pulse runs on box-shadow spread rather than a scaled pseudo-element:
 * the ring then paints outside the border box, so it can never tint the icon,
 * and it costs no layout. A running animation outranks any normal
 * declaration, so hover has to stop it before its own shadow can apply.
 */
.saffron-whatsapp:hover,
.saffron-whatsapp:focus {
	background-color: #1da851;
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
	animation: none;
}

@keyframes saffron-whatsapp-pulse {
	0% {
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0.55);
	}

	70% {
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 0 18px rgba(37, 211, 102, 0);
	}

	100% {
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

.saffron-whatsapp-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	font-size: 28px;
	line-height: 1;
}

.saffron-whatsapp-label {
	padding: 0 24px 0 2px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2em;
	white-space: nowrap;
}

.saffron-whatsapp-left {
	left: 20px;
}

/*
 * .scroll-to-top is fixed bottom right at 20px and is 50px tall, so on that
 * side the button stacks above it instead of landing underneath.
 */
.saffron-whatsapp-right {
	right: 20px;
	bottom: 85px;
}

@media (prefers-reduced-motion: reduce) {
	.saffron-whatsapp {
		animation: none;
	}

	.saffron-whatsapp:hover,
	.saffron-whatsapp:focus {
		transform: none;
	}
}

/* Phones: drop back to the icon so the pill never crowds the content. */
@media (max-width: 599px) {
	.saffron-whatsapp {
		bottom: 15px;
	}

	.saffron-whatsapp-left {
		left: 15px;
	}

	.saffron-whatsapp-right {
		right: 15px;
		bottom: 80px;
	}

	.saffron-whatsapp-label {
		display: none;
	}
}

/* ==========================================================================
   18. Menu panel: the clipped decorative left band
   --------------------------------------------------------------------------
   css/style.css paints a 70px band of pattern-black.png down the left edge of
   `.tabs-content`. That pattern is a set of wide concentric arcs, so a 70px
   window onto it shows nothing but the left tips of each arc — it reads as a
   sliver of a half-loaded image rather than as an intended spine, and it has
   no counterpart on the right, so the panel looks lopsided.

   This is the shipped design, not a conversion fault: the original index.html
   in the theme root renders it identically. It is switched off here, in the
   theme's own sheet, because css/ is vendor and must stay untouched.

   The 70px indent on `.menu-col .inner` that existed to clear the band is
   deliberately left in place. With the band gone it simply reads as the
   panel's left padding, and keeping it means the dish list does not shift.
   ========================================================================== */

.tabs-box .tabs-content::before {
	display: none;
}