/*
Theme Name: Posidonia
Description: Custom standalone theme migrated from Ad Infinitum; original child of Scratch/Unyson.
Author: Mike Goodstadt
Author URI: https://mikegoodstadt.com/
Version: 1.0.0
Text Domain: posidonia
Domain Path: /languages
License URI: http://www.gnu.org/licenses/gpl-2.0.html

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

Table of Contents:
------------------
0.0 - Custom Variables (Color Palette, Typography, Breakpoints)
1.0 - Reset
2.0 - Repeatable Patterns
3.0 - Basic Structure
4.0 - Header
5.0 - Navigation
6.0 - Content
	6.1 - Post Thumbnail
	6.2 - Entry Header
	6.3 - Archives
7.0 - Footer
8.0 - Custom Site Styles
9.0 - Media Queries

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

/**
 * 0.0 Custom Variables (Color Palette, Typography, Breakpoints)
 */
:root {
	
	/* Neutral Colors */
	--color-black: #000000;
	--color-soft-black: #121212;
	--color-gray-900: #212121;
	--color-gray-800: #424242;
	--color-gray-700: #616161;
	--color-gray-600: #757575;
	--color-gray-500: #9e9e9e;
	--color-gray-400: #bdbdbd;
	--color-gray-300: #e0e0e0;
	--color-gray-200: #eeeeee;
	--color-gray-100: #f5f5f5;
	--color-white: #ffffff;
 
	/* Primary Colors */
	--color-primary-dark: var(--color-soft-black);
	--color-primary-light: var(--color-gray-600);
	--color-primary-bright: var(--color-gray-400);
	--color-primary-offwhite: var(--color-gray-100);

	/* Accent Colors */
	--color-orange: #f17e12;
	--color-blue: #0f6ab8;
	--color-red: #c0392b;
	--color-black-alpha-10: rgba(0, 0, 0, 0.1);
	--color-white-alpha-20: rgba(255, 255, 255, 0.2);
	--color-surface-overlay: rgba(229,229,229,.865);

	/* ============================================================
	   Typography System - Tailwind CSS Aligned
	   ============================================================
	   
	   Heading sizes follow Tailwind CSS conventions:
	   - h1: 48px (3rem) - text-5xl equivalent
	   - h2: 36px (2.25rem) - text-4xl
	   - h3: 30px (1.875rem) - text-3xl equivalent
	   - h4: 24px (1.5rem) - text-2xl equivalent
	   - h5: 20px (1.25rem) - text-xl equivalent
	   - h6: 18px (1.125rem) - text-lg
	   
	   Extended sizes for hero sections and displays:
	   - text-6xl: 60px (3.75rem) - Large displays/landing pages
	   - text-7xl: 60px+ - Extra large displays
	   
	   Use --font-size-* for direct sizing
	   Use --heading-* for semantic heading hierarchy
	   ============================================================ */

	/* Typography Scale - rem based */
	--font-size-xs: 0.75rem;    /* 12px */
	--font-size-sm: 0.875rem;   /* 14px */
	--font-size-base: 1rem;     /* 16px */
	--font-size-md: 1.125rem;   /* 18px */
	--font-size-lg: 1.25rem;    /* 20px */
	--font-size-xl: 1.5rem;     /* 24px */
	--font-size-2xl: 1.875rem;  /* 30px */
	--font-size-4xl: 2.25rem;   /* 36px */
	--font-size-5xl: 3rem;      /* 48px */
	--font-size-6xl: 3.75rem;   /* 60px */
	
	/* Heading Sizes - Tailwind CSS aligned */
	--heading-1: var(--font-size-5xl);  /* 48px */
	--heading-2: var(--font-size-4xl);  /* 36px */
	--heading-3: var(--font-size-2xl);  /* 30px */
	--heading-4: var(--font-size-xl);   /* 24px */
	--heading-5: var(--font-size-lg);   /* 20px */
	--heading-6: var(--font-size-sm);   /* 18px */

	/* Font Weights - Tailwind CSS aligned */
	--font-weight-thin: 100;
	--font-weight-extralight: 200;
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--font-weight-black: 900;

	/* Line Heights */
	--lh-none: 1;
	--lh-tight: 1.25;
  --lh-snug: 1.375;
	--lh-normal: 1.5;
	--lh-relaxed: 1.625;
	--lh-loose: 2;

	/* Fixed line-heights used for menu/UI alignment */
	--lh-fixed-xs: 12px;
	--lh-fixed-lg: 45px;
	--lh-fixed-xl: 48px;

	/* Spacing Scale */
	--spacing-xs: 0.25rem;   /* 4px */
	--spacing-sm: 0.5rem;    /* 8px */
	--spacing-md: 1rem;      /* 16px */
	--spacing-lg: 1.5rem;    /* 24px */
	--spacing-xl: 2rem;      /* 32px */
	--spacing-2xl: 3rem;     /* 48px */

	/* Layout and Component Sizes */
	--layout-max-width: 1260px;
	--header-size: 48px;
	--header-padding-m: 30px;
	--header-padding-l: 60px;
	--header-padding-xl: 120px;

	/* Layering / z-index scale */
	--z-base: 0;
	--z-content: 1;
	--z-layout: 3;
	--z-header: 4;
	--z-sticky: 100;
	--z-sticky-priority: 1000;
	--z-dropdown: 99999;
	--z-wp-toolbar: 100000;

	/* ============================================================
	   Breakpoints - Tailwind CSS Aligned
	   ============================================================
	   
	   Mobile-first responsive breakpoints:
	   - xs: 480px - Small phones landscape
	   - sm: 640px - Large phones / Small tablets
	   - md: 768px - Tablets
	   - lg: 1024px - Desktop
	   - xl: 1280px - Large desktop
	   - 2xl: 1536px - Extra large screens
	   
	   Use in media queries:
	   @media (min-width: var(--breakpoint-md)) { ... }
	   @media screen and (max-width: calc(var(--breakpoint-md) - 1px)) { ... }
	   ============================================================ */

	/* ============================================================
	   Responsive Breakpoints - Tailwind CSS Aligned
	   ============================================================
	   
	   Media queries use hardcoded pixel values (CSS custom properties
	   cannot be used in media query conditions). All breakpoints follow
	   Tailwind CSS conventions for consistency.
	   
	   Breakpoint Scale:
	   - xs: 480px - Small phones landscape
	   - sm: 640px - Large phones / Small tablets
	   - md: 768px - Tablets
	   - lg: 1024px - Desktop
	   - xl: 1280px - Large desktop
	   - 2xl: 1536px - Extra large screens
	   
	   Mobile-first approach: Use min-width for content, max-width for
	   device-specific adjustments. This ensures better user experience
	   and better browser support.
	   ============================================================ */

}

