/*!
Theme Name: rylcons
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
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: rylcons
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.

rylcons is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under 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/
*/

/* --------------------------------------------------------------------------
   Global variables
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --rylcons-color-primary: #000066;
  --rylcons-color-primary-dark: #00004d;
  --rylcons-color-secondary: #FB2C36;
  --rylcons-color-secondary-dark: #e0212b;
  --rylcons-color-white: #ffffff;

  /* Text colors */
  --rylcons-color-text: #2b2d42;
  --rylcons-color-text-muted: #8392AD;
  --rylcons-color-text-on-dark: #ffffff;

  /* Surfaces / borders */
  --rylcons-color-border: #ebedf1;
  --rylcons-shadow-header: 0 2px 12px rgba(17, 17, 60, 0.06);
  --rylcons-shadow-dropdown: 0 16px 32px rgba(17, 17, 60, 0.12);
  --rylcons-color-footer-bg: #eceef2;
  --rylcons-color-footer-divider: #dadee7;
  --rylcons-color-facebook: #1877f2;
  --rylcons-color-x: #000000;
  --rylcons-color-instagram: #e4405f;
  --rylcons-color-linkedin: #0a66c2;

  /* Typography */
  --rylcons-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rylcons-fs-topbar: 0.875rem;
  --rylcons-fs-nav: 0.9375rem;
  --rylcons-fs-btn: 0.9375rem;
  --rylcons-fs-footer: 0.875rem;
  --rylcons-fs-footer-heading: 1rem;
  --rylcons-fw-regular: 400;
  --rylcons-fw-medium: 500;
  --rylcons-fw-semibold: 600;

  /* Layout */
  --rylcons-container-width: 1280px;
  --rylcons-container-padding: 20px;
  --rylcons-topbar-height: 44px;
  --rylcons-header-height: 96px;
  --rylcons-radius-sm: 6px;
  --rylcons-radius-md: 10px;
  --rylcons-radius-pill: 999px;
  --rylcons-transition: 0.2s ease;

  /* Z-index scale */
  --rylcons-z-header: 100;
  --rylcons-z-dropdown: 110;
  --rylcons-z-mobile-panel: 120;
}

/* 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;
}

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

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: var(--rylcons-font-family);
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

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: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

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

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

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

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: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

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

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

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: #aaa #bbb #bbb;
}

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: #666;
	border: 1px solid #ccc;
	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: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

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

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

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

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

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

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

.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;
}

.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;
}

/*--------------------------------------------------------------
# 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;
}

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

.rylcons-header {
  font-family: var(--rylcons-font-family);
  position: relative;
  z-index: var(--rylcons-z-header);
}

.rylcons-header a {
  text-decoration: none;
  color: inherit;
}

.rylcons-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rylcons-header button {
  font-family: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. Container — reuse this class across other sections of the theme
   -------------------------------------------------------------------------- */

/* --rylcons-container-width is the CONTENT width, matching Elementor's
   --container-max-width. Elementor keeps its gutter on the outer .e-con and
   leaves .e-con-inner unpadded, so its 1280px is content. Because this box is
   border-box, the gutter has to be added on top of the content width for the
   two to line up; otherwise the padding eats inward and this container sits
   20px inside .e-con-inner on each side. */
.rylcons-container {
  width: 100%;
  max-width: calc(var(--rylcons-container-width) + (var(--rylcons-container-padding) * 2));
  margin-inline: auto;
  padding-inline: var(--rylcons-container-padding);
}

/* --------------------------------------------------------------------------
   4. Top bar
   -------------------------------------------------------------------------- */
.rylcons-topbar {
  background-color: var(--rylcons-color-primary);
  color: var(--rylcons-color-text-on-dark);
  min-height: var(--rylcons-topbar-height);
}

.rylcons-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--rylcons-topbar-height);
  flex-wrap: wrap;
  padding-block: 8px;
}

.rylcons-topbar__message {
  margin: 0;
  font-size: var(--rylcons-fs-topbar);
  font-weight: var(--rylcons-fw-regular);
  opacity: 0.95;
}

.rylcons-topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--rylcons-fs-topbar);
  font-weight: var(--rylcons-fw-medium);
  white-space: nowrap;
  transition: opacity var(--rylcons-transition);
}

.rylcons-topbar__phone:hover,
.rylcons-topbar__phone:focus-visible {
  opacity: 0.8;
}

.rylcons-topbar__phone .rylcons-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   5. Main header row
   -------------------------------------------------------------------------- */
.rylcons-main {
  background-color: var(--rylcons-color-white);
  box-shadow: var(--rylcons-shadow-header);
}

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

/* Logo */
.rylcons-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
}

.rylcons-logo__img {
  display: block;
  width: auto;
}

/* CTA button (also reusable anywhere: .rylcons-btn) */
.rylcons-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  border-radius: var(--rylcons-radius-md);
  padding: 13px 22px;
  font-size: var(--rylcons-fs-btn);
  font-weight: var(--rylcons-fw-semibold);
  white-space: nowrap;
  transition: background-color var(--rylcons-transition), transform var(--rylcons-transition);
}

