/*!
Theme Name: BRGER-ioapp
Theme URI: https://ioapp.io/
Author: ioapp.io
Author URI: https://ioapp.io/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: BRGER-ioapp
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

BRGER-ioapp is based on BRGER-ioapp https://ioapp.io/, (C) 2012-2020 Automattic, Inc.
BRGER-ioapp is distributed IOAPP the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Branding
--------------------------------------------------------------*/

/* Color System
--------------------------------------------- */

/*
 * COFFEE IOAPP — COLOR PALETTE
 *
 * Usage guide:
 *   --color-primary-*    Coffee browns (main brand identity)
 *   --color-secondary-*  Forest greens (supporting elements, icons, badges)
 *   --color-accent-*     Warm golds (CTAs, highlights, hover states)
 *   --color-neutral-*    Warm grays/creams (backgrounds, borders, dividers)
 *   --color-text-*       Text on various backgrounds
 *
 * WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text (18px+ or 14px+ bold).
 * Verified passing combinations are marked ✓ AA or ✓ AAA below.
 */

:root {

	/* --- Primary: Coffee Browns --- */
	--color-primary-900: #3B1A08;    /* hsl(22, 68%, 13%)  Espresso */
	--color-primary-800: #5C2C0F;    /* hsl(22, 68%, 21%)  Dark Roast */
	--color-primary-700: #7A3A13;    /* hsl(22, 70%, 28%)  French Press */
	--color-primary:     #8B4513;    /* hsl(25, 75%, 31%)  Saddle Brown — brand anchor */
	--color-primary-500: #A0521A;    /* hsl(25, 73%, 36%)  Medium Roast */
	--color-primary-400: #D2691E;    /* hsl(25, 75%, 47%)  Chocolate */
	--color-primary-300: #E08B50;    /* hsl(25, 65%, 60%)  Light Roast */
	--color-primary-200: #EBB589;    /* hsl(25, 60%, 73%)  Latte */
	--color-primary-100: #F5D9C2;    /* hsl(25, 70%, 86%)  Oat Milk */
	--color-primary-50:  #FBF0E8;    /* hsl(25, 70%, 95%)  Barely There */

	/* --- Secondary: Forest Greens --- */
	--color-secondary-dark:  #1A6B1A; /* hsl(120, 61%, 26%)  Dark Forest */
	--color-secondary:       #228B22; /* hsl(120, 61%, 34%)  Forest Green */
	--color-secondary-light: #4CAF50; /* hsl(123, 43%, 49%)  Sage */
	--color-secondary-pale:  #D4EDDA; /* hsl(134, 41%, 88%)  Mint Tint */

	/* --- Accent: Warm Golds --- */
	--color-accent-dark:  #B8860B;   /* hsl(43, 89%, 38%)   Dark Goldenrod */
	--color-accent:       #DAA520;   /* hsl(43, 74%, 49%)   Goldenrod — CTAs */
	--color-accent-light: #F0C040;   /* hsl(43, 84%, 60%)   Honey */
	--color-accent-pale:  #FBF0C0;   /* hsl(48, 90%, 87%)   Champagne */

	/* --- Neutrals: Warm Creams & Grays --- */
	--color-white:        #FFFFFF;   /* hsl(0, 0%, 100%) */
	--color-cream-50:     #FFF8DC;   /* hsl(48, 100%, 93%)  Cornsilk */
	--color-cream-100:    #F5F5DC;   /* hsl(60, 56%, 91%)   Beige */
	--color-cream-200:    #EDE8D0;   /* hsl(48, 43%, 87%)   Warm Linen */
	--color-neutral-300:  #D4CCBB;   /* hsl(42, 22%, 78%)   Greige */
	--color-neutral-400:  #B8AC9A;   /* hsl(38, 15%, 66%)   Warm Stone */
	--color-neutral-500:  #8B7D6B;   /* hsl(33, 13%, 48%)   Driftwood */
	--color-neutral-600:  #6B5D4F;   /* hsl(25, 15%, 36%)   Bark */
	--color-neutral-700:  #4A3728;   /* hsl(25, 30%, 22%)   Dark Bark */
	--color-charcoal:     #2D2020;   /* hsl(0, 17%, 15%)    Warm Charcoal */
	--color-black:        #1A1008;   /* hsl(30, 50%, 7%)    Deep Espresso */

	/* --- Text Colors --- */
	/* ✓ AAA: --color-text-primary on --color-white / --color-cream-50 / --color-cream-100 */
	--color-text-primary:    #2D2020; /* Body text on light backgrounds */
	/* ✓ AA:  --color-text-secondary on --color-white */
	--color-text-secondary:  #6B5D4F; /* Supporting text, captions */
	--color-text-muted:      #8B7D6B; /* Placeholders, disabled states */
	/* ✓ AA:  --color-text-on-dark on --color-primary / --color-primary-700+ */
	--color-text-on-dark:    #FFF8DC; /* Text on brown/dark backgrounds */
	/* ✓ AAA: --color-text-on-light is --color-text-primary */
	--color-text-on-accent:  #2D2020; /* Text on gold accent backgrounds */
	/* ✓ AA:  --color-text-on-secondary on --color-secondary-dark */
	--color-text-on-secondary: #FFFFFF;

	/* --- Interactive States --- */
	--color-link:           #8B4513; /* Default link */
	--color-link-hover:     #D2691E; /* Link hover — lighter, warmer */
	--color-link-visited:   #6B5D4F; /* Visited link */
	--color-link-focus:     #DAA520; /* Focus ring accent */

	--color-btn-primary-bg:        #8B4513;
	--color-btn-primary-bg-hover:  #D2691E;
	--color-btn-primary-text:      #FFF8DC;
	--color-btn-secondary-bg:      #228B22;
	--color-btn-secondary-bg-hover:#1A6B1A;
	--color-btn-secondary-text:    #FFFFFF;
	--color-btn-accent-bg:         #DAA520;
	--color-btn-accent-bg-hover:   #B8860B;
	--color-btn-accent-text:       #2D2020;

	/* --- Borders & Dividers --- */
	--color-border:        #D4CCBB;
	--color-border-dark:   #B8AC9A;
	--color-border-focus:  #DAA520; /* Focus ring on inputs */

	/* --- Backgrounds --- */
	--color-bg-site:       #FFFFFF;
	--color-bg-warm:       #FFF8DC; /* Cornsilk — section alternates */
	--color-bg-subtle:     #F5F5DC; /* Beige — cards, sidebars */
	--color-bg-dark:       #2D2020; /* Footer, hero overlays */

	/* --- Semantic --- */
	--color-success:       #228B22;
	--color-success-light: #D4EDDA;
	--color-warning:       #DAA520;
	--color-warning-light: #FBF0C0;
	--color-error:         #C0392B;
	--color-error-light:   #FADBD8;
	--color-info:          #2980B9;
	--color-info-light:    #D6EAF8;
}