/**
 * 1.0 Reset
 *
 * Modern, minimal CSS reset for 2025+
 * Focuses on essential normalizations without legacy cruft
 *
 * -----------------------------------------------------------------------------
 */

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

html {
	overflow-y: scroll;
	text-size-adjust: 100%;
	font-size: 16px;
	background: var(--color-white)
}

body {
	margin: 0;
	padding: 0;
	color: var(--color-primary-dark);
	font-family: Open Sans Light, sans-serif;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	line-height: var(--lh-normal);
}

/* Semantic HTML5 elements */
article, aside, figcaption, figure, footer, header, main, nav, section {
	display: block;
}

/* Remove default margins */
h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, ul, ol, table, pre, address {
	margin: 0;
}

/* Heading styles */
h1 {
	font-size: var(--heading-1);
	line-height: var(--lh-tight);
	margin: 36px 0 6px;
	font-weight: var(--font-weight-normal);
}

h2 {
	font-size: var(--heading-2);
	line-height: var(--lh-tight);
	margin: 36px 0 6px;
	font-weight: var(--font-weight-normal);
}

h3 {
	font-size: var(--heading-3);
	line-height: var(--lh-snug);
	margin: 36px 0 6px;
	font-weight: var(--font-weight-normal);
}

h4 {
	font-size: var(--heading-4);
	line-height: var(--lh-snug);
	margin: 36px 0 6px;
	font-weight: var(--font-weight-normal);
}

