/*
Theme Name: GWEFC
Theme URI: https://glasgowfencing.com/
Author: Glasgow West End Fencing Club
Author URI: https://glasgowfencing.com/
Description: Custom WordPress theme for Glasgow West End Fencing Club — a fencing club for adult beginners and social fencers in Glasgow's West End.
Version: 1.1.9
Requires at least: 6.0
Tested up to: 7.1
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: gwefc
Tags: custom-menu, footer-widgets, custom-logo, custom-header
*/

/* ================================================================
   CSS Custom Properties
   ================================================================ */
:root {
	--color-primary:       #634460;  /* purple — headings, links, active nav */
	--color-header-bg:     #442b40;  /* dark plum — header bg + footer border */
	--color-site-name:     #e3b424;  /* amber gold — site title */
	--color-body:          #575757;  /* dark grey — body text */
	--color-sidebar-home:  #ffd075;  /* golden yellow — homepage right sidebar */
	--color-footer-bg:     #efefef;  /* light grey — footer background */
	--font-body:           "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-heading:        "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ================================================================
   Reset / Base
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-body);
	background: #fff;
}

img { max-width: 100%; height: auto; border: 0; }
table { border-collapse: collapse; width: 100%; }
hr { height: 1px; border: 1px solid #ccc; }

a:link, a:visited  { color: blue; text-decoration: none; }
a:hover, a:active  { color: red; text-decoration: underline; }

/* ================================================================
   Typography
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: 1.3em;
}

h1, h2, h3 { color: var(--color-primary); }

h1 { font-size: 2.2em;  font-weight: 300; padding: 0; margin: 0; }
h2 { font-size: 1.5em;  font-weight: 300; margin-bottom: 0; }
h3 { font-size: 1.4em;  margin-bottom: 0; }
h4 { font-size: 1.2em;  margin-bottom: 0; }
h5 { font-size: 1.1em;  font-weight: 600; margin-bottom: 0; }
h6 { font-size: 1em;    font-weight: bold; }

p { margin: 0 0 0.8em; line-height: 1.25em; }

ul, ol { margin-left: 0; padding-left: 2em; }
ul           { list-style-type: disc; }
ul ul        { list-style-type: circle; }
ul ul ul     { list-style-type: square; }
ol           { list-style-type: decimal; }
ol ol        { list-style-type: lower-alpha; }

pre, code, tt {
	font: 1em "andale mono", "lucida console", monospace;
	line-height: 1.5;
}

pre {
	background: #efefef;
	display: block;
	padding: 5px;
	margin: 5px 0;
	border: 1px solid #aaa;
}

/* ================================================================
   Page wrapper
   ================================================================ */
#page {
	width: calc(100% - 2rem);
	max-width: 1200px;
	margin: 0 auto;
}

/* ================================================================
   Header
   ================================================================ */
.site-header {
	background: var(--color-header-bg);
	margin-inline: calc(50% - 50vw);
	width: 100vw;
}

.site-header-inner {
	width: min(1200px, calc(100% - 2rem));
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
}

.header-branding {
	display: flex;
	align-items: center;
	padding: 0.25rem 0.5em;
	flex-wrap: nowrap;
}

.site-logo {
	flex: 0 0 auto;
	line-height: 0;
}
.site-logo img { display: block; }

.site-title {
	font-family: var(--font-heading);
	font-size: clamp(3.5rem, 7vw, 9rem);
	font-weight: 400;
	line-height: 1.2em;
	margin: 0;
	padding-left: 0.25em;
	white-space: nowrap;
	min-width: 0;
}

.site-title a:link,
.site-title a:visited { color: var(--color-site-name); }
.site-title a:hover   { color: var(--color-site-name); text-decoration: none; }

.header-banner {
	display: flex;
	align-items: flex-end;
	flex-shrink: 0;
	margin-right: calc(50% - 50vw);
}

.header-banner img { display: block; }

