/*==========================================================
  SWIGGER — PREMIUM LIGHT THEME
  ----------------------------------------------------------
  Layered ON TOP of style.css / hero.css.
  Nothing in the original files is deleted — this file only
  re-maps the design tokens and patches the handful of places
  where dark values were hard-coded.

  Load order must be:
      style.css  ->  hero.css  ->  light-theme.css
==========================================================*/


/*----------------------------------------------------------
  1. TOKEN RE-MAP
  The original palette is inverted at the token level, so the
  ~330 rules that already use var(--white-color) /
  var(--dark-color) flip automatically and keep their original
  contrast pairing.
----------------------------------------------------------*/
:root {

	/* --- ink (was white text) --- */
	--white-color: #16130f;
	/* warm near-black, softer than #000 */
	--text-color: #16130f;

	/* --- surface (was black bg) --- */
	--dark-color: #ffffff;
	--dark-color-2: #faf8f5;

	/* --- elevated / alternating surfaces --- */
	--bg-black-shade-1: #faf8f5;
	--bg-black-shade-2: #f4f1ea;
	--bg-black-shade-3: #f7f4ef;
	--bg-black-shade-4: #faf8f5;

	/* --- hairlines --- */
	--border-color-1: #e7e1d7;

	/* --- brand accent -------------------------------------
	   #f39c12 only reaches ~2.2:1 on white. Deepened to a
	   burnt-gold that clears 3:1 for display type and reads
	   more premium against a light ground.            */
	--primary-color: #fd723d;
	--primary-bright: #fd723d;
	/* kept for fills / glows */
	--primary-soft: #fdf4e3;
	--primary-deep: #000;
	--primary-label: #000;	/* 5.1:1 on white — for small amber text */

	/* --- new supporting tokens --- */
	--ink: #16130f;
	--ink-2: #3d372f;
	--muted-ink: #6d6459;
	--surface: #ffffff;
	--surface-2: #faf8f5;
	--surface-3: #f4f1ea;
	--hairline: #e7e1d7;

	--shadow-sm: 0 1px 2px rgba(22, 19, 15, .04);
	--shadow-md: 0 2px 4px rgba(22, 19, 15, .04), 0 10px 28px -12px rgba(22, 19, 15, .14);
	--shadow-lg: 0 4px 8px rgba(22, 19, 15, .05), 0 24px 56px -20px rgba(22, 19, 15, .20);

	--box-shadow: var(--shadow-md);
}


/*----------------------------------------------------------
  2. BASE
----------------------------------------------------------*/
html,
body {
	background: var(--surface);
	color: var(--ink);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--ink);
	letter-spacing: -.015em;
}

p {
	color: var(--muted-ink);
}

a {
	color: inherit;
}

::selection {
	background: var(--primary-bright);
	color: #1a1305;
}


/*----------------------------------------------------------
  3. SECTION RHYTHM
  Alternating white / warm off-white so the page reads as
  composed bands instead of one flat sheet.
----------------------------------------------------------*/
.roister-hm2-cta-section,
.roister-hm2-best-menus-section,
.roister-blog-section-2 {
	background-color: var(--surface);
}

.roister-hm2-fav-cat-section,
.roister-home-faq-section {
	background-color: var(--surface-2);
}

/* dark decorative art-boards replaced with light grounds */
.roister-photo-gallery-section {
	background-image: none !important;
	background-color: var(--surface-3) !important;
}

.roister-blog-section-2 {
	background-image: none !important;
	background-color: var(--surface) !important;
}

/* hairline separators between bands */
.roister-hm2-fav-cat-section,
.roister-photo-gallery-section,
.roister-home-faq-section,
.roister-blog-section-2 {
	border-top: 1px solid var(--hairline);
}


/*----------------------------------------------------------
  4. HEADER / NAV
----------------------------------------------------------*/
.roister-header,
.roister-header-area-1,
.header-btm {
	background-color: var(--surface);
}

.header-btm {
	border-bottom: 1px solid var(--hairline);
}

.main-menu ul li a {
	color: var(--ink);
	font-weight: 500;
}

.main-menu ul li a:hover,
.main-menu ul li:hover > a {
	color: var(--primary-color);
}

/* dropdown panels */
.main-menu ul li .submenu {
	background-color: var(--surface);
	border: 1px solid var(--hairline);
	box-shadow: var(--shadow-lg);
	border-radius: 12px;
	overflow: hidden;
}

