/*
Theme Name:   Shoreline
Description:  A calm, airy GeneratePress child theme: Plus Jakarta Sans, generous white space, soft cards and an automatic light/dark scheme. Design system adapted from Anchor Theme by Austin Ginder (MIT).
Author:       Scot
Template:     generatepress
Version:      1.0.5
Requires at least: 6.5
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  shoreline
*/

/* ==========================================================================
   Contents
   1.  Design tokens (light, dark, explicit choice)
   2.  GeneratePress colour bridge
   3.  Base & typography
   4.  Header & navigation
   5.  Theme toggle
   6.  Buttons
   7.  Forms (incl. Gravity Forms)
   8.  Content, cards & blog
   9.  Single post reading column
   10. Sidebar & footer
   11. Small screens
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   Change the look of the whole site here. Light values first, dark below.
   ========================================================================== */

:root {
	--bg: #F5F7FA;
	--surface: #FFFFFF;
	--surface-2: #FAFBFD;
	--surface-3: #EDF0F5;
	--border: #E3E7EE;
	--border-strong: #CBD2DE;
	--text: #15181D;
	--text-2: #565C66;
	--text-3: #666D7A;
	--navy: #123E8C;
	--navy-hover: #0D2F6E;
	--on-navy: #FFFFFF;
	--navy-soft: #EAF0FB;
	--good: #1C8A55;
	--warn: #B0761B;
	--bad: #BF3B2E;
	--shadow: rgba(18, 25, 40, .07);
	--shadow-lg: rgba(18, 25, 40, .10);

	--font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 18px;
	--admin-bar-h: 0px;

	/* Space above and below every Shoreline pattern section. */
	--shoreline-section-space: 92px;
}

@media (max-width: 767px) {
	:root {
		--shoreline-section-space: 60px;
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0B0E13;
		--surface: #141922;
		--surface-2: #1A202B;
		--surface-3: #212936;
		--border: #242C39;
		--border-strong: #35404F;
		--text: #E9ECF1;
		--text-2: #A3ACB9;
		--text-3: #767F8C;
		--navy: #5C97F7;
		--navy-hover: #82B0FF;
		--on-navy: #08111F;
		--navy-soft: #16223A;
		--good: #3FBE7F;
		--warn: #E0A64A;
		--bad: #EE7264;
		--shadow: rgba(0, 0, 0, .5);
		--shadow-lg: rgba(0, 0, 0, .6);
		color-scheme: dark;
	}
}

/* A visitor's explicit choice beats their device setting. */
:root[data-theme="dark"] {
	--bg: #0B0E13;
	--surface: #141922;
	--surface-2: #1A202B;
	--surface-3: #212936;
	--border: #242C39;
	--border-strong: #35404F;
	--text: #E9ECF1;
	--text-2: #A3ACB9;
	--text-3: #767F8C;
	--navy: #5C97F7;
	--navy-hover: #82B0FF;
	--on-navy: #08111F;
	--navy-soft: #16223A;
	--good: #3FBE7F;
	--warn: #E0A64A;
	--bad: #EE7264;
	--shadow: rgba(0, 0, 0, .5);
	--shadow-lg: rgba(0, 0, 0, .6);
	color-scheme: dark;
}

/* ==========================================================================
   2. GeneratePress colour bridge
   GeneratePress paints most of the site with its Global Colors. Pointing
   them at the tokens above means its own styles follow light/dark too.
   ========================================================================== */

:root {
	--contrast: var(--text);
	--contrast-2: var(--text-2);
	--contrast-3: var(--border-strong);
	--base: var(--border);
	--base-2: var(--bg);
	--base-3: var(--surface);
	--accent: var(--navy);
}

/* ==========================================================================
   3. Base & typography
   ========================================================================== */

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-wrap: pretty;
}

a {
	color: var(--navy);
	text-decoration: none;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	color: var(--text);
	font-weight: 800;
	letter-spacing: -.025em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.1rem, 3.6vw, 3rem);
	line-height: 1.08;
	letter-spacing: -.033em;
}