h5 {
	font-size: var(--heading-5);
	line-height: var(--lh-snug);
	margin: 36px 0 6px;
	font-weight: var(--font-weight-normal);
}

h6 {
	font-size: var(--heading-6);
	line-height: var(--lh-normal);
	margin: 36px 0 6px;
	font-weight: var(--font-weight-normal);
}

/* Text-level semantics */
a {
	color: var(--color-primary-dark);
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	color: var(--color-primary-light);
}

b,
strong {
	font-weight: var(--font-weight-bold);
}

small {
	font-size: smaller;
}

sup,
sub {
	font-size: 75%;
	line-height: var(--lh-none);
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: 0.5ex;
}

/* Code formatting */
code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: var(--font-size-base);
	line-height: var(--lh-relaxed);
}

pre {
	border: 1px solid var(--color-black-alpha-10);
	margin-bottom: 24px;
	max-width: 100%;
	overflow: auto;
	padding: 12px;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* Lists */
ul,
ol {
	margin: 0 0 24px 20px;
	padding: 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin: 0 0 0 20px;
}

/* Blockquote */
blockquote {
	color: var(--color-primary-light);
	font-size: var(--font-size-md);
	font-style: italic;
	font-weight: var(--font-weight-light);
	line-height: var(--lh-snug);
	margin-bottom: 24px;
	margin-left: 0;
	margin-right: 0;
}

blockquote cite,
blockquote small {
	color: var(--color-primary-dark);
	font-size: var(--font-size-base);
	font-style: normal;
	font-weight: var(--font-weight-normal);
	line-height: var(--lh-normal);
}

/* Images, media, and embeds */
img,
picture {
	display: block;
	height: auto;
	max-width: 100%;
}

audio,
canvas,
video {
	display: inline-block;
	max-width: 100%;
}

/* Forms */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0;
	vertical-align: baseline;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	appearance: button;
	cursor: pointer;
}

button:disabled,
input:disabled {
	cursor: default;
	opacity: 0.65;
}

input[type="checkbox"],
input[type="radio"] {
	padding: 0;
}

input[type="search"] {
	appearance: textfield;
}

textarea {
	overflow: auto;
	resize: vertical;
	vertical-align: top;
}

fieldset {
	border: 1px solid var(--color-black-alpha-10);
	margin: 0 0 24px;
	padding: 11px 12px 0;
}

legend {
	white-space: normal;
}

/* Tables */

table {
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 24px;
	width: 100%;
}

th,
td {
	border: 1px solid var(--color-black-alpha-10);
	padding: 0;
	text-align: left;
	font-weight: var(--font-weight-normal);
	border: none;
}

.wp-block-table td,
.wp-block-table th{
	border: none;
}

th {
	font-weight: var(--font-weight-bold);
}

/* Horizontal rule */
hr {
	background-color: var(--color-black-alpha-10);
	border: 0;
	height: 1px;
	margin: 24px 0;
}

/* Text selection */
::selection {
	background: var(--color-primary-dark);
	color: var(--color-white);
	text-shadow: none;
}

/**
 * 2.0 Repeatable Patterns
 * -----------------------------------------------------------------------------
 */

/* Input fields */

input,
textarea {
	border: 1px solid var(--color-black-alpha-10);
	border-radius: 2px;
	color: var(--color-primary-light);
	padding: 8px 10px 7px;
}

textarea {
	width: 100%;
}

input:focus,
textarea:focus {
	border: 1px solid rgba(0, 0, 0, 0.3);
	outline: 0;
}

/* Icons */
.shortcode-icon {
	display: inline-block;
	text-align: center;
}

.shortcode-icon i, .icon-box i {
	font-family: 'FontAwesome';
	font-style: normal;
	font-size: var(--font-size-2xl);
	position: relative;
	line-height: var(--lh-normal);
}