.rylcons-btn--primary {
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
}

.rylcons-btn--primary:hover,
.rylcons-btn--primary:focus-visible {
  background-color: var(--rylcons-color-secondary-dark);
}

.rylcons-btn--primary:active {
  transform: translateY(1px);
}

/* Square, and the SVG is sized to the span. Left to itself the inline SVG
   renders at its own 24x24 whatever the span is, which pushed the arrow out of
   the button's centre. */
.rylcons-btn .rylcons-icon--arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.rylcons-btn .rylcons-icon--arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rylcons-main__cta {
  flex-shrink: 0;
}

.rylcons-main__cta .rylcons-btn--primary {
  color: var(--rylcons-color-white);
}

/* --------------------------------------------------------------------------
   6. Primary navigation — desktop, multi-level dropdown
   -------------------------------------------------------------------------- */
.rylcons-main__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px;
  border: 1px solid #D4D9E3;
  border-radius: 16px;
}

.rylcons-nav {
  flex-shrink: 1;
}

.rylcons-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.rylcons-menu > .menu-item {
  position: relative;
}

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

.rylcons-menu a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: var(--rylcons-fs-nav);
  font-weight: var(--rylcons-fw-medium);
  color: var(--rylcons-color-text-muted);
  border-radius: var(--rylcons-radius-sm);
  white-space: nowrap;
  transition: color var(--rylcons-transition), background-color var(--rylcons-transition);
}

.rylcons-menu .menu-item-has-children > a {
  padding-right: 4px;
}

.rylcons-menu > .menu-item > a:hover,
.rylcons-menu > .menu-item > a:focus-visible {
  color: var(--rylcons-color-primary);
}

/* Active / current page item */
.rylcons-menu > .current-menu-item > a,
.rylcons-menu > .current_page_item > a,
.rylcons-menu > .current-menu-ancestor > a {
  color: var(--rylcons-color-primary);
  font-weight: var(--rylcons-fw-semibold);
}

/* Dropdown toggle — a real <button>, sibling of the <a>, not nested inside it */
.rylcons-submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-right: 6px;
  background: transparent;
  border: none;
  border-radius: var(--rylcons-radius-sm);
  color: inherit;
  flex-shrink: 0;
}

.rylcons-submenu-toggle:hover,
.rylcons-submenu-toggle:focus-visible {
  color: var(--rylcons-color-primary);
  background-color: #f5f5fa;
}

.rylcons-submenu-toggle .rylcons-caret {
  width: 10px;
  height: 10px;
  transition: transform var(--rylcons-transition);
}

.rylcons-menu .menu-item-has-children:hover > .rylcons-submenu-toggle .rylcons-caret,
.rylcons-menu .menu-item-has-children.rylcons-submenu-open > .rylcons-submenu-toggle .rylcons-caret {
  transform: rotate(180deg);
}

/* Sub-menus (all levels) */
.rylcons-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background-color: var(--rylcons-color-white);
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  box-shadow: var(--rylcons-shadow-dropdown);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--rylcons-transition), transform var(--rylcons-transition), visibility var(--rylcons-transition);
  z-index: var(--rylcons-z-dropdown);
}

/* Nested (3rd level+) sub-menus open to the right of their parent */
.rylcons-menu .sub-menu .sub-menu {
  top: -9px;
  left: 100%;
  transform: translateX(6px);
}

.rylcons-menu .sub-menu .menu-item {
  position: relative;
}

.rylcons-menu .sub-menu a {
  color: var(--rylcons-color-text);
  padding: 9px 12px;
  border-radius: var(--rylcons-radius-sm);
  justify-content: space-between;
}

.rylcons-menu .sub-menu a:hover,
.rylcons-menu .sub-menu a:focus-visible {
  color: var(--rylcons-color-primary);
  background-color: #f5f5fa;
}

.rylcons-menu .sub-menu .current-menu-item > a {
  color: var(--rylcons-color-primary);
  font-weight: var(--rylcons-fw-semibold);
}

/* Reveal on hover (desktop) */
@media (hover: hover) {
  .rylcons-menu .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .rylcons-menu .sub-menu .menu-item-has-children:hover > .sub-menu {
    transform: translateX(0);
  }
}

/* Reveal via keyboard focus, and via JS-toggled class for touch devices */
.rylcons-menu .menu-item-has-children.rylcons-submenu-open > .sub-menu,
.rylcons-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rylcons-menu .sub-menu .menu-item-has-children.rylcons-submenu-open > .sub-menu {
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   7. Mobile menu toggle (hamburger)
   -------------------------------------------------------------------------- */
.rylcons-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-sm);
  flex-shrink: 0;
}

.rylcons-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--rylcons-color-primary);
  border-radius: 2px;
  transition: transform var(--rylcons-transition), opacity var(--rylcons-transition);
}