.main-menu ul li .submenu li a {
	color: var(--ink-2);
}

.main-menu ul li .submenu li a:hover {
	background-color: var(--primary-soft);
	color: var(--primary-deep);
}

/* off-canvas / mobile drawer */
.offcanvas,
.offcanvas-header,
.offcanvas-body,
.roister-offcanvas {
	background-color: var(--surface) !important;
	color: var(--ink);
	z-index: 9999;
}

.offcanvas-header {
	border-bottom: 1px solid var(--hairline);
}

.btn-close,
.offcanvas .btn-close {
	filter: none;
	opacity: .75;
}

/* hamburger / icon buttons that were white-on-dark */
.header-btm .sidebar-btn span,
.mobile-menu-btn span,
.hamburger span {
	background-color: var(--ink) !important;
}


/*----------------------------------------------------------
  5. LOGO
  white-logo.png is pure white artwork — swapped in markup to
  colored-logo.png. This is a safety net in case any cached
  reference still points at the white file.
----------------------------------------------------------*/
img[src*="white-logo"] {
	filter: brightness(0) saturate(100%);
}


/*----------------------------------------------------------
  6. BANNER  (the bg.jpg promo strip)
  Overrides the second :root block declared near the end of
  style.css, then flips its dark scrim to a light one.
----------------------------------------------------------*/
:root {
	--bg: #ffffff;
	--text: #16130f;
	--muted: #6d6459;
	--amber: #c17a09;
	--amber-deep: #8f5a05;
}

.banner {
	background: var(--surface);
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}

/* light scrim so the photo fades into white behind the copy */
.banner-photo::after {
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 1) 0%,
			rgba(255, 255, 255, .96) 26%,
			rgba(255, 255, 255, .72) 46%,
			rgba(255, 255, 255, .12) 64%,
			rgba(255, 255, 255, .30) 100%) !important;
}

@media (max-width: 640px) {
	.banner-photo::after {
		background: linear-gradient(180deg,
				rgba(255, 255, 255, .45) 0%,
				rgba(255, 255, 255, .90) 52%,
				rgba(255, 255, 255, 1) 76%) !important;
	}
}

.headline {
	color: var(--ink);
}

.headline em {
	color: var(--primary-color);
}

.eyebrow {
	color: var(--primary-color);
}

.banner .desc,
.desc {
	color: var(--muted-ink);
}

/* amber pill CTA — kept bright, dark ink label */
.cta {
	background: var(--primary-bright);
	color: #1a1305;
	box-shadow: 0 10px 24px -10px rgba(193, 122, 9, .55);
}

.cta:hover {
	box-shadow: 0 16px 32px -10px rgba(193, 122, 9, .70);
}

.starburst {
	filter: drop-shadow(0 10px 18px rgba(22, 19, 15, .22));
}


/*----------------------------------------------------------
  7. CARDS & SURFACES
  Dark panels become white cards with hairline + soft shadow.
----------------------------------------------------------*/
.cta-card,
.cta-calling-card,
.about-feature,
.single-cat-card,
.fav-cat-card,
.menu-card,
.single-menu-card,
.blog-card,
.single-blog-card,
.faq-card,
.testimonial-card,
.single-team-card {
	background-color: var(--surface) !important;
	border: 1px solid var(--hairline);
	box-shadow: var(--shadow-sm);
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.cta-card:hover,
.cta-calling-card:hover,
.about-feature:hover,
.single-cat-card:hover,
.fav-cat-card:hover,
.menu-card:hover,
.single-menu-card:hover,
.blog-card:hover,
.single-blog-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
	border-color: rgba(193, 122, 9, .38);
}

/* the hand-written stat tiles near the top */
.about-feature {
	border: 1px solid var(--hairline) !important;
	background: var(--surface-2) !important;
}

.about-feature h4 {
	color: #16130f !important;
}

.about-feature span {
	color: var(--muted-ink) !important;
}


/*----------------------------------------------------------
  8. BUTTONS
----------------------------------------------------------*/
.primary-btn,
.roister-primary-btn,
.theme-btn {
	background-color: #16130f;
	color: #ffffff;
	border-color: #16130f;
	box-shadow: 0 10px 24px -12px rgb(0 0 0 / 55%);
}

.primary-btn:hover,
.roister-primary-btn:hover,
.theme-btn:hover {
	background-color: var(--primary-deep);
	border-color: var(--primary-deep);
	color: #ffffff;
}

