/*
HP v5 main styles
- over-rides of twentytwentytwo theme
- see also ./theme.json -- which over-rides twentytwentytwo/theme.json
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
0.0 :root
1.0 Normalize
2.0 Tags
3.0 Lists
4.0 Form
4.5 Blocks
5.0 Panel Structure
6.0 Header
7.0 Page
8.0 Footer
9.0 Buttons
10.0 Table
11.0 Alignments
12.0 Misc
13.0 Blog
14.0 RSS Feed
15.0 Dashboard
16.0 Print
--------------------------------------------------------------*/

/* 0.0 :root ============================================== */
/* global var() styles, use --hp as the prefix */
:root {
	/* fonts ===== */
	--hp-basefont: normal 16px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

	--hp-font-small-1: 0.85rem;
	--hp-font-small-2: 0.7rem;

	--hp-font-large-1: 1.5rem;
	/* /fonts ===== */

	/* colors ===== */
	--hp-fgcolor-1: #000;
	--hp-fgcolor-2: #fff;
	--hp-fgcolor-3: rgba(0,0,0,0.5);

	--hp-link-color-1: blue;
	--hp-link-hovercolor-1: purple;

	--hp-bgcolor-1: #fff;
	--hp-bgcolor-2: #000;

	--hp-color-alert: red;

	--hp-nav-color-1: red;
	--hp-nav-bgcolor-1: #fff;

	--hp-border-color-1: rgba(220,215,202,1);
	--hp-border-color-2: rgba(0,0,0,0.5);
	/* /colors ===== */

	/* borders ===== */
	--hp-border-1: solid 1px var(--hp-border-color-1);
	--hp-border-2: solid 1px var(--hp-border-color-2);
	--hp-border-3: solid 1px var(--hp-link-color-1);
	--hp-hoverborder-3: solid 1px var(--hp-link-hovercolor-1);
	/* /borders ===== */

	/* width/height ===== */
	--hp-panel-width: 960px;
	--hp-form-width: 500px;

	--hp-featimg-height: 430px;
	/* /width/height ===== */

	/* misc ===== */
	--hp-margin-bot-1: 1rem;
	--hp-margin-bot-2: 0.5rem;
	--hp-margin-bot-3: 0.75rem;

	--hp-padding-bot-1: 1rem;
	--hp-padding-bot-2: 0.5rem;
	--hp-padding-bot-3: 0.75rem;

	--hp-block-gap: 1.5%;/* left and right */

	--hp-line-height-1: 1.5;

	--hp-transition-time-1: 150ms;
	--hp-transition-time-2: 350ms;
	/* /misc ===== */
}
/* /0.0 :root ============================================== */

/* 1.0 Normalize ============================================== */
* {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	box-sizing: border-box !important;
}
/* /1.0 Normalize ============================================== */

/* 2.0 Tags ========================================================= */
html,body,td,input,textarea,select,option,blockquote {
	font: var(--hp-basefont);
}
html {
	overflow-x: hidden;/* allows objects to be absolutely positioned off the right and no scrollbar */
}
body {
	color: var(--hp-fgcolor-1);
	background-color: var(--hp-bgcolor-1);
}

a {
	text-decoration: none;
	color: var(--hp-link-color-1);
}
a:hover {
	color: var(--hp-link-hovercolor-1);
}

p {
	margin-bottom: var(--hp-margin-bot-1);
}
p,
li,
td {
	line-height: var(--hp-line-height-1);
}

h1,h2,h3,h4,h5,h6,h7 {
	font-weight: normal;
}

h1.wp-block-post-title {
}

pre {
	/* do NOT use css var() here, this is mainly used for php print_r() to ensure visibility */
	color: #000;
	background-color: #fff;
}

fieldset {
	position: relative;
	margin: 0 0 var(--hp-margin-bot-1) 0 !important;
	padding: 0.5rem 1rem 1rem 1rem;
	border: var(--hp-border-1);
	display: inline-block;
}
fieldset.change-password {
	/* see form element width */
	max-width: var(--hp-form-width);
	width: 100%;
}
fieldset p:last-of-type:not(:only-of-type) {
	/* can cause problems, be cautious about using */
	margin-bottom: 0;
}
legend {
	font-size: var(--hp-font-small-1);
	padding: 0 0.5rem 0 0.5rem;
	margin: 0 0.5rem 0 0.5rem;
	/* border: solid 1px red; */
}

