/*
Theme Name: Grace Courtyards
Author: Grace Courtyards
Description: A light, bright hospitality theme for Grace Courtyards in Apam, Ghana. Built for Elementor: every page, header and footer is edited visually with Elementor's widgets, while colours and fonts follow Elementor Global Colors and Global Fonts. Pair it with the Grace Courtyards Core plugin for accommodation listings, reservation and event enquiries, and the one-click starter website. Works without Elementor too, with clean templates for posts, pages, search and archives.
Version: 1.5.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grace-courtyards
Tags: one-column, two-columns, right-sidebar, custom-logo, custom-menu, custom-background, editor-style, featured-images, footer-widgets, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, block-patterns, holiday, food-and-drink, entertainment, blog
*/

/*--------------------------------------------------------------
>>> CONTENTS
1. Fonts (bundled, SIL Open Font License)
2. Design tokens
3. Base and typography
4. Layout helpers
5. Header and navigation
6. Footer
7. Posts, pages and archives
8. Forms, buttons and search
9. Comments and widgets
10. WordPress core classes and blocks
11. Accessibility and motion
--------------------------------------------------------------*/

/* 1. Fonts ---------------------------------------------------------- */

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/jost-normal-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/cormorant-garamond-normal-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
}

/* 2. Design tokens ---------------------------------------------------
 * Each token reads the matching Elementor global first, so changing
 * Site Settings → Global Colors / Global Fonts restyles the theme too.
 */