/* Typography System
--------------------------------------------- */

/*
 * FONT PAIRING
 *   Display/Headings : Playfair Display — editorial serif with artisanal warmth
 *   Body/UI          : Lato — clean humanist sans-serif, warm and highly readable
 *
 * MODULAR SCALE — Major Third (×1.25), base 1rem = 16px
 *   --text-xs   0.64rem  ≈ 10px  hours, legal, tiny labels
 *   --text-sm   0.80rem  ≈ 13px  captions, meta, prices
 *   --text-base 1.00rem    16px  body copy
 *   --text-md   1.25rem    20px  intro paragraphs, large UI
 *   --text-lg   1.56rem  ≈ 25px  h4, sub-headings, menu titles
 *   --text-xl   1.95rem  ≈ 31px  h3
 *   --text-2xl  2.44rem  ≈ 39px  h2
 *   --text-3xl  3.05rem  ≈ 49px  h1
 *   --text-4xl  fluid    40–61px hero / display
 */
:root {

	/* Font Stacks */
	--font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono:    monaco, consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace;

	/* Modular Scale */
	--text-xs:   0.64rem;
	--text-sm:   0.8rem;
	--text-base: 1rem;
	--text-md:   1.25rem;
	--text-lg:   1.563rem;
	--text-xl:   1.953rem;
	--text-2xl:  2.441rem;
	--text-3xl:  3.052rem;
	--text-4xl:  clamp(2.5rem, 5vw + 1rem, 3.815rem); /* fluid 40–61px */

	/* Line Heights */
	--leading-tight:   1.1;   /* display headings */
	--leading-snug:    1.25;  /* h2–h4 */
	--leading-normal:  1.4;   /* menu items, UI labels */
	--leading-relaxed: 1.65;  /* body copy */
	--leading-loose:   1.8;   /* long-form blog posts */

	/* Letter Spacing */
	--tracking-tight:   -0.025em; /* large headings */
	--tracking-normal:   0em;
	--tracking-wide:     0.04em;  /* sub-headings */
	--tracking-widest:   0.12em;  /* all-caps labels, h5/h6 */

	/* Font Weights */
	--weight-light:   300;
	--weight-regular: 400;
	--weight-bold:    700;
	--weight-black:   900;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-regular);
	line-height: var(--leading-relaxed);
}

/* Headings: Playfair Display for h1–h4, Lato for h5–h6 */
h1,
h2,
h3,
h4 {
	clear: both;
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-primary);
	margin-top: 0;
	margin-bottom: 0.5em;
}

h5,
h6 {
	clear: both;
	font-family: var(--font-body);
	font-weight: var(--weight-bold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin-top: 0;
	margin-bottom: 0.5em;
}

h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }
h5 { font-size: var(--text-sm);  }
h6 { font-size: var(--text-xs);  }

/* Scale headings down on small screens */
@media screen and (max-width: 599px) {
	h1 { font-size: var(--text-2xl); }
	h2 { font-size: var(--text-xl);  }
	h3 { font-size: var(--text-lg);  }
	h4 { font-size: var(--text-md);  }
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: var(--color-cream-100);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: var(--color-bg-site);
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--color-link);
}

a:visited {
	color: var(--color-link-visited);
}

a:hover,
a:focus,
a:active {
	color: var(--color-link-hover);
}

a:focus {
	outline: thin dotted;
	outline-color: var(--color-link-focus);
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid var(--color-border-dark);
	border-radius: 3px;
	background: var(--color-btn-primary-bg);
	color: var(--color-btn-primary-text);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: var(--color-btn-primary-bg-hover);
	border-color: var(--color-primary-400);
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: var(--color-border-focus);
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border);
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: var(--color-text-primary);
	border-color: var(--color-border-focus);
	outline: 2px solid var(--color-border-focus);
	outline-offset: 0;
}

select {
	border: 1px solid var(--color-border);
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Site Header & Navigation
--------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 2px 16px rgba(45, 32, 32, 0.1);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	min-height: 72px;
}

/* Branding */
.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.custom-logo-link {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.custom-logo {
	display: block;
	height: 48px;
	width: auto;
	max-width: 180px;
}

.site-identity {
	display: flex;
	flex-direction: column;
}

.site-title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	margin: 0;
}