h2 {
	font-size: clamp(1.5rem, 2.2vw, 1.75rem);
	line-height: 1.2;
}

h3 {
	font-size: 21px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.02em;
}

h4, h5, h6 {
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -.01em;
}

code, kbd, pre, samp {
	font-family: var(--font-mono);
}

::selection {
	background: var(--navy);
	color: var(--on-navy);
}

:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
	border-radius: 4px;
}

hr {
	background-color: var(--border);
}

/* Motion used by the Shoreline patterns (hero fade-up, status dot). */
@keyframes shoreline-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes shoreline-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

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

/* ==========================================================================
   4. Header & navigation
   ========================================================================== */

body.admin-bar { --admin-bar-h: 32px; }

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

@media screen and (max-width: 600px) {
	body.admin-bar { --admin-bar-h: 0px; }
}

/* Translucent, blurred, sticky: content softly scrolls beneath it. */
.site-header {
	position: sticky;
	top: var(--admin-bar-h);
	z-index: 60;
	background-color: color-mix(in srgb, var(--surface) 88%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
}

.inside-header {
	padding-top: 13px;
	padding-bottom: 13px;
	column-gap: 26px;
}

.main-title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
}

.main-title a,
.main-title a:hover {
	color: var(--text);
}

.site-description {
	font-size: 13.5px;
	color: var(--text-3);
}

.main-navigation,
.main-navigation ul ul {
	background-color: transparent;
}

.main-navigation .main-nav > ul {
	gap: 4px;
	align-items: center;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: var(--text-2);
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: 600;
}

.main-navigation .main-nav ul li a {
	line-height: 1;
	padding: 9px 13px;
	border-radius: var(--radius-sm);
	transition: background-color .15s ease, color .15s ease;
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--text);
	background-color: var(--surface-3);
}

/* Navigation sitting below the header gets its own quiet bar. */
.nav-below-header .main-navigation,
.nav-above-header .main-navigation {
	background-color: var(--surface);
	border-bottom: 1px solid var(--border);
}

.nav-below-header .main-navigation .inside-navigation,
.nav-above-header .main-navigation .inside-navigation {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Dropdowns */
.main-navigation ul ul {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 12px 32px var(--shadow-lg);
	padding: 6px;
}

.main-navigation .main-nav ul ul li a {
	color: var(--text-2);
	font-size: 14px;
	padding: 10px 12px;
}

.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
	color: var(--text);
	background-color: var(--surface-3);
}

/* Add the CSS class "nav-cta" to a menu item to make it a solid button. */
.main-navigation .main-nav ul li.nav-cta > a,
.main-navigation .main-nav ul li.nav-cta:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li.nav-cta[class*="current-menu-"] > a {
	background-color: var(--navy);
	color: var(--on-navy);
	padding: 11px 17px;
	margin-left: 6px;
}

.main-navigation .main-nav ul li.nav-cta:not([class*="current-menu-"]):hover > a {
	background-color: var(--navy-hover);
}

.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
	background-color: transparent;
	color: var(--text);
}

/* Built-in GeneratePress search */
.main-navigation .menu-bar-item > a {
	color: var(--text-2);
	border-radius: var(--radius-sm);
}

.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a {
	color: var(--text);
	background-color: transparent;
}