.rylcons-toggle[aria-expanded="true"] .rylcons-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.rylcons-toggle[aria-expanded="true"] .rylcons-toggle__bar:nth-child(2) {
  opacity: 0;
}

.rylcons-toggle[aria-expanded="true"] .rylcons-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.rylcons-footer {
  background-color: var(--rylcons-color-footer-bg);
  color: var(--rylcons-color-text-muted);
  font-family: var(--rylcons-font-family);
  font-size: var(--rylcons-fs-footer);
}

.rylcons-footer a {
  text-decoration: none;
  color: inherit;
}

.rylcons-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Icons — the inline SVGs keep the dimensions exported from Figma;
   the span is only a flex box that centres them against the text. */
.rylcons-footer .rylcons-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.rylcons-footer .rylcons-icon svg {
  display: block;
  flex-shrink: 0;
}

.rylcons-footer__top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr);
  column-gap: 40px;
  row-gap: 40px;
  padding-block: 64px 40px;
}

/* Brand column */
.rylcons-footer__logo {
  display: inline-flex;
  align-items: center;
}

.rylcons-footer__logo-img {
  display: block;
  height: auto;
}

.rylcons-footer__tagline {
  margin: 18px 0 0;
  font-size: 1.125rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

.rylcons-footer__about {
  margin: 12px 0 0;
  max-width: 240px;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.6;
  color: var(--rylcons-color-text-muted);
}

/* Column headings */
.rylcons-footer__heading {
  margin: 0 0 18px;
  font-size: var(--rylcons-fs-footer-heading);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

/* Link columns */
.rylcons-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rylcons-footer .rylcons-footer__menu {
  padding-inline-start: 14px;
}

.rylcons-footer__menu-item + .rylcons-footer__menu-item {
  margin-top: 14px;
}

.rylcons-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.4;
  color: var(--rylcons-color-text-muted);
  transition: color var(--rylcons-transition);
}

.rylcons-footer__link:hover,
.rylcons-footer__link:focus-visible {
  color: var(--rylcons-color-primary);
}

.rylcons-footer__link .rylcons-icon--chevron {
  color: var(--rylcons-color-secondary);
}

/* Newsletter form */
.rylcons-footer__subscribe {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background-color: var(--rylcons-color-white);
  border-radius: var(--rylcons-radius-md);
  transition: border-color var(--rylcons-transition);
}

.rylcons-footer__subscribe:focus-within {
  border-color: var(--rylcons-color-secondary);
}

.rylcons-footer__col--contact .rylcons-footer__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  background-color: transparent;
  border: none;
  font-family: inherit;
  font-size: var(--rylcons-fs-footer);
  color: var(--rylcons-color-text);
}

.rylcons-footer__col--contact .rylcons-footer__input::placeholder {
  color: var(--rylcons-color-text-muted);
}

.rylcons-footer__col--contact .rylcons-footer__input:focus {
  outline: none;
}

.rylcons-footer__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  flex-shrink: 0;
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
  border: none;
  border-radius: var(--rylcons-radius-sm);
  cursor: pointer;
  transition: background-color var(--rylcons-transition), transform var(--rylcons-transition);
}

.rylcons-footer__submit:hover,
.rylcons-footer__submit:focus-visible {
  background-color: var(--rylcons-color-secondary-dark);
}

.rylcons-footer__submit:active {
  transform: translateY(1px);
}

.rylcons-footer__submit .rylcons-icon--arrow {
  justify-content: center;
}

/* Contact blocks */
.rylcons-footer__contact {
  margin-top: 24px;
}

.rylcons-footer__contact-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  margin-top: 24px;
}

.rylcons-footer__contact-row .rylcons-footer__contact-block:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

.rylcons-footer__contact-row .rylcons-footer__contact-block:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

.rylcons-footer__contact-block + .rylcons-footer__contact-block {
  margin-top: 0;
}

.rylcons-footer__contact-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

.rylcons-footer__contact-title span:not(.rylcons-icon) {
  white-space: nowrap;
}

.rylcons-footer__contact-title .rylcons-icon {
  width: 20px;
  justify-content: flex-start;
  color: var(--rylcons-color-secondary);
}

.rylcons-footer__contact-text {
  margin: 0;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.6;
  color: var(--rylcons-color-text-muted);
  overflow-wrap: break-word;
}

.rylcons-footer__contact-link {
  color: inherit;
  transition: color var(--rylcons-transition);
}

.rylcons-footer__contact-link:hover,
.rylcons-footer__contact-link:focus-visible {
  color: var(--rylcons-color-primary);
}

/* Bottom bar */
.rylcons-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  border-top: 1px solid var(--rylcons-color-footer-divider);
}

.rylcons-footer__copyright {
  margin: 0;
  font-size: var(--rylcons-fs-footer);
  font-weight: var(--rylcons-fw-regular);
  line-height: 1.5;
  color: var(--rylcons-color-text-muted);
}

.rylcons-footer__dot {
  margin-inline: 4px;
}

.rylcons-footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rylcons-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rylcons-color-text-muted);
  transition: color var(--rylcons-transition);
}