.site-title a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.site-title a:hover,
.site-title a:focus {
	color: var(--color-primary-400);
}

.site-description {
	font-size: var(--text-xs);
	font-weight: var(--weight-regular);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0;
}

/* Hamburger toggle */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	border-radius: 4px;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease;
}

.menu-toggle:hover {
	background-color: var(--color-cream-100);
}

.menu-toggle:focus {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
}

.hamburger {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.hamburger span {
	display: block;
	height: 2px;
	background-color: var(--color-primary);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
	transform-origin: center;
}

/* Animate hamburger → × when open */
.main-navigation.toggled .hamburger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.main-navigation.toggled .hamburger span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.main-navigation.toggled .hamburger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Navigation */
.main-navigation {
	display: flex;
	align-items: center;
}

.main-navigation ul {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Top-level links */
#primary-menu > li > a {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-text-primary);
	padding: 0.625rem 0.875rem;
	transition: color 0.15s ease;
	white-space: nowrap;
}

#primary-menu > li > a:hover,
#primary-menu > li > a:focus {
	color: var(--color-primary);
}

#primary-menu > li.current-menu-item > a,
#primary-menu > li.current-menu-ancestor > a {
	color: var(--color-primary);
	position: relative;
}

/* Gold underline on active page */
#primary-menu > li.current-menu-item > a::after,
#primary-menu > li.current-menu-ancestor > a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0.875rem;
	right: 0.875rem;
	height: 2px;
	background-color: var(--color-accent);
	border-radius: 1px;
}

/* Dropdown submenus */
.main-navigation ul ul {
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 0;
	z-index: 99999;
	min-width: 210px;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(45, 32, 32, 0.12);
	padding: 0.375rem 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.main-navigation ul ul ul {
	top: -0.375rem;
	left: 100%;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation ul ul a {
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
	color: var(--color-text-secondary);
	padding: 0.5rem 1rem;
	transition: background-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
	background-color: var(--color-cream-50);
	color: var(--color-primary);
}

/* Mobile: max-width 599px */
@media screen and (max-width: 37.4375em) {

	.header-inner {
		flex-wrap: wrap;
		padding: 0.875rem 1.25rem;
		min-height: auto;
	}

	.site-branding {
		flex: 1;
	}

	.custom-logo {
		height: 36px;
	}

	.menu-toggle {
		display: flex;
	}

	.main-navigation {
		order: 3;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.main-navigation ul {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		padding: 0.25rem 0 0.75rem;
		border-top: 1px solid var(--color-border);
	}

	.main-navigation.toggled ul {
		display: flex;
	}

	#primary-menu > li > a {
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--color-cream-200);
	}

	#primary-menu > li.current-menu-item > a::after,
	#primary-menu > li.current-menu-ancestor > a::after {
		display: none;
	}

	/* Submenus expand inline on mobile */
	.main-navigation ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		border-radius: 0;
		background-color: var(--color-cream-50);
		padding: 0;
		min-width: 0;
	}

	.main-navigation ul ul a {
		padding: 0.6rem 1.25rem;
		border-bottom: 1px solid var(--color-cream-200);
	}
}

/* Desktop: min-width 600px */
@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

/* Buttons
--------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.75rem 1.5rem;
	border-radius: 4px;
	border: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(45, 32, 32, 0.15);
}

.btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.btn--lg {
	font-size: var(--text-sm);
	padding: 1rem 2rem;
}

.btn--primary {
	background-color: var(--color-btn-primary-bg);
	color: var(--color-btn-primary-text);
	border-color: var(--color-btn-primary-bg);
}

.btn--primary:hover,
.btn--primary:focus {
	background-color: var(--color-btn-primary-bg-hover);
	border-color: var(--color-btn-primary-bg-hover);
	color: var(--color-btn-primary-text);
}

.btn--accent {
	background-color: var(--color-btn-accent-bg);
	color: var(--color-btn-accent-text);
	border-color: var(--color-btn-accent-bg);
}

.btn--accent:hover,
.btn--accent:focus {
	background-color: var(--color-btn-accent-bg-hover);
	border-color: var(--color-btn-accent-bg-hover);
	color: var(--color-btn-accent-text);
}

.btn--outline-light {
	background-color: transparent;
	color: var(--color-text-on-dark);
	border-color: rgba(255, 248, 220, 0.6);
}

.btn--outline-light:hover,
.btn--outline-light:focus {
	background-color: rgba(255, 248, 220, 0.12);
	border-color: var(--color-text-on-dark);
	color: var(--color-text-on-dark);
}

.btn--outline-dark {
	background-color: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn--outline-dark:hover,
.btn--outline-dark:focus {
	background-color: var(--color-primary);
	color: var(--color-text-on-dark);
	border-color: var(--color-primary);
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

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

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/* Site Footer
--------------------------------------------- */

.site-footer {
	background-color: var(--color-bg-dark);
	color: var(--color-text-on-dark);
}

/* Shared inner container */
.footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* 4-column widget grid */
.footer-widgets {
	padding: 4rem 0 3rem;
	border-bottom: 1px solid rgba(255, 248, 220, 0.1);
}

.footer-widgets .footer-inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 3rem 2rem;
	align-items: start;
}

/* Widget + section headings */
.footer-widget-title,
.site-footer .widget-title {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 1.25rem;
}

/* --- Col 1: About --- */
.footer-about-default .custom-logo {
	display: block;
	height: 48px;
	width: auto;
	opacity: 0.85;
	filter: brightness(0) invert(1);
	margin-bottom: 0.875rem;
}