.gp-modal__overlay {
	background: color-mix(in srgb, var(--bg) 70%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.gp-modal__container {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px var(--shadow-lg);
}

/* ==========================================================================
   5. Theme toggle
   ========================================================================== */

.main-navigation .menu-bar-items {
	align-items: center;
}

.menu-bar-item.shoreline-toggle-item {
	display: flex;
	align-items: center;
	padding-left: 8px;
}

.menu-bar-items button.shoreline-toggle,
.menu-bar-items button.shoreline-toggle:hover,
.menu-bar-items button.shoreline-toggle:focus {
	width: 36px;
	height: 36px;
	padding: 0;
	display: grid;
	place-items: center;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-2);
	cursor: pointer;
	transform: none;
	transition: border-color .15s ease, color .15s ease;
}

.menu-bar-items button.shoreline-toggle:hover {
	border-color: var(--border-strong);
	color: var(--text);
}

.shoreline-toggle svg {
	display: block;
}

/* Show the moon in light mode (go dark), the sun in dark mode (go light). */
.shoreline-toggle .shoreline-icon-sun {
	display: none;
}

:root[data-theme="dark"] .shoreline-toggle .shoreline-icon-sun {
	display: block;
}

:root[data-theme="dark"] .shoreline-toggle .shoreline-icon-moon {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .shoreline-toggle .shoreline-icon-sun {
		display: block;
	}

	:root:not([data-theme="light"]) .shoreline-toggle .shoreline-icon-moon {
		display: none;
	}
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background) {
	background-color: var(--navy);
	color: var(--on-navy);
}

button:not(.menu-toggle),
html input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button .wp-block-button__link {
	font-family: var(--font-sans);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	padding: 14px 26px;
	border-radius: 12px;
	border: none;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
a.button:focus,
a.wp-block-button__link:not(.has-background):active,
a.wp-block-button__link:not(.has-background):focus,
a.wp-block-button__link:not(.has-background):hover {
	background-color: var(--navy-hover);
	color: var(--on-navy);
}

button:not(.menu-toggle):hover,
input[type="submit"]:hover,
a.button:hover,
.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Block editor "Outline" button style becomes the quiet secondary button. */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--surface);
	color: var(--text);
	border: 1px solid var(--border-strong);
	padding: 13px 24px;
}

/* ==========================================================================
   7. Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
	background-color: var(--surface);
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.4;
	padding: 10px 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
	background-color: var(--surface);
	color: var(--text);
	border-color: var(--navy);
	box-shadow: 0 0 0 3px var(--navy-soft);
	outline: none;
}

::placeholder {
	color: var(--text-3);
	opacity: 1;
}

input[type="radio"],
input[type="checkbox"],
input[type="range"] {
	accent-color: var(--navy);
}

label {
	color: var(--text);
}

/* Gravity Forms: labels, help text and messages in the same voice. */
.gform_wrapper .gfield_label,
.gform_wrapper .gsection_title {
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text);
}

.gform_wrapper .gfield_required {
	color: var(--bad);
}

.gform_wrapper .gfield_description:not(.validation_message),
.gform_wrapper .ginput_complex label {
	font-size: 13px;
	color: var(--text-3);
}

.gform_wrapper .gsection {
	border-bottom-color: var(--border);
}

.gform_wrapper .gform_validation_errors {
	background: var(--surface);
	border: 1px solid var(--bad);
	border-radius: var(--radius);
	box-shadow: none;
}

.gform_wrapper .gform_validation_errors > h2,
.gform_wrapper .validation_message {
	color: var(--bad);
}

/* Block search (widgets and content) */
.wp-block-search__label {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text);
}

.wp-block-search .wp-block-search__button {
	background-color: var(--navy);
	color: var(--on-navy);
	padding: 10px 18px;
	font-size: 14.5px;
	border-radius: var(--radius-sm);
}

.wp-block-search .wp-block-search__button:hover {
	background-color: var(--navy-hover);
	transform: none;
}

/* ==========================================================================
   8. Content, cards & blog
   ========================================================================== */

/* Content styles use :where() so block plugins (GenerateBlocks) always win. */

/* Every content block reads as a soft card on the grey page. */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header {
	background-color: var(--surface);
	color: var(--text);
}

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .site-content {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px var(--shadow);
}

:where(.entry-content) p,
:where(.entry-content) ul,
:where(.entry-content) ol,
.entry-summary p {
	color: var(--text-2);
}