.shortcode-icon .list-title, .icon-box .list-title {
	font-size: var(--font-size-base);
	display: inline-block;
	line-height: normal;
}

/* Responsive images. Fluid images for posts, comments, and widgets */

.comment-content img,
.entry-content img,
.entry-summary img,
#site-header img,
.widget img,
.wp-caption {
	max-width: 100%;
}

/**
 * Make sure images with WordPress-added height and width attributes are
 * scaled correctly.
 */

.comment-content img[height],
.entry-content img,
.entry-summary img,
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"],
#site-header img {
	height: auto;
}

img.size-full,
img.size-large,
.wp-post-image,
.post-thumbnail img {
	height: auto;
	max-width: 100%;
}

/* Make sure embeds and iframes fit their containers */

embed,
iframe,
object,
video {
	margin-bottom: 24px;
	max-width: 100%;
}

p > embed,
p > iframe,
p > object,
span > embed,
span > iframe,
span > object {
	margin-bottom: 0;
}

/* Alignment */

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

blockquote.alignleft,
figure.wp-caption.alignleft,
img.alignleft {
	margin: 7px 24px 7px 0;
}

.wp-caption.alignleft {
	margin: 7px 14px 7px 0;
}

blockquote.alignright,
figure.wp-caption.alignright,
img.alignright {
	margin: 7px 0 7px 24px;
}

.wp-caption.alignright {
	margin: 7px 0 7px 14px;
}

blockquote.aligncenter,
img.aligncenter,
.wp-caption.aligncenter {
	margin-top: 7px;
	margin-bottom: 7px;
}

.site-content blockquote.alignleft,
.site-content blockquote.alignright {
	border-top: 1px solid var(--color-black-alpha-10);
	border-bottom: 1px solid var(--color-black-alpha-10);
	padding-top: 17px;
	width: 50%;
}

.site-content blockquote.alignleft p,
.site-content blockquote.alignright p {
	margin-bottom: 17px;
}

.wp-caption {
	margin-bottom: 24px;
}

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

.wp-caption {
	color: var(--color-primary-light);
}

.wp-caption-text {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: var(--font-size-xs);
	line-height: var(--lh-normal);
	margin: 12px 0 36px;
}

div.wp-caption .wp-caption-text {
	padding-right: 10px;
}

div.wp-caption.alignright img[class*="wp-image-"],
div.wp-caption.alignright .wp-caption-text {
	padding-left: 10px;
	padding-right: 0;
}

.wp-smiley {
	border: 0;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Assistive text */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
}

.screen-reader-text:focus {
	background-color: var(--color-primary-offwhite);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto;
	color: var(--color-blue);
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	height: auto;
	line-height: normal;
	padding: 15px 23px 14px;
	position: absolute;
	left: 5px;
	top: 5px;
	text-decoration: none;
	text-transform: none;
	width: auto;
	z-index: var(--z-wp-toolbar); /* Above WP toolbar */
}

.hide {
	display: none;
}

/* Clearing floats */

.footer-sidebar:before,
.footer-sidebar:after,
.hentry:before,
.hentry:after,
.gallery:before,
.gallery:after,
.slider-direction-nav:before,
.slider-direction-nav:after,
.contributor-info:before,
.contributor-info:after,
.search-box:before,
.search-box:after,
[class*="content"]:before,
[class*="content"]:after,
[class*="site"]:before,
[class*="site"]:after {
	content: "";
	display: table;
}

.footer-sidebar:after,
.hentry:after,
.gallery:after,
.slider-direction-nav:after,
.contributor-info:after,
.search-box:after,
[class*="content"]:after,
[class*="site"]:after {
	clear: both;
}

/* Genericons */

.bypostauthor > article .fn:before,
.comment-edit-link:before,
.comment-reply-link:before,
.comment-reply-login:before,
.comment-reply-title small a:before,
.contributor-posts-link:before,
.menu-toggle:before,
.search-toggle:before,
.slider-direction-nav a:before {
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font: normal 1rem/1 Genericons;
	text-decoration: inherit;
	vertical-align: text-bottom;
}