.footer-site-name {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	margin: 0 0 0.375rem;
}

.footer-site-name a {
	color: var(--color-text-on-dark);
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer-site-name a:hover {
	color: var(--color-accent-light);
}

.footer-tagline {
	font-size: var(--text-sm);
	color: var(--color-neutral-500);
	line-height: var(--leading-relaxed);
	margin: 0;
}

/* --- Col 2: Contact & Hours --- */
.footer-address,
.footer-phone,
.footer-email {
	font-style: normal;
	font-size: var(--text-sm);
	color: var(--color-neutral-400);
	line-height: var(--leading-relaxed);
	margin: 0 0 0.5rem;
}

.footer-contact-info a {
	color: var(--color-neutral-400);
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer-contact-info a:hover {
	color: var(--color-accent-light);
}

.footer-hours {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 248, 220, 0.1);
}

.footer-hours-title {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 0.625rem;
}

.footer-hours p {
	font-size: var(--text-xs);
	color: var(--color-neutral-500);
	line-height: var(--leading-normal);
	margin: 0 0 0.25rem;
}

/* --- Col 3: Navigation --- */
.footer-nav-list,
.site-footer .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-nav-list li,
.site-footer .widget li {
	margin-bottom: 0.625rem;
}

.footer-nav-list a,
.site-footer .widget a {
	font-size: var(--text-sm);
	color: var(--color-neutral-400);
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer-nav-list a:hover,
.site-footer .widget a:hover {
	color: var(--color-accent-light);
}

/* --- Col 4: Social icons --- */
.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(255, 248, 220, 0.08);
	color: var(--color-neutral-400);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.social-links a:hover {
	background-color: var(--color-accent);
	color: var(--color-text-on-accent);
	transform: translateY(-2px);
}

/* General widget styles in footer */
.site-footer .widget {
	margin: 0;
}

.site-footer .widget p {
	font-size: var(--text-sm);
	color: var(--color-neutral-400);
	line-height: var(--leading-relaxed);
	margin-bottom: 0.75rem;
}

.site-footer .widget p:last-child {
	margin-bottom: 0;
}

/* --- Bottom bar --- */
.footer-bottom {
	padding: 1.25rem 0;
}

.footer-bottom .footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.copyright {
	font-size: var(--text-xs);
	color: var(--color-neutral-600);
	margin: 0;
	line-height: var(--leading-normal);
}

.copyright a {
	color: var(--color-neutral-500);
	text-decoration: none;
	transition: color 0.15s ease;
}

.copyright a:hover {
	color: var(--color-accent-light);
}

.footer-legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-legal-list a {
	font-size: var(--text-xs);
	color: var(--color-neutral-600);
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer-legal-list a:hover {
	color: var(--color-accent-light);
}

/* Footer responsive */
@media screen and (max-width: 59.9375em) {

	.footer-widgets .footer-inner {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem 3rem;
	}
}

@media screen and (max-width: 37.4375em) {

	.footer-widgets {
		padding: 2.5rem 0 2rem;
	}

	.footer-inner {
		padding: 0 1.25rem;
	}

	.footer-widgets .footer-inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-bottom .footer-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}

/*--------------------------------------------------------------
# Front Page
--------------------------------------------------------------*/

/* Shared section styles */
.fp-section {
	padding: 5rem 0;
}

.fp-section__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.fp-section__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 3.5rem;
}

.fp-section__title {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-primary);
	margin: 0 0 0.75rem;
}

.fp-section__subtitle {
	font-size: var(--text-md);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin: 0;
}

/* Hero
--------------------------------------------- */
.fp-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background-color: var(--color-primary-900);
	background-size: cover;
	background-position: center;
}

.fp-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(45, 32, 32, 0.9) 0%,
		rgba(139, 69, 19, 0.55) 55%,
		rgba(45, 32, 32, 0.45) 100%
	);
}

.fp-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 6rem 2rem 5rem;
	width: 100%;
}

.fp-hero__headline {
	font-size: var(--text-4xl);
	font-weight: var(--weight-black);
	color: var(--color-text-on-dark);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	max-width: 14ch;
	margin: 0 0 1.25rem;
}

.fp-hero__subtext {
	font-size: var(--text-md);
	color: rgba(255, 248, 220, 0.85);
	line-height: var(--leading-relaxed);
	max-width: 50ch;
	margin: 0 0 2.5rem;
}

.fp-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.fp-hero__scroll {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	color: rgba(255, 248, 220, 0.5);
	text-decoration: none;
	transition: color 0.2s ease;
	animation: heroScrollBounce 2s ease-in-out infinite;
}

.fp-hero__scroll:hover {
	color: var(--color-accent);
}

@keyframes heroScrollBounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%       { transform: translateX(-50%) translateY(6px); }
}

/* Our Story
--------------------------------------------- */
.fp-story {
	background-color: var(--color-cream-50);
}

.fp-story__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.fp-story__inner--no-image {
	grid-template-columns: 1fr;
	max-width: 760px;
}

.fp-story__image {
	overflow: hidden;
	border-radius: 8px;
}

.story-img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.fp-story__image:hover .story-img {
	transform: scale(1.03);
}

.fp-story__title {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-primary);
	margin: 0 0 1.25rem;
}

.fp-story__text {
	font-size: var(--text-md);
	color: var(--color-text-secondary);
	line-height: var(--leading-loose);
	margin-bottom: 2rem;
}

.fp-story__text p:last-child {
	margin-bottom: 0;
}