/* outline / ghost buttons that were white-on-dark */
.secondary-btn,
.outline-btn {
	color: var(--ink);
	border: 1px solid var(--ink);
	background: transparent;
}

.secondary-btn:hover,
.outline-btn:hover {
	background: var(--ink);
	color: var(--surface);
}


/*----------------------------------------------------------
  9. FORMS
----------------------------------------------------------*/
input,
textarea,
select,
.nice-select {
	background-color: var(--surface) !important;
	color: var(--ink) !important;
	border: 1px solid var(--hairline) !important;
	border-radius: 10px;
}

input:focus,
textarea:focus,
select:focus,
.nice-select.open {
	border-color: var(--primary-color) !important;
	box-shadow: 0 0 0 3px rgba(193, 122, 9, .12) !important;
}

input::placeholder,
textarea::placeholder {
	color: #9c9287 !important;
	opacity: 1;
}

.nice-select .list {
	background-color: var(--surface);
	border: 1px solid var(--hairline);
	box-shadow: var(--shadow-lg);
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
	background-color: var(--primary-soft);
	color: var(--primary-deep);
}


/*----------------------------------------------------------
  10. FAQ / ACCORDION
----------------------------------------------------------*/
.accordion-item,
.faq-item {
	background-color: var(--surface) !important;
	border: 1px solid var(--hairline) !important;
	border-radius: 12px !important;
	margin-bottom: 14px;
	overflow: hidden;
}

.accordion-button {
	background-color: var(--surface) !important;
	color: var(--ink) !important;
	box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
	background-color: var(--primary-soft) !important;
	color: var(--primary-deep) !important;
}

.accordion-body {
	background-color: var(--surface) !important;
	color: var(--muted-ink) !important;
}

.accordion-button::after {
	filter: none;
}


/*----------------------------------------------------------
  11. FOOTER
----------------------------------------------------------*/
.roister-footer-1,
.roister-footer-2 {
	background-image: none !important;
	background-color: var(--surface-3) !important;
	border-top: 1px solid var(--hairline);
}

.roister-footer-2 .footer-widget h4,
.roister-footer-2 .footer-widget h5,
.roister-footer-2 .footer-widget h6 {
	color: var(--ink);
}

.roister-footer-2 .footer-widget p,
.roister-footer-2 .footer-widget a,
.roister-footer-2 .footer-widget li {
	color: var(--muted-ink);
}

.roister-footer-2 .footer-widget a:hover {
	color: var(--primary-color);
}

.copyright-area,
.footer-btm {
	border-top: 1px solid var(--hairline);
	color: var(--muted-ink);
}


/*----------------------------------------------------------
  12. HARD-CODED VALUES LEFT IN style.css
  (rgba white borders / black scrims that tokens can't reach)
----------------------------------------------------------*/

/* white hairlines -> ink hairlines */
.roister-footer-2 .footer-top,
.footer-widget .footer-menu li,
[class*="border-top"] {
	border-top-color: var(--hairline) !important;
}

[class*="border-bottom"] {
	border-bottom-color: var(--hairline) !important;
}

/* translucent white fills -> translucent ink fills */
.roister-header .search-wrap,
.video-play-btn,
.play-btn {
	background: rgba(22, 19, 15, .06) !important;
}

/* dark image scrims -> light image scrims */
.gallery-overlay,
.photo-gallery-overlay,
.img-overlay {
	background: rgba(255, 255, 255, .55) !important;
}


/*----------------------------------------------------------
  13. TICKER / MARQUEE
----------------------------------------------------------*/
.roister-ticker-wraper,
.ticker-wrap,
.marquee-wrap {
	background-image: none !important;
	background-color: var(--ink) !important;
}

.roister-ticker-wraper h2,
.roister-ticker-wraper h3,
.roister-ticker-wraper p,
.ticker-wrap h2,
.marquee-wrap h2 {
	color: var(--surface) !important;
}


/*----------------------------------------------------------
  14. SCROLLBAR & CURSOR
----------------------------------------------------------*/
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--surface-2);
}

::-webkit-scrollbar-thumb {
	background: #d8d0c4;
	border-radius: 10px;
	border: 2px solid var(--surface-2);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--primary-color);
}

/* custom cursor dots were white — invisible on white */
#cursor,
#cursor2,
#cursor3 {
	mix-blend-mode: normal;
}

#cursor2,
#cursor3 {
	border-color: var(--primary-color) !important;
}