:root {
	--gc-primary: var(--e-global-color-primary, #003c35);
	--gc-secondary: var(--e-global-color-secondary, #9d7c4b);
	--gc-text: var(--e-global-color-text, #202523);
	--gc-accent: var(--e-global-color-accent, #003c35);
	--gc-tan: var(--e-global-color-secondary, #9d7c4b);
	--gc-ivory: var(--e-global-color-gcivory, #fbf9f5);
	--gc-mist: var(--e-global-color-gcmist, #f8f4ee);
	--gc-sand: var(--e-global-color-gcsand, #f4ecdf);
	--gc-muted: var(--e-global-color-gcmuted, #5b625f);
	--gc-deep: var(--e-global-color-gcdeep, #003c35);
	--gc-white: #fff;
	--gc-line: rgba(0, 60, 53, 0.12);
	--gc-heading-font: var(--e-global-typography-primary-font-family, "Cormorant Garamond"), Georgia, "Times New Roman", serif;
	--gc-body-font: var(--e-global-typography-text-font-family, "Jost"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--gc-radius: 14px;
	--gc-shadow: 0 24px 60px -32px rgba(0, 60, 53, 0.35);
	--gc-shadow-soft: 0 12px 32px -20px rgba(0, 60, 53, 0.25);
	--gc-container: 1200px;
	--gc-gutter: clamp(20px, 4vw, 40px);
	--gc-header-height: 84px;
}

/* 3. Base and typography -------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--gc-header-height) + 16px);
}

body {
	margin: 0;
	overflow-x: clip;
	background-color: #fff;
	color: var(--gc-text);
	font-family: var(--gc-body-font);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	color: var(--gc-primary);
	font-family: var(--gc-heading-font);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.005em;
}

h1 {
	font-size: clamp(2.5rem, 5.5vw, 4.25rem);
	line-height: 1.05;
}

h2 {
	font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

h4 {
	font-size: 1.4rem;
}

h5,
h6 {
	font-family: var(--gc-body-font);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

p,
ul,
ol,
dl,
blockquote,
figure,
pre,
table {
	margin: 0 0 1.4em;
}

a {
	color: var(--gc-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--gc-primary);
	text-decoration-color: var(--gc-tan);
	text-decoration-thickness: 2px;
}

img,
video,
iframe,
svg {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

hr {
	height: 1px;
	margin: 2.5em 0;
	border: 0;
	background: var(--gc-line);
}

blockquote {
	margin-inline: 0;
	padding: 0.4em 0 0.4em 1.4em;
	border-left: 3px solid var(--gc-secondary);
	color: var(--gc-primary);
	font-family: var(--gc-heading-font);
	font-size: 1.4rem;
	font-style: italic;
	line-height: 1.5;
}

code,
kbd,
pre,
samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.92em;
}

pre {
	overflow: auto;
	padding: 1.2em;
	border-radius: 10px;
	background: var(--gc-ivory);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.7em 0.9em;
	border-bottom: 1px solid var(--gc-line);
	text-align: left;
}

::selection {
	background: var(--gc-sand);
	color: var(--gc-primary);
}

.gc-eyebrow {
	margin: 0 0 10px;
	color: var(--gc-accent);
	font-family: var(--gc-body-font);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* A short tan rule before small labels: the brand colour as a detail, while the text stays dark teal for contrast. */
.gc-eyebrow::before,
.gcc-eyebrow::before,
.elementor-widget.gc-eyebrow .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 1px;
	margin-right: 12px;
	vertical-align: middle;
	background: var(--gc-tan);
}

/* 4. Layout helpers ------------------------------------------------- */

.gc-container {
	width: min(var(--gc-container), 100% - 2 * var(--gc-gutter));
	margin-inline: auto;
}

.gc-container--narrow {
	width: min(820px, 100% - 2 * var(--gc-gutter));
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}

.site-main {
	padding-bottom: clamp(56px, 8vw, 110px);
}

.site-main--full,
.elementor-template-full-width .site-main {
	padding-bottom: 0;
}

.gc-layout {
	display: grid;
	gap: clamp(32px, 5vw, 64px);
}

.gc-has-sidebar .gc-layout {
	grid-template-columns: minmax(0, 1fr) 320px;
}

@media (max-width: 960px) {
	.gc-has-sidebar .gc-layout {
		grid-template-columns: 1fr;
	}
}

/* 5. Header and navigation ------------------------------------------ */

.site-header {
	position: relative;
	z-index: 100;
	background: rgba(255, 255, 255, 0.97);
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

/* A fine tan line under the header: the brand colour as a finishing detail. */
.site-header::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(157, 124, 75, 0), rgba(157, 124, 75, 0.6) 50%, rgba(157, 124, 75, 0));
	pointer-events: none;
}

::selection {
	background: var(--gc-primary);
	color: #fff;
}

.site-header.is-sticky {
	position: sticky;
	top: 0;
}

.admin-bar .site-header.is-sticky {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header.is-sticky {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .site-header.is-sticky {
		top: 0;
	}
}

.site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 10px 30px -18px rgba(0, 60, 53, 0.35);
	-webkit-backdrop-filter: saturate(1.2) blur(12px);
	backdrop-filter: saturate(1.2) blur(12px);
}

.site-header--default {
	border-bottom: 1px solid var(--gc-line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--gc-header-height);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-right: auto;
}

.site-branding .custom-logo-link {
	display: block;
	flex-shrink: 0;
}

.site-branding .custom-logo {
	display: block;
	width: auto;
	height: 56px;
	max-height: 56px;
}

.site-title {
	margin: 0;
	font-family: var(--gc-heading-font);
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

.site-title a {
	color: var(--gc-primary);
	text-decoration: none;
}

.site-description {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--gc-primary);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-decoration: none;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
	color: var(--gc-primary);
	text-decoration: underline;
	text-decoration-color: var(--gc-tan);
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu .current-menu-item > a {
	background: var(--gc-ivory);
	text-underline-offset: 5px;
}

.main-navigation .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	z-index: 20;
	display: block;
	width: max-content;
	min-width: 240px;
	max-width: min(380px, 90vw);
	padding: 10px 0;
	border: 1px solid var(--gc-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--gc-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.main-navigation li:hover:not(.is-dismissed) > .sub-menu,
.main-navigation li:focus-within:not(.is-dismissed) > .sub-menu,
.main-navigation li.is-expanded > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.main-navigation .sub-menu a {
	display: flex;
	padding: 4px 20px;
}

.main-navigation .submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	min-height: 44px;
	margin: 0 -10px 0 2px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--gc-primary);
	cursor: pointer;
}

.main-navigation .submenu-toggle:hover {
	background: transparent;
	color: var(--gc-tan);
	box-shadow: none;
}

.submenu-toggle__icon {
	display: block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.is-expanded > .submenu-toggle .submenu-toggle__icon {
	transform: translateY(2px) rotate(-135deg);
}

/* Room availability added to menu links by Grace Courtyards Core: small, quiet grey text. */
.menu-item-status {
	margin-left: 0.4em;
	color: #6b716f;
	font-size: 0.8em;
	font-weight: 400;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.menu-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: var(--gc-primary);
	font: 500 0.9rem/1 var(--gc-body-font);
	cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
}

.menu-toggle__bars {
	position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle__bars::before {
	top: -6px;
}

.menu-toggle__bars::after {
	top: 6px;
}

@media (max-width: 1024px) {
	.menu-toggle {
		display: inline-flex;
	}

	.main-navigation {
		order: 3;
	}

	.site-header__cta {
		order: 2;
	}

	.main-navigation > ul {
		position: absolute;
		top: 100%;
		right: var(--gc-gutter);
		left: var(--gc-gutter);
		display: none;
		flex-direction: column;
		gap: 0;
		max-height: calc(100vh - var(--gc-header-height) - 24px);
		overflow-y: auto;
		padding: 12px 24px 18px;
		border: 1px solid var(--gc-line);
		border-radius: 14px;
		background: #fff;
		box-shadow: var(--gc-shadow);
	}

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

	.main-navigation .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 6px 16px;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.main-navigation .sub-menu {
		flex-basis: 100%;
		width: auto;
		max-width: none;
	}

	.main-navigation.has-submenu-toggles .sub-menu {
		display: none;
	}

	.main-navigation.has-submenu-toggles .is-expanded > .sub-menu {
		display: block;
		animation: gc-submenu-in 0.2s ease;
	}

	.main-navigation .menu-item-has-children > a {
		flex: 1;
	}

	.main-navigation .submenu-toggle {
		width: 44px;
		margin: 0;
	}
}

@keyframes gc-submenu-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 600px) {
	.site-header .site-header__cta {
		display: none;
	}

	.site-header__inner {
		gap: 12px;
	}

	.site-branding {
		min-width: 0;
		gap: 8px;
	}

	.site-branding .custom-logo {
		max-height: 40px;
	}

	.site-title {
		font-size: 1.15rem;
		letter-spacing: 0.04em;
	}
}

/* 6. Footer --------------------------------------------------------- */

.site-footer--default {
	margin-top: auto;
	padding-top: clamp(48px, 7vw, 80px);
	background: linear-gradient(180deg, var(--gc-ivory) 0%, #fff 100%);
	border-top: 1px solid var(--gc-line);
	font-size: 0.95rem;
}

.site-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	padding-bottom: 40px;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	padding-block: 24px 32px;
	border-top: 1px solid var(--gc-line);
}

.site-footer ul.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

.site-info {
	margin: 0;
	color: var(--gc-muted);
}

/* 7. Posts, pages and archives -------------------------------------- */

.page-header {
	margin-bottom: clamp(36px, 5vw, 64px);
	padding-block: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 72px);
	background:
		radial-gradient(1200px 400px at 15% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg, var(--gc-mist) 0%, var(--gc-ivory) 55%, #fff 100%);
	text-align: center;
}

.page-title {
	margin: 0;
}

.archive-description {
	max-width: 680px;
	margin: 16px auto 0;
	color: var(--gc-muted);
}

.gc-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 32px;
}

.gc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--gc-line);
	border-radius: var(--gc-radius);
	background: #fff;
	box-shadow: var(--gc-shadow-soft);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.gc-card:hover {
	box-shadow: var(--gc-shadow);
	transform: translateY(-3px);
}

.gc-card .post-thumbnail {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--gc-mist);
}

.gc-card .post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gc-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 24px 26px 28px;
}

.gc-card .entry-title {
	margin-bottom: 10px;
	font-size: 1.6rem;
}

.gc-card .entry-title a {
	color: inherit;
	text-decoration: none;
}

.gc-card .entry-summary {
	flex: 1;
}

.entry-meta {
	margin-bottom: 8px;
	color: var(--gc-muted);
	font-size: 0.85rem;
}

.entry-meta a {
	color: inherit;
}

.single .entry-header {
	padding-top: clamp(40px, 6vw, 80px);
}

.single .post-thumbnail {
	margin: 0 0 2em;
	overflow: hidden;
	border-radius: var(--gc-radius);
	box-shadow: var(--gc-shadow);
}

.entry-content {
	font-size: 1.0625rem;
}

.entry-content > * {
	max-width: 100%;
}

.entry-content--full > * {
	max-width: none;
}

.entry-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 2.5em;
	padding-top: 1.2em;
	border-top: 1px solid var(--gc-line);
	color: var(--gc-muted);
	font-size: 0.88rem;
}

.post-navigation {
	margin-top: 3em;
}

.post-navigation .nav-links,
.posts-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.post-navigation a {
	display: block;
	padding: 18px 22px;
	border: 1px solid var(--gc-line);
	border-radius: 12px;
	text-decoration: none;
}

.nav-subtitle {
	display: block;
	color: var(--gc-accent);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.nav-title {
	font-family: var(--gc-heading-font);
	font-size: 1.3rem;
}

.pagination {
	margin-top: 48px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--gc-line);
	border-radius: 999px;
	text-decoration: none;
}

.page-numbers.current {
	background: var(--gc-primary);
	border-color: var(--gc-primary);
	color: #fff;
}

.gc-search-result {
	padding-block: 24px;
	border-bottom: 1px solid var(--gc-line);
}

.gc-search-result .entry-title {
	font-size: 1.6rem;
}

.error-404 {
	padding-block: clamp(80px, 12vw, 160px);
	background: linear-gradient(180deg, var(--gc-mist) 0%, #fff 70%);
	text-align: center;
}

.error-404 .search-form {
	max-width: 520px;
	margin: 28px auto;
}

.post-thumbnail img {
	width: 100%;
}

/* 8. Forms, buttons and search -------------------------------------- */

.gc-button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.wp-block-search__button,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.85em 1.7em;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: var(--gc-primary);
	color: #fff;
	font-family: var(--gc-body-font);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.gc-button:hover,
.gc-button:focus-visible,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-block-search__button:hover,
.wp-element-button:hover {
	background-color: var(--gc-primary);
	color: #fff;
	box-shadow: inset 0 0 0 2px var(--gc-tan), var(--gc-shadow-soft);
}

.menu-toggle:hover {
	background: transparent;
	border-color: var(--gc-tan);
	color: var(--gc-primary);
	box-shadow: none;
}

.is-style-gc-outline .wp-block-button__link {
	border-color: currentColor;
	background: transparent;
	color: var(--gc-primary);
}

.is-style-gc-outline .wp-block-button__link:hover {
	background: var(--gc-primary);
	color: #fff;
}

.gc-text-link {
	display: inline-block;
	margin-top: 12px;
	font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	min-height: 50px;
	padding: 12px 16px;
	border: 1px solid rgba(0, 60, 53, 0.22);
	border-radius: 10px;
	background: #fff;
	color: var(--gc-text);
	font: inherit;
}

textarea {
	min-height: 140px;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--gc-primary);
	outline: 3px solid rgba(157, 124, 75, 0.45);
	outline-offset: 0;
}

.search-form {
	display: flex;
	gap: 10px;
}

.search-form .search-field {
	flex: 1;
}

/* 9. Comments and widgets ------------------------------------------- */

.comments-area {
	margin-top: 4em;
	padding-top: 2em;
	border-top: 1px solid var(--gc-line);
}

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

.comment-list .children {
	margin-left: clamp(16px, 4vw, 48px);
}

.comment-body {
	margin-bottom: 1.5em;
	padding: 20px 24px;
	border: 1px solid var(--gc-line);
	border-radius: 12px;
}

.comment-meta {
	margin-bottom: 0.8em;
	font-size: 0.88rem;
}

.comment-author .avatar {
	float: left;
	margin-right: 12px;
	border-radius: 50%;
}

.bypostauthor > .comment-body {
	border-color: var(--gc-secondary);
}

.widget {
	margin-bottom: 2.5em;
}

.widget-title {
	margin-bottom: 0.8em;
	font-size: 1.4rem;
}

.widget ul {
	padding-left: 1.1em;
}

.widget-area .widget {
	padding: 26px;
	border: 1px solid var(--gc-line);
	border-radius: var(--gc-radius);
	background: linear-gradient(180deg, #fff, var(--gc-ivory));
}

/* Block widgets print their titles as h2. Keep them in proportion with the sidebar. */
.widget-area h2,
.widget-area .wp-block-heading,
.widget-area .wp-block-search__label {
	margin: 0 0 0.8em;
	color: var(--gc-primary);
	font-family: var(--gc-heading-font);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
}

.widget-area .wp-block-search__inside-wrapper {
	gap: 10px;
}

.widget-area .wp-block-search__input {
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid rgba(0, 60, 53, 0.22);
	border-radius: 999px;
}

.widget-area .wp-block-search__button {
	margin-left: 0;
	padding-inline: 1.3em;
}

.widget-area ul.wp-block-latest-posts,
.widget-area ul.wp-block-categories,
.widget-area ul.wp-block-archives {
	padding-left: 0;
	list-style: none;
}

.widget-area .wp-block-latest-posts li,
.widget-area .wp-block-categories li,
.widget-area .wp-block-archives li {
	padding: 8px 0;
	border-bottom: 1px solid var(--gc-line);
}

/* 10. WordPress core classes and blocks ----------------------------- */

.alignleft {
	float: left;
	margin: 0.4em 1.6em 1em 0;
}

.alignright {
	float: right;
	margin: 0.4em 0 1em 1.6em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
	clear: both;
}

.alignwide {
	width: min(1100px, 100vw - 2 * var(--gc-gutter));
	max-width: none;
	margin-inline: calc(50% - min(1100px, 100vw - 2 * var(--gc-gutter)) / 2);
}

.alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

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

.wp-caption-text,
.gallery-caption,
figcaption {
	margin-top: 0.6em;
	color: var(--gc-muted);
	font-size: 0.875rem;
	text-align: center;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
	margin-bottom: 1.5em;
}

.gallery-item {
	margin: 0;
}

.sticky .gc-card__body {
	border-top: 3px solid var(--gc-secondary);
}

.sticky {
	position: relative;
}

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

.is-style-gc-soft-panel {
	padding: clamp(28px, 5vw, 56px);
	border-radius: var(--gc-radius);
	background: linear-gradient(180deg, var(--gc-mist), var(--gc-ivory));
}

.wp-block-image img {
	border-radius: 10px;
}

.wp-block-pullquote {
	border-color: var(--gc-secondary);
}

.wp-block-separator {
	border-color: var(--gc-line);
}

/* Elementor pages: no gaps between the header and the first section. */
.elementor-page .site-main,
.elementor-default .site-main--full,
.site-main:has(> .gc-elementor-page) {
	padding-bottom: 0;
}

.entry-content--elementor {
	font-size: inherit;
}

.site-header--elementor .elementor {
	width: 100%;
}

.site-footer .gc-button--credit {
	min-height: 36px;
	padding: 0.5em 1.1em;
	border-color: var(--gc-line);
	background-color: transparent;
	color: var(--gc-primary);
	font-size: 0.8rem;
	letter-spacing: 0.03em;
}

.site-footer .gc-button--credit:hover,
.site-footer .gc-button--credit:focus-visible {
	background-color: var(--gc-primary);
	color: #fff;
	text-decoration: none;
}

/* 11. Accessibility and motion -------------------------------------- */

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

.screen-reader-text:focus {
	top: 8px;
	left: 8px;
	z-index: 100000;
	display: block;
	width: auto;
	height: auto;
	padding: 14px 22px;
	clip: auto !important;
	clip-path: none;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: var(--gc-shadow);
	color: var(--gc-primary);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	position: fixed !important;
}

a:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
.gc-button:focus-visible,
.menu-toggle:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--gc-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.gc-card:hover {
		transform: none;
	}
}

@media print {
	.site-header,
	.site-footer,
	.gcc-whatsapp-float,
	.comments-area {
		display: none !important;
	}
}

/* Elementor Site Settings ---------------------------------------------------
 * When Elementor is active, its Site Settings style every link and <button>
 * with selectors that outrank one class. These rules restate the theme's own
 * button colours so button text never takes the teal link colour.
 */
html body .gc-button,
html body .wp-block-button__link,
html body .wp-block-search__button,
html body .wp-element-button,
html body .search-submit {
	padding: 0.85em 1.7em;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: var(--gc-primary);
	color: #fff;
}

html body .gc-button:hover,
html body .gc-button:focus-visible,
html body .wp-block-button__link:hover,
html body .wp-block-search__button:hover,
html body .wp-element-button:hover,
html body .search-submit:hover {
	border-color: transparent;
	background-color: var(--gc-primary);
	color: #fff;
}

html body .is-style-gc-outline .wp-block-button__link {
	border-color: currentColor;
	background-color: transparent;
	color: var(--gc-primary);
}

html body .is-style-gc-outline .wp-block-button__link:hover {
	background-color: var(--gc-primary);
	color: #fff;
}

html body .menu-toggle,
html body .menu-toggle:hover,
html body .menu-toggle:focus-visible {
	padding: 8px 16px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background-color: transparent;
	color: var(--gc-primary);
}

html body .menu-toggle:hover,
html body .menu-toggle:focus-visible {
	border-color: var(--gc-tan);
}

html body .entry-meta a {
	color: inherit;
}