/* Find Us — Section 3A
--------------------------------------------- */
.fp-location {
	background-color: var(--color-white);
}

.fp-location__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 3rem;
	align-items: center;
}

.fp-location__eyebrow {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-accent-600);
	margin: 0 0 0.625rem;
}

.fp-location__title {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-primary);
	margin: 0 0 1.25rem;
}

.fp-location__address {
	font-style: normal;
	font-size: var(--text-base);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin: 0 0 1.5rem;
}

.fp-location__details {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.fp-location__details li {
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.fp-location__detail-label {
	font-weight: var(--weight-bold);
	color: var(--color-text-primary);
	min-width: 4rem;
}

.fp-location__details a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.fp-location__details a:hover {
	color: var(--color-primary-400);
}

.fp-location__graphic {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.fp-location__pin {
	width: 200px;
	height: 200px;
	opacity: 0.85;
}

/* Opening Hours — Section 3B
--------------------------------------------- */
.fp-hours {
	background-color: var(--color-cream-50);
	border-top: 1px solid var(--color-cream-200);
	border-bottom: 1px solid var(--color-cream-200);
}

.fp-hours__inner {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
}

.fp-hours__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background-color: var(--color-white);
	border: 1px solid var(--color-cream-200);
	color: var(--color-primary);
	margin-bottom: 1.5rem;
}

.fp-hours__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-primary);
	margin: 0 0 2rem;
}

.fp-hours__rows {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.fp-hours__row {
	font-size: var(--text-lg);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin: 0;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--color-cream-200);
}

.fp-hours__row:first-child {
	border-top: 1px solid var(--color-cream-200);
}

/* The Atmosphere — Section 3C
--------------------------------------------- */
.fp-atmosphere {
	background-color: var(--color-primary-100);
}

.fp-atmosphere__inner {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.fp-atmosphere__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-text-on-dark);
	margin-bottom: 1.5rem;
}

.fp-atmosphere__title {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--color-primary-900);
	margin: 0 0 1.25rem;
}

.fp-atmosphere__text {
	font-size: var(--text-xl);
	color: var(--color-text-primary);
	line-height: var(--leading-relaxed);
	font-style: italic;
	margin: 0 0 1rem;
}

.fp-atmosphere__subtext {
	font-size: var(--text-base);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin: 0;
}

/* Testimonials
--------------------------------------------- */
.fp-testimonials {
	background-color: var(--color-bg-dark);
	color: var(--color-text-on-dark);
}

.fp-testimonials .fp-section__title {
	color: var(--color-text-on-dark);
}

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.testimonial-card {
	background-color: rgba(255, 248, 220, 0.05);
	border: 1px solid rgba(255, 248, 220, 0.1);
	border-radius: 8px;
	padding: 2rem;
	position: relative;
	transition: background-color 0.2s ease;
}

.testimonial-card:hover {
	background-color: rgba(255, 248, 220, 0.08);
}

.testimonial-card::before {
	content: '\201C';
	font-family: var(--font-display);
	font-size: 5rem;
	line-height: 1;
	color: var(--color-accent);
	opacity: 0.3;
	position: absolute;
	top: 0.5rem;
	left: 1.5rem;
	pointer-events: none;
}

.testimonial-card__quote {
	margin: 0 0 1.5rem;
	padding-top: 2.5rem;
}

.testimonial-card__quote p {
	font-size: var(--text-sm);
	color: rgba(255, 248, 220, 0.85);
	line-height: var(--leading-loose);
	font-style: italic;
	margin: 0;
}

.testimonial-card__author {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 248, 220, 0.1);
}

.testimonial-card__name {
	font-style: normal;
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	color: var(--color-accent-light);
}

.testimonial-card__role {
	font-size: var(--text-xs);
	color: var(--color-neutral-500);
	letter-spacing: var(--tracking-wide);
}

/* Blog Posts
--------------------------------------------- */
.fp-blog {
	background-color: var(--color-cream-100);
}

.fp-blog__footer {
	text-align: center;
	margin-top: 3rem;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.blog-card {
	background-color: var(--color-white);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: 0 2px 8px rgba(45, 32, 32, 0.06);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(45, 32, 32, 0.12);
}

.blog-card__thumbnail {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.blog-card:hover .blog-card__img {
	transform: scale(1.05);
}

.blog-card__body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	flex: 1;
}

.blog-card__meta {
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0;
}

.blog-card__title {
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	margin: 0;
}

.blog-card__title a {
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.blog-card__title a:hover {
	color: var(--color-primary);
}

.blog-card__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin: 0;
	flex: 1;
}

.blog-card__link {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
	align-self: flex-start;
	transition: color 0.15s ease;
}

.blog-card__link:hover {
	color: var(--color-primary-400);
}

/* CTA Banner
--------------------------------------------- */
.fp-cta-banner {
	background-color: var(--color-primary);
	background-image: radial-gradient(
		ellipse at center,
		var(--color-primary-500) 0%,
		var(--color-primary-900) 100%
	);
	padding: 6rem 0;
	text-align: center;
}

.fp-cta-banner__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 2rem;
}

.fp-cta-banner__title {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	color: var(--color-text-on-dark);
	letter-spacing: var(--tracking-tight);
	margin: 0 0 1rem;
}

.fp-cta-banner__subtitle {
	font-size: var(--text-md);
	color: rgba(255, 248, 220, 0.8);
	line-height: var(--leading-relaxed);
	margin: 0 0 2.25rem;
}

/* Front page responsive
--------------------------------------------- */