blockquote {
	border: 0;
	margin: 0 0 var(--hp-margin-bot-1) 0;
	padding: 0 1.5rem 0 1.5rem;
	/* border: solid 1px #000; */
}
blockquote p:last-of-type:not(:only-of-type) {
	margin: 0px;
}
blockquote::after {
	content: "";
	clear: both;
	display: table;
}
blockquote cite {
	float: right;
}
blockquote cite::before {
	content: '\2013 \00A0';
}

hr {
	margin: 0 0 var(--hp-margin-bot-1) 0;
	border: 0 !important;
	border-top: solid 1px var(--hp-border-color-2) !important;
}

/* Transitions ===== */
a {
	transition: all var(--hp-transition-time-1) ease-in-out;
}
/* 2.0 Tags ========================================================= */

/* 3.0 Lists ========================================================= */
ul,
ol {
	margin: 0 0 var(--hp-margin-bot-1) 0.5rem;
	padding: 0 0 0 0;
}
li {
	margin: 0 0 0 0.5rem;
}

li > ul,
li > ol {
	margin: 0 0 0 0.5rem;
}

ul.wp-block-post-template,
ul.wp-block-post-template li {
	margin: 0;
}
li .wp-block-post-featured-image {
	justify-content: left;
}
/* /3.0 Lists ========================================================= */

/* 4.0 Form ================================================================= */
.ck-editor,
input,
textarea,
select {
	color: var(--hp-fgcolor-1);
}

.ck-editor,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
textarea {
	padding: 0.8rem 1rem;
	max-width: var(--hp-form-width);
	width: 100%;
	background-color: var(--hp-bgcolor-1);
	border: var(--hp-border-1);
	border-radius: 0;
}
.ckeditor:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus,
textarea:focus {
	border: var(--hp-border-1);
}

select {
	width: auto;
}

label {
	/* display: block; */
	/* see hp-shared.js move_form_labels() */
	display: none;
	margin: 0 0 0 0;
}

/* move form labels, see ../js/shared.js for implementation ========== */
form div {position: relative;}
.label-pos input[type="text"],
.label-pos input[type="password"],
.label-pos textarea {
	padding-top: 1em;
}
.label-pos > label {
	position: absolute;
	top: 0.5em;
	left: 0.3em;
	z-index: 10;
	color: var(--hp-fgcolor-3);
	transition: all 200ms ease-in-out;
	cursor: text;
}
.label-pos-focused > label {
	top: 0;
	left: 0.5em;
	font-size: var(--hp-font-small-2);
	color: var(--hp-fgcolor-3);
}
/* /move form labels, see ../js/shared.js for implementation ========== */

/* form2 ===== */
.form2 {
	margin-bottom: 1.5rem;
xborder: solid 1px red;
}

.form2 fieldset {
	display: inline-block !important;
}
.form2 fieldset > p {
	font-size: var(--hp-font-small-1);
}

.form2 div,
.form2 fieldset > div,
fieldset.change-password .element-wrapper-password {
	display: flex;
	flex-direction: column;

	position: relative;
	padding: 0px 0px 8px 0px;
}
.form2 div > label,
.form2 fieldset > div > label {
	padding: 0px 0px 3px 0px;
xborder: solid 1px red;
}

.form2 > div > span,
.form2 fieldset > div > span {
	display: flex;
	flex-direction: row;
}

.form2 div > label > span,
.form2 fieldset > div > label > span {
}

.form2 div > span > label,
.form2 fieldset > div > span > label {
	display: inline-block;
	padding-right: 10px;
}
.form2 div > span > div,
.form2 fieldset > div > span > div {
}
.form2 .required-after:after {
	content: '*';
	display: inline-block;
	padding-left: 3px;
}
/* /form2 ===== */

.input-datetime-container input[type="date"] {
	max-width: calc(var(--hp-form-width)/2);
}
.input-datetime-container select {
	margin-left: 0.5em;
}

