<style type="text/css">

/*
Theme Name: GwH 2025
Theme URI: https://girlwithahoop.com
Author: Jocelyn Paige Carlisle
Author URI: https://girlwithahoop.com
Description: Ultra-minimal, no-bloat WordPress starter theme for full control.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: MIT
*/

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--font); line-height: 1.5; }

:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
  --gutter: 20px;
  --image-height-desktop: 375px;
  --content-max: 680px;
  --breakpoint: 900px;
  --dark-teal: #1C434E;
  --dark-teal-rgb: rgba(28, 67, 78, 0.95);
  --med-teal: #225260;
  --light-teal: #49B1BB;
  --gold: #BA6;
  --gold-rgb: rgba(187, 170, 102, 0.3);
  --black: #181808;
  --burgundy: #471010;
  --white: #F9FCFF;
  outline: 0
}

nav a { margin-right: .75rem; }
h1,h2,h3 { line-height: 1.2; }
pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.entry { margin-bottom: 3rem; }
.screen-reader-text { background: #1C434E; position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

html, body
{

	max-width: 100vw;
	width: 100%;
	overflow-x: hidden;
	font-size: 18px;
	min-height: 100vh;
	padding:0;
	margin: 0;
	color: var(--black);
	height: auto;
}

body
{
	background-color:#F9FCFF;
}

#outer
{
	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
	background-image: url(/img/gwh-d-15.png);
	background-position: 98% 95%;
	background-repeat: no-repeat;
	background-size: 250px auto;
}

h1, h2
{
	color: var(--med-teal);
	font-family: kinuta-shin-stdn, serif;

}

h1
{
	font-size: 3rem;
	letter-spacing: -.25rem;
}

h2
{
	font-size: 2rem;
}

h3, p, ol, ul, th, td, .note
{
	font-family: quasimoda, sans-serif;
	margin: 1rem;	
}

.note
{
	font-size: .75rem;
}

ul {
  list-style-image: url('/img/gwh-b.png');
  list-style-position: outside;
}

a
{
	text-decoration: underline;
	color: var(--med-teal);
	font-weight: 700;
	transition: text-decoration .75s;
}

.fofimg
{
	width: 400px;
}

.menu__list a
{
	color: var(--white);
}

a:hover
{
	text-decoration: none;
	transition: text-decoration .75s;
}

.hamburger
{
	z-index: 100;
}

.hamburger img
{
	position: absolute;
	top: 48px;
	width: 30px;
	height: auto;
	right: 100px;
	transition: top .5s, width .5s, right .5s;
}

.hamburger:hover img
{
	top: 45px;
	width: 36px;
	right: 97px;
	cursor: pointer;
}

h2 a
{
	text-decoration: none;
	transition: text-shadow .5s;
}

h2 a:hover
{
	text-shadow: 0 0 3px var(--med-teal);
	transition: text-shadow .5s;
}

header, footer
{
	z-index: 90;
}

.fright
{
	float: right;
	margin: 0 0 1rem 1rem;
	width: 33%;
}

.fright img
{
	width: 100%;
}

header
{
	background: var(--dark-teal);
	padding:0;
	margin: -1px 0 0 0;
	position:fixed;
	box-shadow: 0 1px 8px var(--dark-teal);
}

header h1
{
	visibility: hidden;
	line-height: 0;
	font-size: .1rem;
}

header p
{
	width: 100vw;
	font-weight: 400;
	color: var(--black);
	margin: 0;
	padding: .5rem 0 .5rem 3.5rem;
	background-color: var(--gold);
	clear:left;
	line-height: .5;
	font-style: italic;
	border-bottom: 1px solid var(--burgundy);
}

header img
{
	float: left;
	height: 120px;
	padding: 0;
}

img.gwh
{
	position: absolute;
	bottom: .1rem;
	left: 0;
	height: 50px;
}
footer
{
	position: fixed;
	bottom: 0;
	height: 30px;
	background: var(--black);
	padding: .25rem;
	color: var(--gold);
	border-top: 1px solid var(--burgundy);
	width: 100vw;
	box-shadow: 0 -.5px 4px var(--dark-teal);
}

footer p span
{
	float: right;
}

.s-icon img
{
	height: 15px;
}

footer p
{
	color: var(--gold);		
	font-size: 13px;
	line-height: 13px;
	margin: .33rem 1rem .5rem 1rem;
}

footer a
{
	color: var(--gold);
	line-height: 0;
	transition: font-size .5s, letter-spacing .5s;
	text-decoration: none;
}

footer a:hover
{
	font-size: .8rem;
	font-weight: bold;
	letter-spacing: .01rem;
	line-height: 0;
	transition: font-size .5s, letter-spacing .5s;
	text-decoration: none;
}

main
{
	position: relative;
	min-height: 100%;
	max-width: 1200px;
	margin: 7.5rem auto 0 auto;
	padding:1rem;
	background: transparent;
	z-index:1;
}

article, .content
{
	margin: 0 auto;
	width: 100%;
}

strong, em
{
	color: var(--med-teal);
}

.fluentform form, .fluentform .ff-message-success
{
	font-family: quasimoda, sans-serif;
}

.fluentform form
{
	max-width: 500px;
	width: 500px;
	margin: 0 auto;
}

.fluentform .ff-message-success
{
	color: var(--black);
	border: none;
	box-shadow: none;
}

.fluentform form.fluent_form_3 .ff-el-form-control
{
	border: 1px solid var(--dark-teal);
	background-color: var(--white);
	color: var(--med-teal);
	font-size: .85rem;
}

.fluentform form.fluent_form_3 .ff-el-form-control::placeholder
{
	color: var(--med-teal);
}

.fluentform form.fluent_form_3 .ff-el-is-required.asterisk-right label::after
{
	color: var(--burgundy);
}

.fluentform form.fluent_form_3 .ff-btn
{
	background-color: var(--dark-teal) !important;
	text-transform: uppercase;
	transition: background-color .5s, color .5s;
}

.fluentform form.fluent_form_3 .ff-btn:hover
{
	background-color: var(--med-teal) !important;
	opacity: 1 !important;
}

.fluentform form.fluent_form_3 .ff-text-left, .ff-el-turnstile, .cf-turnstile
{
	text-align:center;
}

  .services-alt-rows .row {
    display: flex;
    gap: var(--gutter);
    margin-bottom: var(--gutter);
    min-height: var(--image-height-desktop);
  }

  .services-alt-rows .box {
    flex: 1;
    display: flex;
    justify-content: center; 
    align-items: center;    
    padding: 20px;
  }

  .services-alt-rows .text-box
  {
	  flex-direction: column;     
	  align-items: flex-start;     
	  justify-content: center;  
  }   

.services-alt-rows .text-box h2 {
  margin: 0 0 12px 0;          /* spacing below heading */
}

  .services-alt-rows .image-box img {
    height: var(--image-height-desktop);
    width: auto;
    object-fit: cover;
    display: block;
    max-width: 100%;
  }

.menu {
  position: fixed;
  top: 167px;              /* just below the header */
  right: 20px;            /* 20px from right edge */
  width: 225px;
  max-width: 85vw;
  background: var(--dark-teal-rgb);
  border: 1px solid rgba(187, 170, 102, 0.5);
  border-radius: 10px;

  /* Let height match content */
  height: auto;
  max-height: 80vh;       /* optional safety cap if list grows large */
  overflow-y: auto;       /* scroll if too tall */

  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;

  box-shadow: 0 1px 22px rgba(0,0,0,.5);
  z-index: 1001;
  padding: 24px;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.menu--open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.menu__close {
  align-self: flex-end;
  font-size: 1.25rem;
  background: none;
  line-height:.25;
  color: var(--gold);
  padding: 0;
  border: 0;
  cursor: pointer;
}

.menu ul
{
	line-height: 1.1;
	margin: 0;
	width: 100%;
}

.menu li
{
	width: 100%;
	text-transform: uppercase;
	font-size: .85rem;
	border-bottom: 1px solid var(--gold-rgb);
	font-family: quasimoda, sans-serif;
	padding: .5rem 0 .5rem .5rem;
	transition: background-color .5s, opacity .5s;
	opacity: 0.8;
}

.menu a:last-of-type li
{
	border-bottom: none;
}

.menu a li:hover
{
	background-color: var(--gold-rgb);
	opacity: 1;
}

.menu a
{
	margin: 0 .5rem 0 0;
	font-weight: 300;
	text-decoration: none;
}

table
{
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 0 1rem;
	max-width: calc(1200px - 1rem);
}

th, td
{
	color: var(--black);
	box-sizing: border-box;
	padding: 0 .25rem .1rem .25rem;
}

td
{
	vertical-align: top;
}

thead th
{
	background-color: rgba(187, 170, 102, 0.75);
}

tbody th
{
	background-color: rgba(28, 67, 78, 0.75);
	color: var(--white);
}

tr th:first-of-type
{
	width: 50%;
}

tr th
{
	width: 25%;
}

.notice
{
	border: 1px solid var(--gold);
	padding: 0;
	margin-bottom: 2rem;
}

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

@media (min-width: 900px) {
  .services-alt-rows > .row:nth-of-type(even) {
    flex-direction: row-reverse;
  }
}

@media only screen and (max-width: 600px)
{

	html, body
	{
		font-size: 16px;
		min-height: 100vh;
	}

	#outer
	{
		background-size: 125px auto;
	}
	header img
	{
		float: left;
		height: auto;
		width: 97.5%;
		padding: 0;
	}

	header p
	{
		line-height: .85;
		font-size: .85rem;
		padding: .3rem 0 .3rem 2.75rem;
	}

	img.gwh
	{
		width: 35px;
		height: auto;
	}

	.fofimg
	{
		width: 250px;
	}
	main
	{
		min-height: 100%;
		max-width: 100%;
		padding:.5rem;
		margin: 6rem auto 0 auto;
	}

	.fluentform form
	{
		max-width: 90vw;
		width: 90vw;
		margin: 0 auto;
	}

	h1
	{
		font-size: 2rem;
	}

	h2
	{
		font-size: 1.5rem;
	}

	    .services-alt-rows .row {
      flex-direction: column;
      min-height: initial;
      gap: 12px;
    }
    .services-alt-rows .image-box img {
      width: 100%;
      height: auto;
      max-height: none;
    }
    .services-alt-rows .box {
      padding: 16px;
    }

		.hamburger img
		{
			top: 110px;
			width: 24px;
			right: 55px;
		}

		.hamburger:hover img
		{
			top: 108px;
			width: 28px;
			right: 53px;
		}

		.menu
		{
		  top: 140px; 
		  right: 10px;
		  width: 210px;
		}

		.fright
		{
			width: 45%;
		}

		th, td
		{
			font-size: .8rem;
		}

		tr th:first-of-type
		{
			width: 65%;
		}

		tr th
		{
			width: 17.5%;
		}

		table, .note
		{
			margin:1rem 0;
			max-width: 100%;
		}

	.services-alt-rows .row, .text-box {
    display: flex;
    gap: 0;
    margin-bottom: 0;

  }


}

 @media (prefers-color-scheme:dark)
 {

	body
	{
		background-color:var(--black);
	}

 	p, ol, ul, th:not(thead th), td, h3
	{
		color: var(--white);
	}

	h1, h2, strong, em, a
	{
		color: var(--light-teal);
	}

	footer
	{
		border-top: 1px solid var(--dark-teal);
	}

	#outer
	{
		background-image: url(/img/gwh-d-50.png?ver=1);
	}

	header
	{
		box-shadow: 0 1px 8px var(--dark-teal);
	}

	footer
	{
		box-shadow: 0 -.5px 4px var(--dark-teal);
	}

	.fluentform form.fluent_form_3 .ff-el-form-control
	{
		border: 1px solid var(--dark-teal);
		background-color: var(--black);
		color: var(--med-teal);
		font-size: .85rem;
	}

	.fluentform form .ff-el-input--label label
	{
		color: var(--white);
	}

	.fluentform form.fluent_form_3 .ff-el-form-control::placeholder, .fluentform .ff-message-success
	{
		color: var(--light-teal);
	}

	.fluentform form.fluent_form_3 .ff-el-is-required.asterisk-right label::after
	{
		color: var(--light-teal);
	}

	.fluentform form.fluent_form_3 .ff-btn
	{
		background-color: var(--dark-teal) !important;
	}

	h2 a:hover
	{
		text-shadow: 0 0 3px #C9CCCF;
	}

	.menu
	{
		border: 1px solid rgba(187, 170, 102, 0.25);
	  box-shadow: 0 1px 15px rgba(255,255,255,.1);

	 }


 }
</style>