/*
Theme Name: nndif-ocean
Template: oceanwp
Theme URI:
Author: lrm
Author URI:
Description: A child theme for nelsonworks.net.
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.7
Version: 0.9.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nndif
Tags:
*/


/***** =01 Reset/Global Defaults *****/
/* #region */

:root {
	--grey: color-mix(in oklch, black, white);
	--grey-10: color-mix(in oklch, black 10%, white);
	--grey-20: color-mix(in oklch, black 20%, white);
	--grey-30: color-mix(in oklch, black 30%, white);
	--grey-40: color-mix(in oklch, black 40%, white);
	--grey-50: color-mix(in oklch, black 50%, white);
	--grey-60: color-mix(in oklch, black 60%, white);
	--grey-70: color-mix(in oklch, black 70%, white);
	--grey-80: color-mix(in oklch, black 80%, white);
	--grey-90: color-mix(in oklch, black 90%, white);


	/* 006394 */
	--primary-color: hsl(200, 100%, 29%);
	--primary-color-tint: hsl(200, 42%, 55%);

	/* --primary-color-10: color-mix(in oklch, var(--primary-color) 100%, lightgray); */

	--primary-color-10: color-mix(in oklch, var(--primary-color) 10%, var(--grey-10));
	--primary-color-20: color-mix(in oklch, var(--primary-color) 20%, var(--grey-20));
	--primary-color-30: color-mix(in oklch, var(--primary-color) 30%, var(--grey-30));
	--primary-color-50: color-mix(in oklch, var(--primary-color) 50%, var(--grey-50));
}

/* links */
p a,
a {
	color: var(--primary-color) !important;
}

a:hover {
	color: var(--primary-color-tint) !important;
}

a:visited {
	color: var(--primary-color-tint) !important;
	text-decoration: dotted !important;
}

article .entry p {
	margin-block-end: 1em !important;
}

.oceanwp-theme .wp-block-quote {
	border-left-color: var(--primary-color-tint);
}


/**** Site Header  */
/* #site-header-inner div {
	outline: 1px solid green;
} */

/* .oceanwp-theme #site-logo-inner {
	border: 1px solid red;
} */

/* @media screen and (min-width: 704px) {
	.oceanwp-theme #site-logo #site-logo-inner {
		width: 100%;
	}
} */

.oceanwp-theme #site-header {
	display: flex;
	border-block-start: 5px solid var(--primary-color);
	border-block-end: 1px solid var(--primary-color-tint);
}

.oceanwp-theme #site-header #site-header-inner {
	width: 100%;
	margin-inline: clamp(1em, 4%, 30px);
}

.oceanwp-theme #site-logo {
	width: 70%;
}

.oceanwp-theme .page-header {
	padding-block: 1em;
}

.oceanwp-theme #site-logo a.site-logo-text {
	font-size: clamp(1.2em, 4vw, 1.6em);
	font-weight: bold;
	line-height: 1;
}

.oceanwp-theme #wrap {
	width: 90%;
	max-width: 950px;
	margin-inline: auto;
}

@media screen and (min-width: 790px) {
	.oceanwp-theme #site-logo {
		width: 35%;
	}
}

/* 960px */
@media screen and (min-width: 60em) {
	.oceanwp-theme #site-logo {
		width: 45%;
	}
}

/* 960px */
@media screen and (min-width: 61em) {
	.oceanwp-theme #site-logo {
		width: 48%;
	}
}

/* 960px */
@media screen and (min-width: 1044px) {
	.oceanwp-theme #site-logo {
		width: 51%;
	}

	.oceanwp-theme #site-logo a.site-logo-text {
		font-size: clamp(1.6em, 3.8vw, 1.7em);
	}
}

#footer-widgets {
	display: none;
}

.copyright {
	padding-block-start: 1em;
	border-block-start: 1px solid var(--primary-color);
}

.nav-no-click a {
	cursor: default;
}

.nav-no-click .sub-menu a {
	cursor: pointer;
}

/* Helper classes */
.me-center {
	margin: auto;
	text-align: center;
}

.me-nobullet {
	list-style-type: none;
}

.mbs_1em {
	margin-block-start: 1em;
}