@media screen and (max-width: 760px) {
	.gallery-collections {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-title   { font-size: 2rem; }
	.header-banner { display: none; }
}

/* ================================================================
   Navigation
   ================================================================ */
.site-navigation { background: #fff; }

.main-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem;
	align-items: flex-end;
}

/* Each nav item is a coloured block sized to its label. */
.main-menu > li {
	font-family: var(--font-heading);
	font-size: clamp(1.35rem, 2.2vw, 2rem);
	text-align: center;
	margin: 0;
}

.main-menu > li > a {
	display: block;
	padding: 0.15em 0.65em;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
}

.main-menu > li > a:hover { text-decoration: none; color: #000; }

/* Hide sub-menus in the main nav */
.main-menu .sub-menu { display: none; }

/* Social icon items — floated to the right */
.main-menu > li.nav-fb,
.main-menu > li.nav-tw {
	width: 40px;
	height: 40px;
	font-size: 1em;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	flex-shrink: 0;
	margin-right: 0;
}

.main-menu > li.nav-fb { margin-left: auto; }  /* pushes social icons right */

.main-menu > li.nav-fb a,
.main-menu > li.nav-tw a { color: transparent; font-size: 0; }

/* ── Section colours (add these CSS classes to menu items in WP Admin) ── */
.main-menu > li.nav-gwefc  { background-color: rgba(99,  68,  96,  0.75); }
.main-menu > li.nav-news   { background-color: rgba(229, 185, 50,  0.80); }
.main-menu > li.nav-events { background-color: rgba(251, 26,  17,  0.70); }
.main-menu > li.nav-facts  { background-color: rgba(255, 120, 45,  0.75); }
.main-menu > li.nav-other  { background-color: rgba(248, 241, 53,  0.90); }

/* GWEFC item has white text; others are dark */
.main-menu > li.nav-gwefc > a { color: #fff; }
.main-menu > li.nav-gwefc > a:hover { color: #fff; }

/* Active + hover = full opacity */
.main-menu > li.nav-gwefc.current-menu-item,
.main-menu > li.nav-gwefc.current-menu-ancestor,
.home .main-menu > li.nav-gwefc,
.main-menu > li.nav-gwefc:hover {
	background-color: rgba(99, 68, 96, 1);
}

.main-menu > li.nav-news.current-menu-item,
.main-menu > li.nav-news.current-menu-ancestor,
.main-menu > li.nav-news:hover {
	background-color: rgba(229, 185, 50, 1);
}

.main-menu > li.nav-events.current-menu-item,
.main-menu > li.nav-events.current-menu-ancestor,
.main-menu > li.nav-events:hover {
	background-color: rgba(251, 26, 17, 1);
}

.main-menu > li.nav-facts.current-menu-item,
.main-menu > li.nav-facts.current-menu-ancestor,
.main-menu > li.nav-facts:hover {
	background-color: rgba(255, 120, 45, 1);
}

.main-menu > li.nav-other.current-menu-item,
.main-menu > li.nav-other.current-menu-ancestor,
.main-menu > li.nav-other:hover {
	background-color: rgba(248, 241, 53, 1);
}

.mobile-menu-toggle { display: none; }

/* ================================================================
   Layout — #main
   ================================================================ */
#main {
	display: flex;
	align-items: flex-start;
	position: relative;
}

/* ── Homepage: content with a stacked sidebar ── */
.layout-home .homepage-main {
	display: block;
	padding: 1.5em 1em;
	background-color: #f8f9f6;
	background-image:
		linear-gradient(rgb(255 255 255 / 82%), rgb(255 255 255 / 82%)),
		var(--homepage-background-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.homepage-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.95fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

.homepage-primary,
.homepage-sidebar { min-width: 0; }

.homepage-introduction .entry-title {
	font-size: clamp(1.8rem, 3vw, 2.2rem);
	font-weight: 400;
}

.homepage-introduction .entry-content {
	font-size: 1.2em;
}

.homepage-introduction .entry-content p { line-height: 1.35; }

.module-title {
	margin: 0 0 0.3em;
	font-size: 1.25em;
	font-weight: 400;
	color: var(--color-primary);
}

.homepage-recent-news { margin-top: 2em; }

.homepage-news-item {
	min-width: 0;
	margin-bottom: 1.25em;
}
.homepage-news-item h3,
.homepage-latest-item h3 {
	margin: 0;
	font-size: 1.2em;
	font-weight: 300;
}

.homepage-news-item p,
.homepage-latest-item p { line-height: 1.3; }

.homepage-news-item p,
.homepage-latest-item p {
	overflow-wrap: anywhere;
}

/* Imported posts can contain URLs longer than a homepage column. */
.homepage-news-item p a,
.homepage-latest-item p a {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
	white-space: nowrap;
}

.module-more {
	margin: 0.25em 0 1.75em;
	font-size: 0.9em;
}

.homepage-gallery { margin-top: 2em; }

.homepage-gallery .wp-block-gallery,
.homepage-gallery .gallery {
	margin: 0;
}

.homepage-gallery img {
	display: block;
	width: 100%;
	height: auto;
}

.homepage-gallery-daily a {
	display: block;
	background: #fff;
	text-align: center;
}

/* Keep portrait source images from overwhelming the homepage sidebar. */
.homepage-gallery-daily .daily-gallery-image {
	width: 100%;
	height: clamp(180px, 18vw, 240px);
	object-fit: contain;
}

body.gwefc-gallery-lightbox-open {
	overflow: hidden;
}

.gwefc-gallery-lightbox {
	position: fixed;
	z-index: 1000;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 2rem;
	background: rgba(0, 0, 0, 0.8);
}

.gwefc-gallery-lightbox img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 4rem);
	object-fit: contain;
}

.gwefc-gallery-lightbox-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	border: 0;
	padding: 0.3rem 0.6rem;
	background: #fff;
	color: #000;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.entry-content .gwefc-gallery-lightbox-trigger {
	cursor: zoom-in;
}

.homepage-information {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.25em;
	row-gap: 1.25em;
	margin-top: 2em;
}

.homepage-pane { min-width: 0; }

.homepage-pane .pane-title,
.homepage-pane .widget-title {
	margin: 0 0 0.15em;
	font-family: var(--font-heading);
	font-size: 1.2em;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-primary);
}

.homepage-pane p { margin: 0; font-size: 0.9em; line-height: 1.25; }

.homepage-pane a { color: var(--color-body); }
.homepage-pane a:hover { color: red; }

/* Homepage information links highlight their whole information pane. */
.homepage-pane .front-pane-link,
.homepage-pane .front-pane-link:hover,
.homepage-pane .front-pane-link:active {
	color: var(--color-body);
	text-decoration: none;
}

.homepage-pane:has(.front-pane-link:hover),
.homepage-pane:has(.front-pane-link:focus-visible) {
	background-color: rgba(0, 0, 0, 0.04);
	box-shadow: 0 0 0 1px red;
}

.homepage-next-event { margin-top: 2.5em; }

.homepage-event-item time {
	display: inline-block;
	margin-right: 0.5em;
	font-size: 0.8em;
	color: #b5b5b5;
}

/* ── Section pages: sidebar left, content right ── */
.layout-section #main { }

.layout-section #sidebar-primary {
	flex: 0 0 220px;
	width: 220px;
	padding: 1em 0.75em 1em 0.5em;
	order: -1; /* sidebar renders left even if placed after content in HTML */
}