#cursor .ball,
#cursor2 .ball {
	background-color: var(--primary-color) !important;
}


/*----------------------------------------------------------
  15. PREMIUM POLISH
----------------------------------------------------------*/

/* softer, more expensive image corners + lift */
.reveal-img img,
.gallery-img img,
.blog-card img,
.single-blog-card img {
	border-radius: 14px;
}

/* section eyebrow labels */
.section-subtitle,
.sub-title,
.section-title span {
	color: #16130f;
	/* letter-spacing: .22em; */
	/* text-transform: uppercase; */
}

/* keep the WhatsApp bubble readable */
.contact_icon {
	box-shadow: 0 8px 20px -6px rgba(22, 19, 15, .28);
}

/* preloader, if it paints black */
.preloader,
#preloader {
	background-color: var(--surface) !important;
}


/*==========================================================
  16. POST-AUDIT FIXES
  Found by rendering the page and measuring computed
  contrast on every text node. These are values hard-coded
  deep inside style.css that the token re-map can't reach.
==========================================================*/

/* --- the copyright bar was painted #000000 (style.css:2949)
       leaving ink-on-black at 1.13:1 — effectively invisible --- */
.roister-footer-2 .copyright-area,
.roister-footer-1 .copyright-area {
	background-color: var(--surface-3) !important;
	border-top: 1px solid var(--hairline) !important;
}

.roister-footer-2 .copyright-area p,
.roister-footer-1 .copyright-area p,
.roister-footer-2 .copyright-area .copy-right-menu li a {
	color: var(--muted-ink) !important;
}

.roister-footer-2 .copyright-area p a {
	color: var(--primary-color) !important;
}

.roister-footer-2 .copyright-area p a:hover {
	color: var(--primary-deep) !important;
}

/* --- mobile drawer header was #131313 (style.css:3683) --- */
.roister-mobile-menu-offcanvas .offcanvas-header {
	background: var(--surface) !important;
	border-bottom: 1px solid var(--hairline);
}

/* --- gallery images had a 5px WHITE frame (style.css:4999):
       invisible now, so it becomes a hairline + soft lift --- */
.roister-single-gallery img {
	border: 1px solid var(--hairline) !important;
	border-radius: 14px;
	box-shadow: var(--shadow-md);
}

/* --- dark teal event tile (style.css:7746) --- */
.roister-hm2-upcoming-event-section .right-side .events-wraper .single-event-wraper .event {
	background: var(--surface-2) !important;
	border: 1px solid var(--hairline);
}

/* --- white rating text (style.css:9275) --- */
.roister-addto-cart-wraper .roister-addto-cart-content .ratings-wraper span {
	color: var(--ink) !important;
}

/* --- review cards used var(--dark-color) for TEXT (style.css:9535/9543).
       That token now resolves to white, so it must be re-pointed
       at ink or the copy disappears on other pages. --- */
.review-content .star-area .rating-box .title,
.review-content .star-area .rating-box .des {
	color: var(--ink) !important;
}

/* --- eyebrow / label type: #c17a09 only reached 3.3–3.5:1 at
       these small sizes. Deepened to 5.1:1 while staying gold. --- */
.section-subtitle,
.sub-title,
.blog-card .blog-meta a,
.single-blog-card .blog-meta a,
.blog-cat,
.post-cat {
	color: var(--primary-label) !important;
}

/* --- two stragglers caught on the second audit pass:
       the blog category link and the credit link in the
       copyright bar were still inheriting the lighter gold --- */
.cate-link,
.cate-link a,
.roister-footer-2 .copyright-area p a,
.roister-footer-1 .copyright-area p a {
	color: var(--primary-label) !important;
}

.cate-link a:hover,
.roister-footer-2 .copyright-area p a:hover {
	color: var(--primary-deep) !important;
}

/* --- Mobile-only stragglers.
       The --fz-* scale shrinks on small screens, so amber text
       that qualified as "large" (>=24px, needing 3:1) on desktop
       drops to 20px on mobile and needs the full 4.5:1.
       Deepened here rather than globally so amber FILLS stay
       identical across breakpoints. --- */
.roister-hm2-best-menus-section .left-side .link,
.roister-hm2-best-menus-section .menu-list .single-menu-list .price-wraper .price,
.roister-hm2-best-menus-section .right-side p {
	color: var(--primary-label) !important;
}
.roister-single-gallery img{
	height:300px;
	width:100%;
	object-fit:cover;
}