/* Separators */

.site-content span + .entry-date:before,
.full-size-link:before,
.parent-post-link:before,
span + .byline:before,
span + .comments-link:before,
span + .edit-link:before {
	content: "\0020\007c\0020";
}

/**
 * 3.0 Basic Structure
 * -----------------------------------------------------------------------------
 */

.site {
	background-color: transparent;
	max-width: var(--layout-max-width);
	position: relative;
}

.main-content {
	width: 100%;
}

/**
 * 4.0 Header
 * -----------------------------------------------------------------------------
 */

/* Ensure that there is no gap between the header and
	 the admin bar for WordPress versions before 3.8. */
#wpadminbar {
	min-height: 32px;
}

#site-header {
	position: relative;
	z-index: var(--z-layout);
}

.site-header {
	background-color: transparent;
	max-width: var(--layout-max-width);
	position: relative;
	width: 100%;
	z-index: var(--z-header);
}

.header-main {
	min-height: var(--header-size);
	padding: 0 30px;
	position: sticky;
	top: 0;
	background-color: var(--color-white);
	z-index: var(--z-sticky);
}

.site-title {
	float: left;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-normal);
	line-height: var(--lh-fixed-xl);
	margin: 0;
}

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

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

/**
 * 5.0 Navigation
 * -----------------------------------------------------------------------------
 */

.site-navigation ul {
	list-style: none;
	margin: 0;
}

.site-navigation li {
	border-top: 1px solid var(--color-white-alpha-20);
}

.site-navigation ul ul {
	margin-left: 20px;
}

.site-navigation a {
	display: block;
}

.site-navigation .current_page_item > a,
.site-navigation .current_page_ancestor > a,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-parent > a,
.site-navigation .current-menu-ancestor > a {
	color: var(--color-primary-light);
}

/* Primary Navigation */

.primary-navigation {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: var(--font-size-md);
	padding-top: 24px;
}

.primary-navigation.toggled-on {
	padding: 72px 0 36px;
}

.primary-navigation .nav-menu {
	display: none;
}

.primary-navigation.toggled-on .nav-menu {
	display: block;
}

.primary-navigation a {
	/* color: var(--color-primary-light); */
	padding: 7px 0;
	line-height: inherit;
	display: block;
	/* text-shadow: var(--color-white) 0px 0px 8px; */
}

.home .primary-navigation a {
	color: var(--color-primary-light);
	/* text-shadow: var(--color-white) 0px 0px 8px; */
}

.primary-navigation a:before {
	font-family: 'FontAwesome';
	font-style: normal;
	position: relative;
	font-size: var(--font-size-base);
	line-height: var(--lh-none);
	margin-right: 5px;
	top: 1px;
	font-weight: var(--font-weight-thin);
	display: inline-block;
	width: 1em;
	text-align: center;
}

/* Secondary Navigation */

.secondary-navigation {
	border-bottom: 1px solid var(--color-white-alpha-20);
	font-size: var(--font-size-xs);
	margin: var(--spacing-2xl) 0;
}

.secondary-navigation a {
	padding: 9px 0;
}

.secondary-navigation a.fa:before {
	margin-right: 10px;
}

.menu-toggle {
	background-color: var(--color-black);
	border-radius: 0;
	cursor: pointer;
	font-size: 0;
	height: var(--header-size);
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	width: var(--header-size);
}

.menu-toggle:before {
	color: var(--color-white);
	content: "\f419";
	display: inline;
	margin-top: 16px;
}

.menu-toggle:active,
.menu-toggle:focus,
.menu-toggle:hover {
	background-color: var(--color-primary-light);
}

.menu-toggle:focus {
	outline: 1px dotted;
}

/**
 * 6.0 Content
 * -----------------------------------------------------------------------------
 */

.content-area {
	padding-top: 0;
}

/**
 * 6.1 Post Thumbnail
 * -----------------------------------------------------------------------------
 */