.rylcons-footer__social-link .rylcons-icon {
  width: 24px;
  height: 24px;
  justify-content: center;
}

.rylcons-footer__social-link--facebook:hover,
.rylcons-footer__social-link--facebook:focus-visible {
  color: var(--rylcons-color-facebook);
}

.rylcons-footer__social-link--x:hover,
.rylcons-footer__social-link--x:focus-visible {
  color: var(--rylcons-color-x);
}

.rylcons-footer__social-link--instagram:hover,
.rylcons-footer__social-link--instagram:focus-visible {
  color: var(--rylcons-color-instagram);
}

.rylcons-footer__social-link--linkedin:hover,
.rylcons-footer__social-link--linkedin:focus-visible {
  color: var(--rylcons-color-linkedin);
}

/* --------------------------------------------------------------------------
   9. Responsive — tablet & mobile
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .rylcons-toggle {
    display: inline-flex;
    order: 3;
  }

  .rylcons-main__inner {
    flex-wrap: wrap;
    min-height: auto;
    padding-block: 14px;
  }

  .rylcons-logo {
    margin-right: 0;
  }

  .rylcons-main__cta {
    order: 2;
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  .rylcons-btn--primary span:not(.rylcons-icon) {
    display: none;
  }

  /* Same box as .rylcons-toggle so the pair line up. */
  .rylcons-btn--primary {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
    border-radius: var(--rylcons-radius-pill);
  }

  .rylcons-btn--primary .rylcons-icon--arrow {
    width: 20px;
    height: 20px;
  }

  .rylcons-main__nav {
	flex-wrap: wrap;
	padding: 0;
	border: none;
  }

  .rylcons-nav {
    order: 4;
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--rylcons-transition);
  }

  .rylcons-nav.is-open {
    max-height: 80vh;
    overflow-y: auto;
    margin-top: 14px;
  }

  .rylcons-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--rylcons-color-border);
    padding-top: 8px;
  }

  .rylcons-menu a {
    padding: 12px 6px;
    border-radius: 0;
    width: 100%;
  }

  .rylcons-menu .menu-item-has-children {
    flex-wrap: wrap;
  }

  .rylcons-menu .menu-item-has-children > a {
    flex: 1 1 auto;
  }

  .rylcons-submenu-toggle {
    width: 40px;
    height: 40px;
  }

  /* On mobile, sub-menus expand inline as an accordion instead of a floating panel */
  .rylcons-menu .sub-menu,
  .rylcons-menu .sub-menu .sub-menu {
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    width: 100%;
    flex-basis: 100%;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--rylcons-color-border);
    border-radius: 0;
    padding: 0 0 0 14px;
    margin: 0 0 4px 0;
    max-height: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    transition: max-height var(--rylcons-transition);
  }

  .rylcons-menu .menu-item-has-children.rylcons-submenu-open > .sub-menu {
    max-height: 1000px;
  }

  .rylcons-menu .sub-menu a {
    color: var(--rylcons-color-text-muted);
  }

  .rylcons-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 44px;
    padding-block: 48px 32px;
  }

  .rylcons-footer__subscribe {
    max-width: 360px;
  }

  .rylcons-footer__about {
    max-width: 320px;
  }

}

@media (max-width: 600px) {
  .rylcons-topbar__inner {
    justify-content: flex-start;
    padding-block: 8px;
  }

  .rylcons-topbar__message {
    flex-basis: 100%;
    order: 2;
  }

  .rylcons-topbar__phone {
    order: 1;
  }

  .rylcons-logo__img {
    height: 55px;
  }

  .rylcons-footer__top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 36px;
    padding-block: 40px 28px;
  }

  .rylcons-footer__about {
    max-width: 100%;
  }

  .rylcons-footer__contact-row {
    flex-direction: column;
    gap: 24px;
  }

  .rylcons-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

/* --------------------------------------------------------------------------
   10. Accessibility helpers
   -------------------------------------------------------------------------- */
.rylcons-header a:focus-visible,
.rylcons-header button:focus-visible {
  outline: 2px solid var(--rylcons-color-secondary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rylcons-header * {
    transition: none !important;
  }
}
/* --------------------------------------------------------------------------
   11. Content pages — the shell every non-Elementor page sits in
   -------------------------------------------------------------------------- */

/* Elementor built pages use Elementor's own template and never reach
   .site-main, so this spacing only applies to the blog, archives, search,
   single posts, plain pages and the 404. */
.site-main {
  padding-block: 56px 88px;
  color: var(--rylcons-color-text);
}

.site-main .page-header {
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rylcons-color-border);
}

.site-main .page-title {
  margin: 0;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--rylcons-color-primary);
}

/* The search query inside "Search Results for: %s". */
.site-main .page-title span {
  color: var(--rylcons-color-secondary);
}

.site-main .archive-description {
  margin-top: 12px;
  font-size: var(--rylcons-fs-nav);
  line-height: 1.7;
  color: var(--rylcons-color-text-muted);
}