/* Tablet: 600px – 959px */
@media screen and (max-width: 59.9375em) {

	.fp-story__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.story-img {
		height: 360px;
	}

	.fp-location__inner {
		grid-template-columns: 1fr;
	}

	.fp-location__graphic {
		display: none;
	}

	.testimonials-grid {
		grid-template-columns: 1fr 1fr;
	}

	.blog-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Mobile: < 600px */
@media screen and (max-width: 37.4375em) {

	.fp-section {
		padding: 3rem 0;
	}

	.fp-section__inner {
		padding: 0 1.25rem;
	}

	.fp-section__header {
		margin-bottom: 2.5rem;
	}

	.fp-hero {
		min-height: 90vh;
	}

	.fp-hero__inner {
		padding: 5rem 1.25rem 4rem;
	}

	.fp-hero__ctas {
		flex-direction: column;
		align-items: flex-start;
	}

	.fp-story__inner {
		grid-template-columns: 1fr;
	}

	.story-img {
		height: 280px;
	}

	.testimonials-grid,
	.blog-grid {
		grid-template-columns: 1fr;
	}

	.fp-hours__row {
		font-size: var(--text-base);
	}

	.fp-atmosphere__text {
		font-size: var(--text-lg);
	}

	.fp-cta-banner {
		padding: 4rem 0;
	}
}

/*--------------------------------------------------------------
# Pages
--------------------------------------------------------------*/

/* Page hero header
--------------------------------------------- */
.page-hero {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	min-height: 280px;
	background-color: var(--color-cream-50);
	background-size: cover;
	background-position: center;
}

.page-hero--has-image {
	min-height: 380px;
}

.page-hero--plain {
	border-bottom: 1px solid var(--color-cream-200);
}

.page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(45, 32, 32, 0.55), rgba(45, 32, 32, 0.70));
}

.page-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
	padding: 3rem 1.5rem;
}

/* Breadcrumb */
.page-breadcrumb {
	margin-bottom: 0.875rem;
}

.page-breadcrumb__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--text-xs);
}

.page-hero--plain .page-breadcrumb__list {
	color: var(--color-text-muted);
}

.page-hero--has-image .page-breadcrumb__list {
	color: rgba(255, 248, 220, 0.75);
}

.page-breadcrumb__list a {
	text-decoration: none;
	transition: color 0.15s ease;
}

.page-hero--plain .page-breadcrumb__list a {
	color: var(--color-text-muted);
}

.page-hero--plain .page-breadcrumb__list a:hover {
	color: var(--color-primary);
}

.page-hero--has-image .page-breadcrumb__list a {
	color: rgba(255, 248, 220, 0.75);
}

.page-hero--has-image .page-breadcrumb__list a:hover {
	color: var(--color-text-on-dark);
}

.page-breadcrumb__list li:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 260px;
}

/* Page title */
.page-hero__title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.15;
	margin: 0;
}

.page-hero--plain .page-hero__title {
	color: var(--color-text-primary);
}

.page-hero--has-image .page-hero__title {
	color: var(--color-text-on-dark);
}

/* Page content area
--------------------------------------------- */
.page-content-wrap {
	max-width: 860px;
	margin: 0 auto;
	padding: 3.5rem 1.5rem 5rem;
}

.page-content {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text-primary);
}

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

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

/* Admin edit link */
.page-edit-footer {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-cream-200);
}

.page-edit-footer .edit-link a {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.page-edit-footer .edit-link a:hover {
	color: var(--color-primary);
}

/* Responsive: Pages
--------------------------------------------- */
@media screen and (max-width: 37.4375em) {
	.page-hero {
		min-height: 200px;
	}

	.page-hero--has-image {
		min-height: 260px;
	}

	.page-content-wrap {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
		padding-top: 2.5rem;
	}
}

/*--------------------------------------------------------------
# Single Post
--------------------------------------------------------------*/

/* Layout
--------------------------------------------- */
.single-post {
	background-color: var(--color-white);
}

.single-hero {
	width: 100%;
	height: 480px;
	overflow: hidden;
	position: relative;
}

.single-hero__image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease;
}

.single-post__wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
}

/* Breadcrumb
--------------------------------------------- */
.single-breadcrumb {
	margin-bottom: 1.5rem;
}

.single-breadcrumb__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.single-breadcrumb__list li:last-child {
	color: var(--color-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

.single-breadcrumb__list a {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.single-breadcrumb__list a:hover {
	color: var(--color-primary);
}

/* Post header
--------------------------------------------- */
.single-post__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.single-post__cat-badge {
	display: inline-block;
	padding: 0.25rem 0.875rem;
	background-color: var(--color-primary-100);
	color: var(--color-primary);
	border-radius: 100px;
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.single-post__cat-badge:hover {
	background-color: var(--color-primary);
	color: var(--color-text-on-dark);
}

.single-post__title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	line-height: 1.2;
	color: var(--color-text-primary);
	margin: 0 0 1.25rem;
}

.single-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.125rem;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--color-cream-200);
	margin-bottom: 2.5rem;
}

.single-post__meta-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.single-post__meta-item svg {
	flex-shrink: 0;
	opacity: 0.6;
}

.single-post__meta-item a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.single-post__meta-item a:hover {
	color: var(--color-primary);
}

/* Post content (entry-content)
--------------------------------------------- */
.single-post__content {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text-primary);
}

.single-post__content p,
.single-post__content ul,
.single-post__content ol {
	margin: 0 0 1.5rem;
}

.single-post__content h2,
.single-post__content h3,
.single-post__content h4 {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-primary);
	margin: 2.5rem 0 1rem;
	line-height: 1.3;
}