/* News uses a fixed editorial navigation column, independent of post content. */
.layout-section #sidebar-primary.news-sidebar {
	flex-basis: 200px;
	width: 200px;
}

.layout-section #sidebar-primary.section-sidebar-navigation {
	flex-basis: 200px;
	width: 200px;
}

.layout-section #sidebar-secondary.scottish-fencing-sidebar {
	flex: 0 0 300px;
	width: 300px;
	padding: 1em 0.5em 1em 0.75em;
}

.scottish-fencing-sidebar h2 {
	margin: 0 0 0.5em;
	font-family: var(--font-heading);
	font-size: 1.25em;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-primary);
}

.scottish-fencing-sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.scottish-fencing-sidebar li {
	margin-bottom: 1em;
	font-size: 0.9em;
	line-height: 1.3;
}

.scottish-fencing-sidebar a:link,
.scottish-fencing-sidebar a:visited {
	color: blue;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.scottish-fencing-sidebar a:hover,
.scottish-fencing-sidebar a:active {
	color: red;
	text-decoration: underline;
}

.scottish-fencing-sidebar p {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.3;
}

.scottish-fencing-events time {
	margin-right: 0.35em;
	font-size: 0.85em;
	color: #777;
}

.layout-section #content {
	flex: 1;
	min-width: 0;
	padding: 1em;
}

/* ── Full-width (pages, single posts, etc.) ── */
.layout-full #content {
	flex: 1;
	padding: 1em;
}

/* ================================================================
   Content — posts & pages
   ================================================================ */
.entry-header { margin-bottom: 0.5em; }
.entry-title  { margin-bottom: 0.25em; }

.entry-meta {
	font-size: 85%;
	color: #b5b5b5;
	line-height: 1.75em;
	margin-bottom: 0.5em;
}

.entry-content { margin-top: 0.5em; }

/* Dotted separator between listed posts */
.post + .post {
	border-top: 3px dotted var(--color-header-bg);
	padding-top: 1em;
	margin-top: 0;
}

.post { margin-bottom: 2em; }

.read-more        { margin-top: 0.5em; }
.read-more a      { font-weight: bold; }

.rss-feed-link {
	margin: 2rem 0 0;
	text-align: right;
}

.rss-feed-link a {
	display: inline-block;
	line-height: 0;
}

.rss-feed-link img {
	display: block;
}

.fact-item + .fact-item {
	border-top: 3px dotted var(--color-header-bg);
	margin-top: 1em;
	padding-top: 1em;
}