.site-main .archive-description > *:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   12. Content and sidebar — index, search, archive and single
   -------------------------------------------------------------------------- */

/* The loop prints the header, the articles and the navigation as siblings of
   the sidebar, with the sidebar last, so neither a float (it cannot rise above
   the blocks written before it) nor flex (each sibling would become its own
   column) can put it beside them. A grid can, and this keeps the content first
   in the markup, which is the order wanted once the columns stack.

   :has() rather than a body class: sidebar.php returns nothing when the widget
   area is empty, and the layout should only become two columns when there is
   something to put in the second one. Browsers without :has() get the single
   column with the sidebar underneath, which the markup already reads as. */
.site-main .rylcons-container:has(> .widget-area) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  /* The trailing flexible row is what keeps the articles tight together. The
     sidebar spans every row, and a spanning item taller than the rows it
     covers would otherwise have its extra height shared out between them,
     opening a gap under each article. Track sizing hands the whole of that
     extra to a flexible track instead, so it all lands in this last empty row
     and the content rows keep their own heights. */
  grid-template-rows: repeat(19, min-content) 1fr;
  column-gap: 48px;
}

/* Everything the loop prints stays in the first column; only the sidebar moves
   across, spanning every row so it sits beside the whole list. */
.site-main .rylcons-container:has(> .widget-area) > * {
  grid-column: 1;
  min-width: 0;
}

.site-main .rylcons-container > .widget-area {
  grid-column: 2;
  grid-row: 1 / -1;
}

/* --------------------------------------------------------------------------
   13. Entries — the article itself
   -------------------------------------------------------------------------- */

/* A card in a list; the border and padding come off again on single posts and
   pages, where the article is the whole column. */
.site-main .hentry {
  margin: 0 0 24px;
  padding: 28px;
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-white);
  transition: border-color var(--rylcons-transition), box-shadow var(--rylcons-transition);
}

.site-main .hentry:hover {
  border-color: #dfe3ec;
  box-shadow: var(--rylcons-shadow-header);
}

.single .site-main .hentry,
.page .site-main .hentry {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

.single .site-main .hentry:hover,
.page .site-main .hentry:hover {
  box-shadow: none;
}

.site-main .entry-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--rylcons-color-primary);
}

.site-main .entry-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--rylcons-transition);
}

.site-main .entry-title a:hover,
.site-main .entry-title a:focus-visible {
  color: var(--rylcons-color-secondary);
}

.single .site-main .entry-title,
.page .site-main .entry-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
}

.site-main .entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rylcons-color-text-muted);
}

.site-main .entry-meta a {
  color: inherit;
  text-decoration: none;
  transition: color var(--rylcons-transition);
}

.site-main .entry-meta a:hover,
.site-main .entry-meta a:focus-visible {
  color: var(--rylcons-color-secondary);
}

.site-main .post-thumbnail {
  display: block;
  margin-top: 20px;
  border-radius: var(--rylcons-radius-md);
  overflow: hidden;
}

.site-main .post-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

/* Uniform crop in a list, so rows line up whatever the uploads measure. The
   single post keeps the image's own proportions. */
.site-main a.post-thumbnail img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.site-main .entry-content,
.site-main .entry-summary {
  margin-top: 18px;
  font-size: var(--rylcons-fs-nav);
  line-height: 1.75;
  color: var(--rylcons-color-text);
}

.site-main .entry-content > *:first-child,
.site-main .entry-summary > *:first-child {
  margin-top: 0;
}

.site-main .entry-content > *:last-child,
.site-main .entry-summary > *:last-child {
  margin-bottom: 0;
}

.site-main .entry-content p,
.site-main .entry-summary p {
  margin: 0 0 18px;
}

.site-main .entry-content h1,
.site-main .entry-content h2,
.site-main .entry-content h3,
.site-main .entry-content h4,
.site-main .entry-content h5,
.site-main .entry-content h6 {
  margin: 32px 0 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

.site-main .entry-content h2 {
  font-size: 1.5rem;
}

.site-main .entry-content h3 {
  font-size: 1.25rem;
}

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

.site-main .entry-content a {
  color: var(--rylcons-color-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-main .entry-content ul,
.site-main .entry-content ol {
  margin: 0 0 18px 20px;
  padding: 0;
}

.site-main .entry-content li {
  margin-bottom: 8px;
}

.site-main .entry-content blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-inline-start: 3px solid var(--rylcons-color-secondary);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--rylcons-color-primary);
}

.site-main .entry-content img {
  border-radius: var(--rylcons-radius-sm);
}

.site-main .entry-content table {
  border-collapse: collapse;
}

.site-main .entry-content th,
.site-main .entry-content td {
  padding: 10px 14px;
  border: 1px solid var(--rylcons-color-border);
  text-align: start;
}

.site-main .entry-content th {
  background-color: var(--rylcons-color-footer-bg);
  font-weight: 600;
  color: var(--rylcons-color-primary);
}

.site-main .entry-content pre {
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-footer-bg);
  font-size: 0.875rem;
}