.post-thumbnail {
	background: var(--color-primary-bright) url(images/pattern-light.svg) repeat fixed;
	display: block;
	position: relative;
	width: 100%;
	z-index: var(--z-base);
}

a.post-thumbnail:hover {
	background-color: var(--color-primary-light);
}

.full-width .post-thumbnail img {
	display: block;
	margin: 0 auto;
}

/**
 * 6.2 Entry Header
 * -----------------------------------------------------------------------------
 */

.entry-header {
	position: relative;
	z-index: var(--z-content);
}

.entry-title {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
	line-height: var(--lh-loose);
	margin-bottom: 12px;
	margin: 0 0 12px 0;
}

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

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

.site-content .entry-header {
	background-color: var(--color-white);
	padding: 24px 10px;
}


/**
 * 6.3 Archives
 * -----------------------------------------------------------------------------
 */

.archive-header,
.page-header {
	margin: 24px auto;
	max-width: 700px;
}

.archive-title,
.page-title {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
	line-height: var(--lh-loose);
	margin-bottom: 12px;
	margin: 0 0 12px 0;
}

/**
 * 7.0 Footer
 * -----------------------------------------------------------------------------
 */

#supplementary {
	padding: 0 10px;
}

.site-footer,
.site-info,
.site-info a {
	color: rgba(255, 255, 255, 0.7);
}

.site-footer {
	background-color: var(--color-black);
	font-size: var(--font-size-xs);
	position: relative;
	z-index: var(--z-layout);
	margin: 30px 0
}

.footer-sidebar {
	padding-top: var(--spacing-2xl);
}

.site-info {
	padding: 15px 10px;
}

#supplementary + .site-info {
	border-top: 1px solid var(--color-white-alpha-20);
}

.site-info a:hover {
	color: var(--color-primary-light);
}


/**
 * 8.0 Custom Site Styles
 * -----------------------------------------------------------------------------
 */

 #content h1.entry-title a {
	color: var(--color-primary-light);
}

.video-wrapper.shortcode-container {
	max-width: 100%;
}

.shortcode-container iframe {
	max-width: 100%;
	height: auto;
}

.video-wrapper .mejs-container {
	margin-top: 0;
}

.form-error {
	color: var(--color-red);
}

.site {
	max-width: none;
}
.site-header {
	max-width: none;
}

.menu-toggle,
.search-toggle {
	background-color: var(--color-white);
}
.menu-toggle:hover,
.menu-toggle:active,
.search-toggle:hover,
.search-toggle.active {
	background-color: var(--color-primary-light);
}
.menu-toggle:before,
.search-toggle:before {
	color: var(--color-primary-bright);
}
.menu-toggle:hover::before,
.search-toggle:hover::before {
	color: var(--color-white);
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.site-header {
	transition: all 200ms ease;
}
.site-header.sticky {
	position: fixed;
	width: 100%;
	z-index: var(--z-sticky-priority);
	height: var(--header-size);
	opacity: 0.9;
}

.header-widgets {
	float: right;
	margin: 0 0px 0 4px;
	padding: 0;
}
.header-widgets .widget {
    margin-bottom: 0;
}
.header-widgets .widget_social_links li {
    display: inline-block;
	margin-right: 0px;
	height: var(--header-size);
	line-height: var(--lh-fixed-lg);
}
.header-widgets .widget.widget_social_links ul li a {
	padding: 0 6px;
	color: var(--color-primary-bright) !important;
	font-size: var(--font-size-xs);
}
.header-widgets .widget.widget_social_links ul li a:hover {
	color: var(--color-primary-light) !important;
}
.search-box-wrapper {
	box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,.135);
}
.search-box {
	background-color: var(--color-surface-overlay);
}
.search-toggle:hover,
.search-toggle.active {
	background-color: var(--color-surface-overlay);
}
.search-toggle {
	width: 32px;
	margin-right: 32px;
}
.search-toggle.active::before {
	color: var(--color-white);
}