.fact-title {
	margin-top: 0;
}

.page-header      { margin-bottom: 1em; }
.page-header h1   { border-bottom: 1px solid #ddd; padding-bottom: 0.3em; }

.gallery-collections {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5em;
}

.gallery-collection {
	text-align: center;
}

.gallery-collection a {
	color: var(--color-body);
	text-decoration: none;
}

.gallery-collection a:hover h2,
.gallery-collection a:focus-visible h2 {
	text-decoration: underline;
}

.gallery-collection img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	margin-bottom: 0.5em;
	object-fit: cover;
}

.gallery-collection h2 {
	margin: 0;
	font-size: 1.1em;
	line-height: 1.2;
}

/* ================================================================
   Events
   ================================================================ */
.event-date {
	font-size: 1em;
	line-height: 1.25em;
	margin-bottom: 0.8em;
}

/* ================================================================
   Section sidebar (left nav)
   ================================================================ */
#sidebar-primary .widget-title {
	font-family: var(--font-heading);
	font-size: 1em;
	font-weight: bold;
	color: var(--color-primary);
	margin-bottom: 0.5em;
}

#sidebar-primary ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#sidebar-primary ul li {
	padding: 0.4em 0;
	border-bottom: 1px solid #ddd;
}

#sidebar-primary ul li a:link,
#sidebar-primary ul li a:visited { color: #434343; text-decoration: none; }
#sidebar-primary ul li a:hover   { color: var(--color-primary); text-decoration: none; }

#sidebar-primary ul li.current-menu-item > a { font-weight: bold; }

.news-navigation h2,
.section-navigation h2 {
	margin: 0 0 0.75em;
	font-family: var(--font-heading);
	font-size: 1.3em;
	font-weight: 600;
	color: var(--color-body);
}

.news-navigation ul li,
.section-navigation ul li {
	border-bottom: 1px solid #ddd;
	padding: 0.45em 0;
	font-family: var(--font-heading);
	font-size: 1.1em;
}

.month-archive-list {
	margin-top: 1em;
}

.month-archive-list li {
	margin-bottom: 0.35em;
}

/* ================================================================
   Footer
   ================================================================ */
.site-footer {
	margin-top: 10px;
	border-top: 6px solid var(--color-footer-border, var(--color-header-bg));
	background: #fff;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
}

.site-footer-inner {
	width: min(1200px, calc(100% - 2rem));
	margin: 0 auto;
}

.footer-content {
	display: flex;
	flex-wrap: wrap;
	padding: 0.8em 0.5em 1.75em;
	gap: 1em;
}

.footer-column {
	flex: 1;
	min-width: 130px;
	font-family: var(--font-heading);
	font-size: 1.45rem;
	line-height: 1.15;
}

/* Top-level footer item (section heading) */
.footer-column > ul { list-style: none; margin: 0; padding: 0; }
.footer-column > ul > li > a {
	font-weight: 400;
	font-size: 0.8em;
	color: #434343;
	display: block;
	padding-bottom: 0.15em;
	text-decoration: none;
}

/* Sub-items */
.footer-column > ul > li > ul { list-style: none; margin: 0; padding: 0; }
.footer-column > ul > li:not(:first-child) > a,
.footer-column > ul > li > ul > li > a {
	display: block;
	font-size: 0.6em;
	color: var(--color-primary);
	text-decoration: none;
}

.footer-column > ul > li > a:hover,
.footer-column > ul > li:hover > a,
.footer-column > ul > li > ul > li > a:hover,
.footer-column > ul > li > ul > li:hover > a {
	text-decoration: underline;
}

.footer-column li.current-menu-item > a,
.footer-column li.current_page_item > a {
	font-weight: 700;
}

.footer-bottom {
	text-align: center;
	font-size: 0.8em;
	padding: 0.5em 1em 1em;
	color: #777;
}

/* ================================================================
   Pagination
   ================================================================ */
.pagination,
.nav-links { margin: 2em 0; text-align: center; }

.page-numbers {
	display: inline-block;
	padding: 0.25em 0.75em;
	border: 1px solid #ccc;
	margin: 0 0.1em;
	color: var(--color-body);
	text-decoration: none;
}

.page-numbers.current,
.page-numbers:hover {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
	text-decoration: none;
}

/* ================================================================
   Accessibility
   ================================================================ */
.skip-link {
	position: absolute;
	left: -9999em;
	top: 0;
	z-index: 999;
}

.skip-link:focus {
	left: 0;
	background: #fff;
	padding: 0.5em 1em;
	border: 2px solid var(--color-primary);
}