.input-password-container {
}
.pswd-container {
	position: relative;
	width: 100%;
	max-width: var(--hp-form-width);
	/* display: inline-block; */
}
.pswd-container input {
	padding-right: 2.5em;
}
.pswd-container .show-pswd {
	position: absolute;
	top: 2px;
	right: 1em;
	z-index: 20;
	transform: translate(0,50%) scale(1.75);

	padding-left: 0.5em;
	color: rgba(0,0,0,0.50) !important;
	cursor: pointer;
}
.pswd-container .show-pswd.active {
	color: rgba(0,0,0,1) !important;
}
.pswd-container .show-pswd:after {
	content: '\01F441';
}

/* hide recaptcha badge */
.grecaptcha-badge {visibility: hidden;}
.recaptcha-terms {
	display: none;
	font-size: var(--hp-font-small-1);
}
/* /4.0 Form ================================================================= */

/* 4.5 Blocks ================================================================= */
.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align="full"] > .wp-block-group,
.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
	padding-left: 0;
	padding-right: 0;
}

/* Blocks | Columns ===== */
.wp-block-columns:where(.is-layout-flex) {
	gap: 0;
	column-gap: var(--hp-block-gap);
}

.wp-block-columns {
	margin-bottom: 0;
	/* border: solid 1px red; */
}

/* .wp-block-columns > .wp-block-column {border: solid 1px #000;} */
/* .wp-block-columns > .wp-block-column:nth-child(odd) {background: red;} */
/* .wp-block-columns > .wp-block-column:nth-child(even) {background: green;} */

/* /Blocks | Columns ===== */

/* Blocks | Navigation ========== */

.wp-block-navigation__container {
	/* gap: var(--wp--style--block-gap,2em); */
	gap: 0;
}
.wp-block-navigation__container li {
	margin: 0;
}
.wp-block-navigation__container a.wp-block-navigation-item__content,
a.wp-block-navigation-item__content {
	padding: 5px 10px;
	color: var(--hp-nav-color-1);
	/* border: solid 1px red; */
}
.wp-block-navigation__submenu-container,
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	padding-right: 10px;
	background-color: var(--hp-nav-bgcolor-1);
	border: var(--hp-border-2);
}
.wp-block-navigation__submenu-container a,
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container a {
	/* padding: 0; */
	/* border: solid 1px red; */
}

/* Blocks | Navigation | header ===== */
.topnav {
	position: relative;
	top: 0px;
	left: 0px;
	z-index: 1000;
	/* border: solid 10px red; */
}

/* wp-block-navigation__responsive-container is-menu-open has-modal-open */
html:not(.has-modal-open) .topnav .wp-block-navigation .has-child:where(:not(.open-on-click)) > .wp-block-navigation__submenu-container {
	margin-top: 0.5rem;
	transition: opacity var(--hp-transition-time-1) linear, margin var(--hp-transition-time-1) ease-in-out;
}
html:not(.has-modal-open) .topnav .wp-block-navigation .has-child:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
	margin-top: 0;
}
.topnav .wp-block-navigation .wp-block-navigation__container > .has-child:last-child > .wp-block-navigation__submenu-container {
	left: initial;
	right: 0;
}
.topnav .wp-block-navigation .wp-block-navigation__container .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	left: auto !important;
	right: 100% !important;
}
.topnav ul.wp-block-navigation__container > li:last-child > a.wp-block-navigation-item__content {
	padding-right: 0;
}

.topnav .wp-block-navigation-submenu a {
	padding-right: 0;
}
.topnav .wp-block-navigation-submenu svg {
	margin-left: 3px;
}

/* secure a navigation item, see also:
wp-content\themes\hotpepper_v5\functions.php security_system_hp5()
resets to display: flex
*/
.wp-block-navigation-item.private {
	display: none;
}

.topnav .wp-block-navigation__responsive-container-open svg {
	display: none;
}
.topnav .wp-block-navigation__responsive-container-open:after {
	content: '\002630';
	font-size: var(--hp-font-large-1);
}

.wp-block-navigation__responsive-dialog > br {
    display: none
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{
	padding-top: 0 !important;
}
/* /Blocks | Navigation | header ===== */

/* Blocks | Navigation | footer ===== */
.footernav li:first-child a.wp-block-navigation-item__content {
	padding-left: 0;
}
/* /Blocks | Navigation | footer ===== */

/* /Navigation ========== */

/* /4.5 Blocks ================================================================= */

/* 5.0 Panel Structure ===================================================== */
.panel {
	max-width: var(--hp-panel-width) !important;
	margin: 0 auto 0 auto;
	/* border: solid 1px red; */
}
@media (max-width: 980px) {
	body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) .panel,
	.panel {
		margin: 0 3% 0 3% !important;
	}
}
/* /5.0 Panel Structure ===================================================== */