:where(.entry-content) > p,
:where(.entry-content) > ul,
:where(.entry-content) > ol {
	font-size: 18px;
	line-height: 1.75;
}

:where(.entry-content) h2 {
	margin-top: 1.6em;
	margin-bottom: .55em;
}

:where(.entry-content) h3,
:where(.entry-content) h4 {
	margin-top: 1.6em;
	margin-bottom: .5em;
}

:where(.entry-content) > :first-child {
	margin-top: 0;
}

:where(.entry-content) li + li {
	margin-top: 8px;
}

:where(.entry-content) li::marker {
	color: var(--text-3);
}

:where(.entry-content a:not(.wp-block-button__link, .button, .gb-element)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

:where(.entry-content) blockquote,
:where(.entry-content) .wp-block-quote {
	margin: 2em 0;
	padding: 22px 26px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 19px;
	line-height: 1.55;
	font-weight: 600;
	font-style: normal;
	letter-spacing: -.012em;
	color: var(--text);
}

:where(.entry-content) blockquote p {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

:where(.entry-content) blockquote p:last-of-type {
	margin-bottom: 0;
}

:where(.entry-content) blockquote cite {
	display: block;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 500;
	font-style: normal;
	color: var(--text-3);
}

:where(.entry-content) code {
	font-size: .88em;
	background: var(--surface-3);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: .12em .38em;
	color: var(--text);
}

:where(.entry-content) pre {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-2);
	font-size: 13.5px;
	line-height: 1.7;
	padding: 20px 22px;
}

:where(.entry-content) pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
}

:where(.entry-content) figure img,
:where(.entry-content) .wp-block-image img {
	border-radius: var(--radius);
}

:where(.entry-content) figcaption,
.wp-element-caption {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--text-3);
	text-align: center;
}

:where(.entry-content) table {
	border-collapse: collapse;
	font-size: 15px;
}

:where(.entry-content) th,
:where(.entry-content) td {
	border: 1px solid var(--border);
	padding: 10px 14px;
	color: var(--text-2);
}

:where(.entry-content) th {
	background: var(--surface-2);
	color: var(--text);
	font-weight: 700;
}

:where(.entry-content) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--surface-2);
}

:where(.entry-content) .wp-block-table.is-style-stripes {
	border-bottom-color: var(--border);
}

/* Meta lines in the mono face. */
.entry-meta,
.comment-metadata {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--text-3);
}

.entry-meta a,
.comment-metadata a {
	color: var(--text-2);
}

.entry-meta a:hover {
	color: var(--navy);
}

.cat-links a,
.tags-links a {
	font-weight: 600;
	color: var(--navy);
}

/* Archive cards */
.blog .entry-title,
.archive .entry-title,
.search .entry-title {
	font-size: clamp(1.35rem, 2vw, 1.6rem);
	line-height: 1.18;
	letter-spacing: -.028em;
}

.entry-title a {
	color: var(--text);
}

.entry-title a:hover {
	color: var(--navy);
}

.post-image img,
.featured-image img {
	border-radius: var(--radius);
}

.read-more {
	font-size: 14.5px;
	font-weight: 700;
}

.page-header .page-title,
.page-header h1 {
	font-size: clamp(2.3rem, 3.8vw, 3.2rem);
	line-height: 1.06;
	letter-spacing: -.035em;
}

.taxonomy-description {
	color: var(--text-2);
}

/* Pagination as quiet pills */
.paging-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.paging-navigation .nav-links > * {
	padding: 0;
}

.paging-navigation .page-numbers {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	color: var(--text-2);
	transition: background-color .15s ease, color .15s ease;
}

.paging-navigation a.page-numbers:hover {
	background-color: var(--surface-3);
	color: var(--text);
}

.paging-navigation .page-numbers.current {
	background-color: var(--navy);
	color: var(--on-navy);
}

/* Comments */
.comment-author .fn,
.comment-author .fn a {
	font-weight: 700;
	color: var(--text);
}

.comment-content {
	color: var(--text-2);
}