/* WordPress screen-reader-text utility */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ================================================================
   Responsive
   ================================================================ */
@media screen and (max-width: 760px) {
	body { overflow-x: hidden; }

	.layout-section #main {
		flex-direction: column;
		max-width: 100%;
	}

	#page { width: calc(100% - 1.25rem); }

	.layout-home .homepage-main { padding: 1.25em 0.75em; }
	.homepage-grid { grid-template-columns: 1fr; gap: 2em; }
	.homepage-information { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* On phones, keep the primary introduction first, then the full sidebar. */
	.homepage-primary { display: contents; }
	.homepage-introduction { order: 0; }
	.homepage-sidebar { order: 1; }
	.homepage-recent-news {
		order: 2;
		margin-top: 0;
	}

	.layout-section #sidebar-primary {
		flex: 0 0 auto;
		width: 100%;
		order: 0;
		padding: 0.5em;
	}

	.layout-section #sidebar-primary.news-sidebar {
		flex-basis: auto;
		width: 100%;
	}

	.layout-section #sidebar-primary.section-sidebar-navigation {
		flex-basis: auto;
		width: 100%;
	}

	.layout-section #sidebar-secondary.scottish-fencing-sidebar {
		flex: 0 0 auto;
		width: 100%;
		order: 2;
		padding: 0.5em;
	}

	.layout-section:has(#sidebar-secondary.scottish-fencing-sidebar) #content {
		order: 1;
	}

	.layout-section #content,
	.entry-header,
	.entry-content {
		max-width: 100%;
	}

	.entry-content {
		overflow-wrap: anywhere;
	}

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

	.entry-content a {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.entry-content figure,
	.entry-content .wp-block-image,
	.entry-content .wp-block-gallery {
		max-width: 100% !important;
		margin-inline: 0;
	}

	.entry-content img {
		max-width: 100% !important;
		height: auto !important;
	}

	.entry-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	.footer-content { flex-direction: column; }
	.footer-column  { min-width: 100%; }
}

@media screen and (max-width: 600px) {
	.header-branding { min-width: 0; }
	.mobile-hamburger-menu .header-branding { width: 100%; }
	.site-logo img { max-width: 78px; }
	.site-title { font-size: clamp(1.5rem, 8vw, 2.1rem); }

	.mobile-hamburger-menu .site-title {
		font-size: clamp(1.25rem, 6.4vw, 1.8rem);
		white-space: nowrap;
	}

	.main-menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.2rem;
	}

	.main-menu > li { font-size: 1.25rem; }
	.main-menu > li > a { padding: 0.45em 0.25em; }
	.main-menu > li.nav-other { grid-column: span 2; }
	.main-menu > li.nav-fb,
	.main-menu > li.nav-tw { margin-left: 0; }

	.mobile-hamburger-menu .mobile-menu-toggle {
		display: grid;
		place-items: center;
		flex: 0 0 auto;
		width: 2.75rem;
		height: 2.75rem;
		border: 0;
		margin-left: auto;
		padding: 0;
		background: transparent;
		color: #fff;
		cursor: pointer;
	}

	.mobile-menu-toggle-icon,
	.mobile-menu-toggle-icon::before,
	.mobile-menu-toggle-icon::after {
		display: block;
		width: 1.25rem;
		height: 2px;
		background: currentColor;
		content: "";
	}

	.mobile-menu-toggle-icon {
		position: relative;
	}

	.mobile-menu-toggle-icon::before,
	.mobile-menu-toggle-icon::after {
		position: absolute;
		left: 0;
	}

	.mobile-menu-toggle-icon::before { top: -0.38rem; }
	.mobile-menu-toggle-icon::after { top: 0.38rem; }

	.mobile-hamburger-menu .main-menu {
		display: none;
	}

	.mobile-hamburger-menu .main-menu.is-open {
		display: grid;
	}

	.mobile-horizontal-section-menus.layout-section #sidebar-primary {
		padding: 0.5rem 0;
	}

	.mobile-horizontal-section-menus.layout-section #sidebar-primary ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem;
	}

	.mobile-horizontal-section-menus.layout-section #sidebar-primary ul li,
	.mobile-horizontal-section-menus.layout-section .news-navigation ul li {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.mobile-horizontal-section-menus.layout-section #sidebar-primary ul li a {
		display: block;
		padding: 0.35rem 0.5rem;
		border: 1px solid #ddd;
	}
}

@media screen and (max-width: 420px) {
	.gallery-collections {
		grid-template-columns: 1fr;
	}

	.homepage-information { grid-template-columns: 1fr; }
}