/* 6.0 Header ============================================================= */
.sign-in-out-container,
.sign-in-out-container a {
	color: var(--hp-fgcolor-2);
	background-color: var(--hp-bgcolor-2);
}
/* /6.0 Header ============================================================= */

/* 7.0 Page ============================================================== */
.entry-content.wp-block-post-content {
	margin: 0;
}

.wp-block-image {
	margin: 0;
}
.wp-block-image.featured,
.wp-block-post-featured-image {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: var(--hp-featimg-height);
	overflow: hidden;
	/* border: solid 1px red; */
}

.wp-block-post .wp-block-post-featured-image {
	height: auto;
	max-height: none;
	/* border: solid 10px red; */
}

.wp-block-image.featured img,
.wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	max-width: 100%;
}
.featured-image-404,
.featured-image-archive,
.featured-image-search {
	background: url("/wp-content/uploads/cat-fred.jpg") no-repeat center;
	background-size: cover;
	min-height: var(--hp-featimg-height);
}

.wp-block-image.featured {
	position: relative;
}
.wp-block-image.featured figcaption {
	/* display: none; */
	position: absolute;
	bottom: 2em;
	left: 0px;
	z-index: 0;
}

.wp-block-cover,
.wp-block-cover-image {
	min-height: var(--hp-featimg-height);
}

.components-modal__screen-overlay {
  display: none !important;
}/* /7.0 Page ============================================================== */

/* 8.0 Footer ============================================================= */
.footer-container {
	font-size: var(--hp-font-small-1);
}
.footernav {
}
.footer-copyright {
}
/* /8.0 Footer ============================================================= */

/* 9.0 Buttons ============================================================= */
button:not(.pswp__button):not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close):not(.wp-block-navigation-submenu__toggle),
.button,
.wp-block-button__link,
.wp-block-file .wp-block-file__button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	padding: 5px 20px 5px 20px;
	font: var(--hp-basefont);
	text-align: center;
	text-decoration: none !important;
	line-height: 1 !important;
	opacity: 1;
	color: var(--hp-link-color-1);
	background: transparent;
	border: var(--hp-border-3);
	border-radius: 0;
	transition: opacity 0.15s linear;
	cursor: pointer;
}
button:focus:not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close):not(.wp-block-navigation-submenu__toggle),
button:hover:not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close):not(.wp-block-navigation-submenu__toggle),
.button:focus,
.button:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-file .wp-block-file__button:focus,
.wp-block-file .wp-block-file__button:hover,
input[type="button"]:focus,
input[type="button"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="submit"]:hover {
	color: var(--hp-link-hovercolor-1);
	border: var(--hp-hoverborder-3);
}

.bn-back,
.js-back {
	text-decoration: none !important;
}
.bn-back:before,
.js-back:before {
	/* content: '\25C0';
	padding-right: 5px; */
}

.read-more {
	padding-left: 1em;
}
/* /9.0 Buttons ============================================================= */

/* 10.0 Table =============================================================== */
/* /10.0 Table =============================================================== */

/* 11.0 Alignments ========================================================= */
/* /11.0 Alignments ========================================================= */

/* 12.0 Misc =============================================================== */
.alert,
.error,
.required,
.required-after:after {
	color: var(--hp-color-alert);
}
.alert.sm,
.alert.sm *,
.error.sm,
.error.sm *,
.required.sms,
.required.sms * {
	font-size: var(--hp-font-small-1);
}

.ct-separator:before {
	display: inline-block;
	content: '>';
	content: '\203A';
}

/* showhide generic mechanism, see assets/js/hp-global.js showhide() */
/* .showhide-container {} */
.showhide-trigger {
	width: fit-content;
}
.showhide-content {
	display: none;
}

/* /12.0 Misc =============================================================== */

/* 13.0 Blog =============================================================== */
.post-meta {
}
/* /13.0 Blog =============================================================== */

/* 14.0 RSS Feed ============================================================ */
/* /14.0 RSS Feed ============================================================ */

/* 15.0 Dashboard =============================================================== */
/* /15.0 Dashboard =============================================================== */

/* 16.0 Print =============================================================== */
/* /16.0 Print =============================================================== */