.hentry {
	margin: 0 auto;
	max-width: 100%;
}

.entry-meta {
	display: none;
}
.archive-header,
.page-header {
	margin: 24px auto;
	max-width: inherit;
}

.site-footer,
.site-info,
.site-info a {
	color: var(--color-primary-light);
}

.site-footer {
	background-color: var(--color-white);
	font-size: var(--font-size-xs);
	position: relative;
	z-index: var(--z-layout);
}

.menu-horizontal {
	/* display: block; */
	text-align: center;
}
.menu-horizontal ul {
	display: inline-block;
}
.menu-horizontal li:before {
	content:'| ';
}

	.archive-header,
	.archive-content,
	.page-header,
	.page-content,
	.site-content .entry-header,
	.site-content .entry-content,
	.site-content .entry-summary,
	.site-content footer.entry-meta {
		padding-right: var(--header-padding-m);
		padding-left: var(--header-padding-m);
	}

/* GRID */
.category-works .category-list {
  display: grid;
  gap: 1rem;
	max-width: 100%;
  margin: 0 auto;   /* keep centering */
  padding: 0;       /* remove UL default padding */
  list-style: none; /* just in case */
  max-width: min(1200px, 100%);
  box-sizing: border-box;	
}


.category-works .category-list li {
  min-width: 0;
  aspect-ratio: 3 / 2;   /* pick what you want */
}

.category-works .category-list li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-works .category-list li h3 {
  font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	line-height: var(--lh-snug);
	margin: 0.5rem 0;
}

.gallery-title {
	font-size: var(--font-size-md);
}

.gallery-caption {
	font-size: var(--font-size-sm);
	margin: 6px 0 0;
}

.gallery-caption .cursiva {
	font-style: italic;
}

.gallery-description {
	font-size: var(--font-size-sm);
}

img.size-full,
img.size-large,
.wp-post-image,
.post-thumbnail img {
  height: auto;
  width: auto;
  max-width: 100%;
  /* max-width: full; */
  /* max-height: 80vh; */
}


/**
 * 9.0 Media Queries
 * -----------------------------------------------------------------------------
 */

/* Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See http://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

/* List View: Mobile list view thumbnail layout (small devices, <= 400px) - section-specific */
@media screen and (max-width: 400px) {

}

/* Posts/Content: Entry footer and meta styling (mobile+, >= 480px) */
@media screen and (min-width: 480px) {
	.site-content  {
		width: 100%;
		max-width: 480px;
		margin: 0 auto;}
}