.single-post__content h2 { font-size: var(--text-2xl); }
.single-post__content h3 { font-size: var(--text-xl); }
.single-post__content h4 { font-size: var(--text-lg); }

.single-post__content ul,
.single-post__content ol {
	padding-left: 1.5rem;
}

.single-post__content li {
	margin-bottom: 0.5rem;
	line-height: var(--leading-relaxed);
}

.single-post__content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}

.single-post__content a:hover {
	color: var(--color-primary-400);
}

.single-post__content blockquote {
	margin: 2rem 0;
	padding: 1.5rem 1.75rem;
	background-color: var(--color-cream-50);
	border-left: 4px solid var(--color-accent);
	border-radius: 0 8px 8px 0;
}

.single-post__content blockquote p {
	font-size: var(--text-lg);
	font-style: italic;
	color: var(--color-text-primary);
	font-family: var(--font-display);
	margin: 0;
	line-height: var(--leading-normal);
}

.single-post__content blockquote cite {
	display: block;
	margin-top: 0.75rem;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	font-style: normal;
	font-family: var(--font-body);
}

.single-post__content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
	margin: 1.5rem auto;
}

.single-post__content figure {
	margin: 2rem 0;
}

.single-post__content figcaption {
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-top: 0.625rem;
	font-style: italic;
}

.single-post__content hr {
	border: none;
	border-top: 1px solid var(--color-cream-200);
	margin: 2.5rem 0;
}

.single-post__content pre {
	background-color: var(--color-bg-dark);
	color: var(--color-text-on-dark);
	padding: 1.25rem 1.5rem;
	border-radius: 8px;
	overflow-x: auto;
	font-size: var(--text-sm);
	line-height: 1.7;
	margin: 0 0 1.5rem;
}

.single-post__content code {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.9em;
	background-color: var(--color-cream-100);
	padding: 0.125rem 0.375rem;
	border-radius: 3px;
}

.single-post__content pre code {
	background: none;
	padding: 0;
	font-size: inherit;
}

.single-post__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
	margin: 0 0 1.5rem;
}

.single-post__content th,
.single-post__content td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--color-cream-200);
}

.single-post__content th {
	font-weight: var(--weight-bold);
	background-color: var(--color-cream-50);
	color: var(--color-text-primary);
}

.page-links {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 2rem 0;
	font-size: var(--text-sm);
}

.page-links a,
.page-links > span:not(.page-links__label) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border: 1px solid var(--color-cream-200);
	border-radius: 4px;
	color: var(--color-text-primary);
	text-decoration: none;
	font-weight: var(--weight-bold);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.page-links a:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-on-dark);
}

/* Tags
--------------------------------------------- */
.single-post__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-cream-200);
}

.single-post__tags-label {
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--color-text-secondary);
}

.single-post__tag {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background-color: var(--color-cream-50);
	border: 1px solid var(--color-cream-200);
	border-radius: 100px;
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.single-post__tag:hover {
	background-color: var(--color-primary-100);
	border-color: var(--color-primary-200);
	color: var(--color-primary);
}

/* Social sharing
--------------------------------------------- */
.single-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
	padding: 1.5rem;
	background-color: var(--color-cream-50);
	border-radius: 10px;
	border: 1px solid var(--color-cream-200);
}

.single-share__label {
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--color-text-secondary);
	flex-shrink: 0;
}

.single-share__buttons {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.single-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	text-decoration: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	color: var(--color-white);
}

.single-share__btn:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

.single-share__btn--facebook  { background-color: #1877F2; }
.single-share__btn--twitter   { background-color: #000000; }
.single-share__btn--pinterest { background-color: #E60023; }

/* Author bio
--------------------------------------------- */
.author-bio {
	display: flex;
	gap: 1.25rem;
	margin-top: 2.5rem;
	padding: 1.75rem;
	background-color: var(--color-cream-50);
	border-radius: 10px;
	border: 1px solid var(--color-cream-200);
}

.author-bio__avatar {
	flex-shrink: 0;
}

.author-bio__img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--color-primary-100);
}

.author-bio__label {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--color-text-muted);
	margin: 0 0 0.25rem;
}

.author-bio__name {
	margin: 0 0 0.75rem;
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	font-family: var(--font-display);
}

.author-bio__name a {
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.author-bio__name a:hover {
	color: var(--color-primary);
}

.author-bio__description {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
	margin: 0 0 0.875rem;
}

.author-bio__more {
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.author-bio__more:hover {
	color: var(--color-primary-400);
}

/* Post navigation
--------------------------------------------- */
.post-nav {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-cream-200);
}

.post-nav__inner {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	max-width: 45%;
	text-decoration: none;
	color: var(--color-text-secondary);
	transition: color 0.15s ease;
}

.post-nav__link:hover {
	color: var(--color-primary);
}

.post-nav__link--next {
	text-align: right;
	align-items: flex-end;
	margin-left: auto;
}

.post-nav__direction {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-text-muted);
}

.post-nav__link--next .post-nav__direction {
	flex-direction: row-reverse;
}

.post-nav__title {
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: inherit;
	font-family: var(--font-display);
	line-height: 1.3;
}

/* Related posts
--------------------------------------------- */
.related-posts {
	background-color: var(--color-cream-50);
	border-top: 1px solid var(--color-cream-200);
	padding: 4rem 0;
}

.related-posts__inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.related-posts__title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-primary);
	margin: 0 0 2rem;
	text-align: center;
}