.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.warning {
	padding: 1em !important;
	font-style: italic;
	font-size: 90% !important;
	text-wrap: balance;
	background-color: #f8f8f8;
	border-radius: 0.5em;
	border: 1px solid var(--primary-color-10);
}

.width100 {
	width: 100%;
}

.width-maxcontent {
	width: max-content;
}

/* #endregion */

/***** =02 Typography *****/
/* #region */
html {
	font-size: 100% !important;
}

body {
	font-size: 1rem;
}

.poems h2 {
	text-align: center;
	text-wrap: balance;
	color: hsl(0, 0%, 15%);
}

article.poem-frame h3,
article.poem-frame h4 {
	margin-block-end: 0.5em;
	font-size: 1.1em !important;
	line-height: 1.2;
	text-align: left;
	text-wrap: balance;
}

.poem p.title-alt {
	font-size: 90% !important;
	line-height: 1.5;
}

.letter {
	font-style: italic;
}

.letter p {
	margin-block-end: 1em !important;
}

/* #endregion */

/***** =03 Nav *****/
/* #region */

@media screen and (min-width: 30em) {
	.oceanwp-theme #mobile-dropdown {
		left: 50%;
		width: 50%;
	}
}

.nav-paging a {
	font-weight: 500;
	color: var(--primary-color) !important;
}

/* #endregion */

/***** =04 Layout *****/
/* #region */
/*
    Global styles, mobil first
    Then Media Queries for Global styles
    Then Page Specific styles with their media queries
*/
/* Set core body defaults */

#main #content-wrap {
	padding-block-start: 1em !important;
}

/*** PAGE SPECIFIC STYLES ***/

/* Styles for poems */

/* Uncomment these for debuggin the poem layout */
/* section.volume { 	border: 1px solid cyan;} */
/* .poem-frame { border: 2px solid green;} */
/* .poem {	border: 1px solid blue;} */
/* .date-sig {	border: 1px solid red;} */

/*** =Nikki DiFrank Poems page ***/
article.poem-frame {
	container: mypoemframe / inline-size;
}

section.poem {
	min-width: 25ch;
	width: max-content;
	margin-block-end: 2.5em;
}

@container mypoemframe (width > 600px) {
	section.notes {
		max-width: 75cqw;
	}
}

.poem-frame .feat-img {
	margin-block-end: 2em;
}

.poem-frame header .wp-block-group__inner-container,
.poem-frame header {
	width: 100%;
	display: flex;
}

.title-note {
	position: relative;
	top: -0.5em;
	line-height: 1;
}

.poem-frame header .wp-block-group__inner-container h3,
.poem-frame header h3 {
	flex-grow: 1;
	width: 0;
}

.poem-inline,
.poem-frame pre {
	margin: 0;
	margin-inline-start: 1em;
	margin-block-end: 1em;
	padding: 0;
	padding-inline-end: 1em;
	font-family: inherit;
	font-size: inherit;
	background-color: inherit;
	color: inherit;
	white-space: pre-wrap;
}

.date-sig {
	font-style: italic;
	text-align: right;
}

header p.date-sig {
	text-align: left;
	margin-block-start: -1.25em !important;
}

section.notes {
	margin-block-start: -2em;
	margin-block-end: 2.5em;
	/* collapsing margins with the hr */
	font-size: 87.5%;
	color: hsl(0, 0%, 30%);
}

section.notes hr {
	height: 1px;
	width: 100% !important;
	border-color: #e9e9e9;
	border-color: var(--primary-color-20);
}

section.notes hr.dashed {
	margin-block: 0.5em;
	border-style: dashed;
}

section.notes ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

section.notes sup {
	top: -0.15em;
	font-size: 14px;
	font-weight: 600;
}

section.notes ol li {
	margin-block-end: 0.35em;
	white-space: unset;
	text-wrap: balance;
	line-height: 1.5;
}

section.note sp {
	margin-block-end: 1em !important;
	line-height: 1.5;
}

/*** =Eamon George Nelson Poems page ***/
.nwp-poems-by-eamon-george-nelson header+.date-sig {
	text-align: left;
	margin-block-start: -0.35em;
	margin-block-end: 1em;
}

/***  =Of Three Daughters ***/
.in-memory {
	margin-block-end: 2em !important;
	text-align: center;
	color: #005580;
}

/* #endregion */ */