/* The "Continue reading" link the loop appends to a trimmed post. */
.site-main .entry-content .more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--rylcons-fw-semibold);
  color: var(--rylcons-color-primary);
  text-decoration: none;
}

.site-main .entry-content .more-link::after {
  content: "\2192";
  transition: transform var(--rylcons-transition);
}

.site-main .entry-content .more-link:hover {
  color: var(--rylcons-color-secondary);
}

.site-main .entry-content .more-link:hover::after {
  transform: translateX(3px);
}

.site-main .entry-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rylcons-color-border);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--rylcons-color-text-muted);
}

.site-main .entry-footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--rylcons-transition);
}

.site-main .entry-footer a:hover,
.site-main .entry-footer a:focus-visible {
  color: var(--rylcons-color-secondary);
}

.site-main .page-links {
  margin-top: 18px;
  font-size: 0.875rem;
  font-weight: var(--rylcons-fw-semibold);
  color: var(--rylcons-color-primary);
}

.site-main .page-links a {
  margin-inline-start: 6px;
  padding: 4px 10px;
  border-radius: var(--rylcons-radius-sm);
  background-color: var(--rylcons-color-footer-bg);
  color: var(--rylcons-color-primary);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   14. Navigation between posts and pages of results
   -------------------------------------------------------------------------- */
.site-main .navigation {
  margin-top: 36px;
}

.site-main .navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.site-main .navigation .nav-previous,
.site-main .navigation .nav-next {
  max-width: 100%;
}

.site-main .navigation .nav-next {
  margin-inline-start: auto;
  text-align: end;
}

.site-main .navigation a {
  display: inline-block;
  padding: 14px 22px;
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-white);
  font-size: 0.9375rem;
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.4;
  color: var(--rylcons-color-primary);
  text-decoration: none;
  transition: background-color var(--rylcons-transition), color var(--rylcons-transition), border-color var(--rylcons-transition);
}

.site-main .navigation a:hover,
.site-main .navigation a:focus-visible {
  border-color: var(--rylcons-color-primary);
  background-color: var(--rylcons-color-primary);
  color: var(--rylcons-color-white);
}

.site-main .navigation .nav-subtitle {
  display: block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: var(--rylcons-fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rylcons-color-text-muted);
  transition: color var(--rylcons-transition);
}

.site-main .navigation a:hover .nav-subtitle {
  color: rgba(255, 255, 255, 0.72);
}

/* Numbered pagination, for sites that swap in the_posts_pagination(). */
.site-main .pagination .nav-links {
  justify-content: center;
  gap: 8px;
}

.site-main .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  font-size: 0.9375rem;
  font-weight: var(--rylcons-fw-semibold);
  color: var(--rylcons-color-primary);
  text-decoration: none;
}

.site-main .pagination .page-numbers.current {
  border-color: var(--rylcons-color-primary);
  background-color: var(--rylcons-color-primary);
  color: var(--rylcons-color-white);
}

/* --------------------------------------------------------------------------
   15. Sidebar widgets
   -------------------------------------------------------------------------- */
.widget-area .widget {
  margin: 0 0 24px;
  padding: 24px;
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-white);
}

.widget-area .widget:last-child {
  margin-bottom: 0;
}

/* Both spellings on purpose: a classic widget prints .widget-title, a block
   widget prints a plain heading, and the same sidebar can hold either. */
.widget-area .widget-title,
.widget-area .wp-block-heading,
.widget-area .wp-block-search__label {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rylcons-color-border);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

/* The short accent rule that sits on the divider, as on the footer headings. */
.widget-area .widget-title::after,
.widget-area .wp-block-heading::after,
.widget-area .wp-block-search__label::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: 40px;
  height: 2px;
  background-color: var(--rylcons-color-secondary);
}

.widget-area .widget ul,
.widget-area .widget ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.widget-area .widget li {
  padding: 9px 0;
  border-bottom: 1px solid var(--rylcons-color-border);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--rylcons-color-text-muted);
}

.widget-area .widget li:first-child {
  padding-top: 0;
}

.widget-area .widget li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Nested lists keep the rules on their own items, not on the parent. */
.widget-area .widget li > ul,
.widget-area .widget li > ol {
  margin-top: 9px;
  margin-inline-start: 14px;
}

.widget-area .widget a {
  color: var(--rylcons-color-primary);
  text-decoration: none;
  transition: color var(--rylcons-transition);
}

.widget-area .widget a:hover,
.widget-area .widget a:focus-visible {
  color: var(--rylcons-color-secondary);
}

.widget-area .widget_recent_entries .post-date,
.widget-area .widget_rss .rss-date {
  display: block;
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--rylcons-color-text-muted);
}

.widget-area .widget select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-white);
  font-size: 0.875rem;
  color: var(--rylcons-color-primary);
}