/* Full-width pages (Layout > Content Container: Full Width) have no card,
   so section patterns can run edge to edge. */
.full-width-content.separate-containers .inside-article,
.full-width-content.one-container .site-content {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Pale band: add the class "is-band" to a pattern's outer section to give it
   a lighter background with thin lines above and below. Spacing moves inside
   the band so its background fills the gap. */
.gb-element.is-band {
	background-color: var(--surface-2);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	margin-top: 0;
	margin-bottom: 0;
	padding-top: var(--shoreline-section-space);
	padding-bottom: var(--shoreline-section-space);
}

/* Two bands in a row share one dividing line. */
.gb-element.is-band + .gb-element.is-band {
	border-top: 0;
}

/* ==========================================================================
   9. Single post reading column
   With "Content (no sidebars)", posts sit straight on the page in a 720px
   column, the way a good long read should.
   ========================================================================== */

.single-post.no-sidebar.separate-containers .inside-article {
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

.single-post.no-sidebar .entry-header {
	max-width: 760px;
	margin: 0 auto 36px;
	text-align: center;
}

.single-post.no-sidebar .entry-header .entry-meta {
	margin-top: 16px;
}

.single-post.no-sidebar .featured-image {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.single-post.no-sidebar .featured-image img {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.single-post.no-sidebar .entry-content > *:not(.alignwide):not(.alignfull),
.single-post.no-sidebar footer.entry-meta,
.single-post.no-sidebar .post-navigation {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.single-post.no-sidebar .entry-content > .alignwide {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.single-post.no-sidebar .comments-area {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   10. Sidebar & footer
   ========================================================================== */

.sidebar .widget {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px var(--shadow);
	color: var(--text-2);
	font-size: 15px;
}

.sidebar .widget a {
	color: var(--text-2);
}

.sidebar .widget a:hover {
	color: var(--text);
}

.sidebar .widget .widget-title,
.sidebar .widget .wp-block-heading {
	margin-bottom: 14px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--text);
}

.site-footer {
	border-top: 1px solid var(--border);
}

.footer-widgets,
.site-info {
	background-color: var(--surface-2);
	color: var(--text-3);
}

.footer-widgets {
	font-size: 14.5px;
}

.footer-widgets .widget-title,
.footer-widgets .widget .wp-block-heading {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-3);
}

.footer-widgets a,
.site-info a {
	color: var(--text-2);
}

.footer-widgets a:hover,
.site-info a:hover {
	color: var(--text);
}

.footer-widgets ul li {
	margin-bottom: 10px;
}

.site-info {
	font-size: 14px;
}

.footer-widgets + .site-info {
	border-top: 1px solid var(--border);
}

a.generate-back-to-top {
	background-color: var(--surface);
	color: var(--text-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: 0 6px 18px var(--shadow-lg);
}

a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
	background-color: var(--surface);
	color: var(--text);
}

/* ==========================================================================
   11. Small screens
   ========================================================================== */

/* Open phone menu: no grey panel, less space above it. */
.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus,
.has-inline-mobile-toggle #site-navigation.toggled {
	background-color: transparent;
}

.has-inline-mobile-toggle #site-navigation.toggled {
	margin-top: 8px;
}

@media (max-width: 768px) {
	body {
		font-size: 16px;
	}

	.entry-content > p,
	.entry-content > ul,
	.entry-content > ol {
		font-size: 17px;
	}

	.main-navigation .main-nav > ul {
		gap: 2px;
		padding: 8px 0 12px;
	}

	.main-navigation .main-nav ul li a {
		padding: 12px 13px;
	}

	.main-navigation .main-nav ul li.nav-cta > a {
		margin: 6px 0 0;
		text-align: center;
	}

	.main-navigation ul ul {
		box-shadow: none;
		border: 0;
		padding: 0 0 0 12px;
	}

	.single-post.no-sidebar .entry-header {
		text-align: left;
	}
}