/* Posts/Content: Entry header layouts and padding (tablets+, >= 640px) */
@media screen and (min-width: 640px) {
	.header-main {
		background-color: transparent;
	}

	.site-content,
	.site-main .widecolumn {
		max-width: 700px;
	}

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

/* Navigation: Mobile menu styling (small devices, <= 767px) */
@media screen and (max-width: 767px) {
	.primary-navigation p {
		margin: 7px 0;
	}

	.primary-navigation a {
		padding: 0;
		margin: 7px 0;
	}

	.primary-navigation a:before {
		display: inline-block;
		width: 1em;
		text-align: center;
	}
}

/* Navigation: Desktop menu layout (desktop+, >= 768px) */
@media screen and (min-width: 768px) {

	.primary-navigation {
		float: right;
		font-size: var(--font-size-md);
		margin: 0 1px 0 -12px;
		padding: 0;
	}

	.primary-navigation.toggled-on {
		border-bottom: 0;
		margin: 0;
		padding: 0;
	}

	.primary-navigation .menu-toggle {
		display: none;
		padding: 0;
	}

	.primary-navigation .nav-menu {
		border-bottom: 0;
		display: block;
	}

	.primary-navigation a {
		padding: 0 12px;
		white-space: nowrap;
	}

	.primary-navigation a:before {
		position: relative;
		font-size: var(--font-size-base);
		line-height: var(--lh-none);
		margin-right: 9px;
		top: 2px;
		font-weight: var(--font-weight-thin);
	}

	.primary-navigation ul ul a {
		padding: 18px 10px 18px 17px;
		white-space: normal;
		width: 176px;
	}

	.primary-navigation ul ul a:hover,
	.primary-navigation ul ul li.focus > a {
		background-color: var(--color-primary-light);
	}

	.primary-navigation ul ul a:hover,
	.primary-navigation ul ul li.focus > a {
		background-color: var(--color-primary-light);
	}

	.primary-navigation .menu-item-has-children > a,
	.primary-navigation .page_item_has_children > a {
		padding-right: 26px;
	}

	.primary-navigation .menu-item-has-children > a:after,
	.primary-navigation .page_item_has_children > a:after {
		-webkit-font-smoothing: antialiased;
		content: "\f502";
		display: inline-block;
		font: normal 8px/1 Genericons;
		position: absolute;
		right: 12px;
		top: 22px;
		vertical-align: text-bottom;
	}

	.primary-navigation .menu-item-has-children li.menu-item-has-children > a:after,
	.primary-navigation .menu-item-has-children li.page_item_has_children > a:after,
	.primary-navigation .page_item_has_children li.menu-item-has-children > a:after,
	.primary-navigation .page_item_has_children li.page_item_has_children > a:after {
		content: "\f501";
		right: 8px;
		top: 20px;
	}

	.primary-navigation li .menu-item-has-children > a,
	.primary-navigation li .page_item_has_children > a {
		padding-right: 20px;
		width: 168px;
	}

	.primary-navigation li:hover > a,
	.primary-navigation li.focus > a {
		/* background-color: var(--color-primary-offwhite); */
		color: var(--color-primary-light);
		text-shadow: var(--color-primary-offwhite) 0px 0px 16px;
	}

	.primary-navigation li {
		border: 0;
		display: inline-block;
		height: var(--header-size);
		line-height: var(--lh-fixed-xl);
		position: relative;
	}

	.primary-navigation li li {
		border: 0;
		display: block;
		height: auto;
		line-height: var(--lh-tight);
	}

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

	.primary-navigation ul ul li:hover > ul,
	.primary-navigation ul ul li.focus > ul {
		left: 100%;
	}

	.primary-navigation ul ul {
		background-color: var(--color-primary-dark);
		float: left;
		margin: 0;
		position: absolute;
		top: var(--header-size);
		left: -999em;
		z-index: var(--z-dropdown);
	}

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

/* Header: Desktop header and content layout (desktop+, >= 768px) */
@media screen and (min-width: 768px) {
	.header-main {
		padding: 0 var(--header-padding-m);
  }

	.site-content,
	.site-main .widecolumn {
		max-width: 850px;
	}

	.archive-header,
	.archive-content,
	.site-content .entry-header,
	.site-content .entry-content {
		padding-right: var(--header-padding-m);
		padding-left: var(--header-padding-m);
	}

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

	.hentry {
		max-width: 750px;
	}
}

/* Layout: Content area padding and sidebar (lg screens, >= 1024px) */
@media screen and (min-width: 1024px) {
	.header-main {
		padding: 0 var(--header-padding-l);
  }

	.site-content,
	.site-main .widecolumn {
		max-width: 1600px;
	}

	.archive-header,
	.archive-content,
	.site-content .entry-header,
	.site-content .entry-content {
		padding-right: var(--header-padding-l);
		padding-left: var(--header-padding-l);
	}


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

/* Posts/Content: Entry title sizing for featured content (wide screens, >= 1280px) */
@media screen and (min-width: 1280px) {
	.header-main {
		padding: 0 var(--header-padding-xl);
  }

	.site-content,
	.site-main .widecolumn {
		max-width: 2560px;
	}

	.archive-header,
	.archive-content,
	.site-content .entry-header,
	.site-content .entry-content {
		padding-right: var(--header-padding-xl);
		padding-left: var(--header-padding-xl);
	}

	/* .category-works .category-list  {
    grid-template-columns: repeat(5, 1fr);
  } */

	.hentry {
		max-width: 1200px;
	}
}