.related-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.related-card {
	background-color: var(--color-white);
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--color-cream-200);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.related-card:hover {
	box-shadow: 0 8px 24px rgba(45, 32, 32, 0.1);
	transform: translateY(-2px);
}

.related-card__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.related-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.related-card:hover .related-card__img {
	transform: scale(1.04);
}

.related-card__body {
	padding: 1.25rem;
}

.related-card__cat {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-primary);
	margin-bottom: 0.5rem;
}

.related-card__title {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	line-height: 1.35;
	margin: 0 0 0.5rem;
}

.related-card__title a {
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.related-card__title a:hover {
	color: var(--color-primary);
}

.related-card__date {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin: 0;
}

/* Comments area
--------------------------------------------- */
.comments-area {
	max-width: 760px;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
	border-top: 2px solid var(--color-cream-200);
}

.comments-title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-primary);
	margin: 0 0 2rem;
}

.comments-title span {
	color: var(--color-primary);
}

/* Comment navigation */
.comment-navigation {
	margin-bottom: 2rem;
}

.comment-navigation .nav-links {
	display: flex;
	gap: 1rem;
}

.comment-navigation a {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	transition: color 0.15s ease;
}

.comment-navigation a:hover {
	color: var(--color-primary-400);
}

/* Comment list
--------------------------------------------- */
.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 3rem;
}

.comment-list .children {
	list-style: none;
	padding: 0;
	margin: 0;
}

.comment-item {
	padding: 0;
	margin: 0;
}

/* First-level gap */
.comment-list > .comment-item + .comment-item {
	margin-top: 0;
}

/* Nested indentation */
.comment-item .children .comment-item {
	margin-left: 3rem;
	border-left: 2px solid var(--color-cream-200);
	padding-left: 1.5rem;
}

.comment-body {
	display: flex;
	gap: 1rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--color-cream-100);
}

.comment-avatar {
	flex-shrink: 0;
}

.comment-avatar__img,
.comment-avatar img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--color-cream-200);
	object-fit: cover;
	display: block;
}

.comment-content-wrap {
	flex: 1;
	min-width: 0;
}

.comment-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-bottom: 0.625rem;
}

.comment-author-name {
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	color: var(--color-text-primary);
}

.comment-author-name a {
	color: inherit;
	text-decoration: none;
}

.comment-author-name a:hover {
	color: var(--color-primary);
}

.comment-team-badge {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	background-color: var(--color-primary);
	color: var(--color-text-on-dark);
	border-radius: 100px;
	font-size: 0.625rem;
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.comment-sep {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.comment-time {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.comment-time:hover {
	color: var(--color-primary);
}

.comment-edit-link {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-left: 0.5rem;
}

.comment-edit-link a {
	color: inherit;
	text-decoration: none;
}

.comment-awaiting-moderation {
	font-size: var(--text-xs);
	color: var(--color-accent-600);
	font-style: italic;
	margin: 0 0 0.5rem;
}

.comment-text {
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-text-primary);
}

.comment-text p {
	margin: 0 0 0.75rem;
}

.comment-text p:last-child {
	margin-bottom: 0;
}

.comment-reply-wrap {
	margin-top: 0.625rem;
}

.comment-reply-link {
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	transition: color 0.15s ease;
}

.comment-reply-link:hover {
	color: var(--color-primary-400);
}

.comment-item.is-team > .comment-body {
	background-color: var(--color-cream-50);
	border-radius: 8px;
	padding: 1.25rem;
	margin: 0.5rem 0;
	border: 1px solid var(--color-cream-200);
	border-bottom: 1px solid var(--color-cream-200);
}

.no-comments {
	color: var(--color-text-muted);
	font-style: italic;
	text-align: center;
	padding: 2rem 0;
}

/* Comment form
--------------------------------------------- */
.comment-reply-title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-primary);
	margin: 0 0 0.25rem;
}

.comment-reply-title small a {
	font-size: var(--text-sm);
	font-family: var(--font-body);
	font-weight: var(--weight-normal);
	color: var(--color-text-muted);
	text-decoration: none;
	margin-left: 0.75rem;
}

.comment-notes {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0 0 1.75rem;
}

.comment-form {
	margin-top: 2.5rem;
}

.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-comment {
	margin: 0 0 1.25rem;
}

.comment-form label {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--color-text-primary);
	margin-bottom: 0.375rem;
}

.comment-form .required {
	color: var(--color-primary);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text-primary);
	background-color: var(--color-white);
	border: 1px solid var(--color-cream-200);
	border-radius: 6px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.12);
}

.comment-form textarea {
	resize: vertical;
	min-height: 140px;
	line-height: var(--leading-relaxed);
}

.form-submit {
	margin: 0;
}

.comment-form .btn--primary {
	padding: 0.75rem 2rem;
	font-size: var(--text-base);
}

/* Responsive: Single Post
--------------------------------------------- */
@media screen and (max-width: 59.9375em) {
	.related-posts__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 37.4375em) {
	.single-hero {
		height: 280px;
	}

	.single-post__wrap,
	.comments-area {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.related-posts__grid {
		grid-template-columns: 1fr;
	}

	.related-posts__inner {
		padding: 0 1.25rem;
	}

	.author-bio {
		flex-direction: column;
	}

	.comment-item .children .comment-item {
		margin-left: 1rem;
		padding-left: 1rem;
	}

	.post-nav__inner {
		flex-direction: column;
		gap: 1.5rem;
	}

	.post-nav__link,
	.post-nav__link--next {
		max-width: 100%;
		align-items: flex-start;
		text-align: left;
	}
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.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: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}