.widget-area .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.widget-area .tagcloud a {
  padding: 6px 12px;
  border-radius: var(--rylcons-radius-pill);
  background-color: var(--rylcons-color-footer-bg);
  font-size: 0.75rem !important;
  font-weight: var(--rylcons-fw-medium);
  color: var(--rylcons-color-primary);
  transition: background-color var(--rylcons-transition), color var(--rylcons-transition);
}

.widget-area .tagcloud a:hover {
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
}

/* Block widgets wrap their list in a group container, so the list rules above
   already reach it; these are the parts with markup of their own. */
.widget-area .wp-block-latest-comments {
  padding-inline-start: 0;
}

.widget-area .wp-block-latest-comments__comment {
  min-height: 0;
  line-height: 1.5;
}

.widget-area .wp-block-latest-comments__comment-meta {
  font-size: 0.875rem;
}

.widget-area .wp-block-latest-comments__comment-author,
.widget-area .wp-block-latest-posts__post-title {
  font-weight: var(--rylcons-fw-semibold);
}

.widget-area .wp-block-latest-posts__post-date,
.widget-area .wp-block-latest-comments__comment-date {
  display: block;
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--rylcons-color-text-muted);
}

.widget-area .wp-block-group__inner-container > *:last-child {
  margin-bottom: 0;
}

/* The block search widget. Scoped to the sidebar, which puts it a class above
   the block library's own rules whichever stylesheet loads last. */
/* A label is inline by default, so its padding and border would sit behind the
   input instead of above it. */
.widget-area .wp-block-search__label {
  display: block;
}

.widget-area .wp-block-search__inside-wrapper {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.widget-area .wp-block-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-white);
  font-family: var(--rylcons-font-family);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--rylcons-color-primary);
}

.widget-area .wp-block-search__input:focus {
  outline: none;
  border-color: var(--rylcons-color-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 102, 0.08);
}

.widget-area .wp-block-search__button {
  flex-shrink: 0;
  padding: 12px 20px;
  border: 1px solid var(--rylcons-color-primary);
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-primary);
  font-family: var(--rylcons-font-family);
  font-size: var(--rylcons-fs-btn);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.4;
  color: var(--rylcons-color-white);
  text-shadow: none;
  cursor: pointer;
  transition: background-color var(--rylcons-transition), border-color var(--rylcons-transition);
}

.widget-area .wp-block-search__button:hover,
.widget-area .wp-block-search__button:focus {
  border-color: var(--rylcons-color-secondary);
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
}

.widget-area .widget_calendar table {
  font-size: 0.8125rem;
}

.widget-area .widget_calendar caption {
  padding-bottom: 8px;
  font-weight: var(--rylcons-fw-semibold);
  color: var(--rylcons-color-primary);
}

/* --------------------------------------------------------------------------
   16. Search form
   -------------------------------------------------------------------------- */

/* Two classes rather than one throughout: the Underscores base styles these
   inputs by attribute selector, which outranks a single class. */
.search-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.search-form label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.search-form .search-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-white);
  font-family: var(--rylcons-font-family);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--rylcons-color-primary);
}

.search-form .search-field::placeholder {
  color: var(--rylcons-color-text-muted);
}

.search-form .search-field:focus {
  outline: none;
  border-color: var(--rylcons-color-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 102, 0.08);
}

.search-form .search-submit {
  flex-shrink: 0;
  padding: 12px 22px;
  border: 1px solid var(--rylcons-color-primary);
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-primary);
  font-family: var(--rylcons-font-family);
  font-size: var(--rylcons-fs-btn);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1.4;
  color: var(--rylcons-color-white);
  text-shadow: none;
  cursor: pointer;
  transition: background-color var(--rylcons-transition), border-color var(--rylcons-transition);
}

.search-form .search-submit:hover,
.search-form .search-submit:focus {
  border-color: var(--rylcons-color-secondary);
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
}

/* --------------------------------------------------------------------------
   17. Nothing found
   -------------------------------------------------------------------------- */
.site-main .no-results .page-content {
  font-size: var(--rylcons-fs-nav);
  line-height: 1.75;
  color: var(--rylcons-color-text-muted);
}

.site-main .no-results .page-content .search-form {
  max-width: 520px;
  margin-top: 22px;
}

/* --------------------------------------------------------------------------
   18. Comments
   -------------------------------------------------------------------------- */
.comments-area {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--rylcons-color-border);
}

.comments-area .comments-title,
.comments-area .comment-reply-title {
  margin: 0 0 24px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rylcons-color-primary);
}

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

.comments-area .comment-list .children {
  margin-inline-start: 28px;
}

.comments-area .comment-body {
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-white);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--rylcons-color-text);
}

.comments-area .comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--rylcons-color-primary);
}

.comments-area .comment-author .avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--rylcons-radius-pill);
}

.comments-area .comment-author .fn {
  font-style: normal;
  font-weight: var(--rylcons-fw-semibold);
}

.comments-area .comment-author a,
.comments-area .comment-metadata a {
  color: inherit;
  text-decoration: none;
}

.comments-area .comment-metadata {
  margin: 6px 0 12px;
  font-size: 0.75rem;
  color: var(--rylcons-color-text-muted);
}

