/*
Theme Name: Dottie
Theme URI: 
Author: Aaron Greiner
Author URI: 
Description: Dottie is a theme based on Twenty Twenty Four designed for the Cambridge Kiosk.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: dottie
Tags: 
*/

/*Variables*/
:root {
    --wp--style--border-radius: 1.5rem;
}

/* Focus Fix */
:focus {
	outline: none;
}

:focus-visible {
	outline: -webkit-focus-ring-color auto 1px;
}

/* Footer */
@media (max-width: 781px) {
    .center-on-mobile * {
        align-items: center;
		text-align: center;
    }
}

@media (min-width: 782px) {
    footer hr.wp-block-separator.is-style-dots {
    	text-align: left;
	}
	:root :where(footer .wp-block-separator.is-style-dots):before {
		margin-left: 10%;
	}
}

.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}


/* Menu Bar */
header:has(.is-position-sticky) {
    top: 0;
	position: sticky;
	box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.05);
	z-index: 1000;
}

.wp-block-navigation a[aria-current="page"]::after {
    content: ''; /* Empty content for the pseudo-element */
    position: absolute;
    bottom: -.1rem; /* Position the bar below the text */
    left: 0;
    width: 100%; /* Make the bar the same width as the <a> */
    height: .25rem; /* Set the height of the blue bar */
    background-color: var(--wp--preset--color--accent-1); /* Set the color of the bar */
    border-radius: 100px; /* Round the ends of the bar */
}

a.wp-block-navigation-item__content {
    text-decoration: none;
}

a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-5) !important;
}

header img {
    border-radius: 0px !important;
}

/* Separator */
:root :where(.wp-block-separator.is-style-dots):before {
	content: "······";
	letter-spacing: .75em;
	padding-left: .75em;
}

/* Buttons */
.wp-element-button {
	transition: .5s;
}

/* Text Fields */
.text-field {
    border-radius: 999px;
    border-color: var(--wp--preset--color--accent-6) !important;
    border: 2px solid;
	padding-top: var(--wp--preset--spacing--20);
    padding-right: var(--wp--preset--spacing--30);
    padding-bottom: var(--wp--preset--spacing--20);
    padding-left: var(--wp--preset--spacing--30);    
	text-decoration: unset !important;
	font-family: var(--wp--preset--font-family--red-hat-text);
	font-size: var(--wp--preset--font-size--medium);
}

div.mce_inline_error {
	font-size: var(--wp--preset--font-size--small);
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}

/* Headers */
h2.wp-block-heading {
	position: relative;
}

h2.wp-block-heading::before {
    content: '';
    width: calc(.5 * var(--wp--preset--font-size--x-large));         /* Size of the circle */
    height: calc(.5 * var(--wp--preset--font-size--x-large));        /* Size of the circle */
    background-color: var(--wp--preset--color--accent-1); /* Circle color */
    position: absolute;
    left: -1.25rem;         /* Move the circle outside the margin */
	top: calc(var(--wp--preset--font-size--x-large) * .4);
	border-radius: 50%;  /* Makes the element a circle */
}

h2.wp-block-site-title {
    text-transform: none;
}

/* Paragraphs */
h4 + *, h5 + *, h6 + * {
    margin-top: calc(var(--wp--style--block-gap) / 4) !important;
}

/*Bullets*/
ul li::marker {
    color: var(--wp--preset--color--accent-1);
}

/*Events*/
.event-item {
    border-radius: var(--wp--style--border-radius); 
    overflow: hidden;
}

.event-item img {
    border-radius: 0;
}

/*Accessibility*/
#accessibility-toggle-container {
	bottom: 25.88px;
    right: 126.64px;
}

/* Scroll to section */
[id] {
	scroll-margin-top: calc(4 * var(--wp--preset--spacing--30));
}