.comments-area .reply {
  margin-top: 10px;
}

.comments-area .reply a {
  font-size: 0.75rem;
  font-weight: var(--rylcons-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rylcons-color-secondary);
  text-decoration: none;
}

.comments-area .comment-respond {
  margin-top: 32px;
}

.comments-area .comment-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.comments-area .comment-form > p {
  flex: 1 1 100%;
  margin: 0;
}

.comments-area .comment-form .comment-form-author,
.comments-area .comment-form .comment-form-email {
  flex: 1 1 240px;
}

.comments-area .comment-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: var(--rylcons-fw-semibold);
  color: var(--rylcons-color-primary);
}

.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"],
.comments-area .comment-form input[type="url"],
.comments-area .comment-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--rylcons-color-border);
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-white);
  font-family: var(--rylcons-font-family);
  font-size: 0.9375rem;
  color: var(--rylcons-color-primary);
}

.comments-area .comment-form input[type="text"]:focus,
.comments-area .comment-form input[type="email"]:focus,
.comments-area .comment-form input[type="url"]:focus,
.comments-area .comment-form textarea:focus {
  outline: none;
  border-color: var(--rylcons-color-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 102, 0.08);
}

.comments-area .form-submit {
  flex: 1 1 100%;
}

.comments-area .form-submit .submit {
  padding: 14px 26px;
  border: 1px solid var(--rylcons-color-primary);
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-primary);
  font-family: var(--rylcons-font-family);
  font-size: var(--rylcons-fs-btn);
  font-weight: var(--rylcons-fw-semibold);
  color: var(--rylcons-color-white);
  text-shadow: none;
  cursor: pointer;
  transition: background-color var(--rylcons-transition), border-color var(--rylcons-transition);
}

.comments-area .form-submit .submit:hover {
  border-color: var(--rylcons-color-secondary);
  background-color: var(--rylcons-color-secondary);
}

.comments-area .no-comments {
  font-size: 0.9375rem;
  color: var(--rylcons-color-text-muted);
}

/* --------------------------------------------------------------------------
   19. 404
   -------------------------------------------------------------------------- */
.error-404 {
  max-width: 660px;
  margin-inline: auto;
  padding-block: 20px 40px;
  text-align: center;
}

/* The artwork is sized by its box, not by the file: an inline SVG with no
   width or height attributes takes the size of whatever holds it. */
.error-404__art {
  width: min(100%, 440px);
  margin: 0 auto 36px;
}

.error-404__art svg {
  display: block;
  width: 100%;
  height: auto;
}

.error-404__art-stroke {
  stroke: var(--rylcons-color-primary);
  fill: none;
}

.error-404__art-accent {
  stroke: var(--rylcons-color-secondary);
  fill: none;
}

.error-404__art-shadow {
  fill: var(--rylcons-color-footer-bg);
}

/* The section heading block carries a rule on every other template; here the
   text is centred with nothing under it. */
.site-main .error-404 .page-header {
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: 0;
}

.error-404__eyebrow {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: var(--rylcons-fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rylcons-color-secondary);
}

.site-main .error-404 .page-title {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
}

.error-404__text {
  margin: 0 auto;
  max-width: 520px;
  font-size: var(--rylcons-fs-nav);
  line-height: 1.75;
  color: var(--rylcons-color-text-muted);
}

.error-404__search {
  max-width: 520px;
  margin: 30px auto 0;
}

.error-404__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 14px 26px;
  border-radius: var(--rylcons-radius-md);
  background-color: var(--rylcons-color-primary);
  font-size: var(--rylcons-fs-btn);
  font-weight: var(--rylcons-fw-semibold);
  line-height: 1;
  color: var(--rylcons-color-white);
  text-decoration: none;
  transition: background-color var(--rylcons-transition), transform var(--rylcons-transition);
}

.error-404__btn:hover,
.error-404__btn:focus-visible {
  background-color: var(--rylcons-color-secondary);
  color: var(--rylcons-color-white);
}

.error-404__btn:active {
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   20. Content pages — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .site-main {
    padding-block: 40px 64px;
  }

  /* The sidebar drops under the content, which is the order the markup
     already has, so only the track definition has to go. */
  .site-main .rylcons-container:has(> .widget-area) {
    display: block;
  }

  .site-main .rylcons-container > .widget-area {
    margin-top: 40px;
  }

  .widget-area .widget {
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .site-main {
    padding-block: 32px 52px;
  }

  .site-main .hentry {
    padding: 20px;
  }

  .site-main .navigation .nav-links {
    flex-direction: column;
  }

  .site-main .navigation .nav-next {
    margin-inline-start: 0;
    text-align: start;
  }

  .site-main .navigation a {
    display: block;
  }

  .search-form {
    flex-direction: column;
  }

  .comments-area .comment-list .children {
    margin-inline-start: 14px;
  }

  .error-404__art {
    width: min(100%, 300px);
    margin-bottom: 28px;
  }
}