/*
Theme Name: Attain Pro
Theme URI: https://resourceful-digital.com/
Author: Diana Thompson
Author URI: https://dianathompson.org
Tags: accessibility-ready, full-site-editing
Text Domain: attain-pro
Description: Attain Pro is a full site editing theme designed to be accessibility-ready and easy to use. It is built on the WordPress block editor and includes custom styles for typography, navigation, and more.
Requires at least: 6.1
Requires PHP: 7.4
Tested up to: 6.2.2
Version: 1.1.9

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (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.
*/

/* Color palette contrast 
https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=&foreground-colors=%231A0602Foreground%0D%0A%23FEFEFE%20Background%0D%0A%23B30438%20Primary%0D%0A%238D032C%20Secondary%0D%0A%23660220%20Tertiary%0D%0A%23F8F4E8Quaternary%0D%0A%23B33104%20Quinary%0D%0A%23C66543&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18
*/

/* Prevent horizontal scrolling */
html, body {
  overflow-x: hidden!important;
}
body {
  background-color: var(--wp--preset--color--background);
  overflow-y: hidden!important; 
  position: relative!important;
}

/**
 ** Structure
 */ 
.wp-site-blocks {
  padding-top: 0;
  padding-bottom: 0;
}
.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]), p, h1, h2, h3, h4, h5, h6, ul, ol) {
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
}
.wp-site-blocks main {
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--50)
}

/* Sticks footer to bottom on shorter pages*/
.wp-site-blocks {
  min-height: 100vh; 
  display: flex;
  flex-direction: column;
}
main {
  flex: 1; 
}

/* Header */ 
header.wp-block-template-part {
  color: var(--wp--preset--color--background);
  background-color: var(--wp--preset--color--tertiary); 
}
 
/* Footer */ 
footer.wp-block-template-part {
  margin-top: var(--wp--preset--spacing--80);
}
footer.wp-block-template-part a {
  color: var(--wp--preset--color--background);
}
footer.wp-block-template-part > .wp-block-group {
  color: var(--wp--preset--color--background);
  background-color: var(--wp--preset--color--secondary); 
}
footer.wp-block-template-part > .wp-block-group:first-of-type {
  padding-top: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--50);
}

/* Copyright section */ 
footer.wp-block-template-part > .wp-block-group:last-of-type {
  padding-top: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--background);
  background-color: var(--wp--preset--color--tertiary); 
  text-align: center; 
}
footer.wp-block-template-part > .wp-block-group:last-of-type p {
  font-size: var(--wp--preset--font-size--x-small);
}

/**
 ** Typography
 */ 

/* Headings */ 
/* Enlarge link target area in headings for accessibility and align heading to bottom */ 
h1, h2, h3, h4, h5, h6 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 48px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  margin-top: auto; 
}  
h1.archive-title {
  text-align: center;
}
dt {
  font-weight: bold; 
}

/** 
 ** Images
*/
.alignleft {
  float: left;
  margin-top: var(--wp--preset--spacing--20);
  margin-right: var(--wp--preset--spacing--50);
  margin-bottom: var(--wp--preset--spacing--20);
}
.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignright {
  float: right;
  margin-top: var(--wp--preset--spacing--20);
  margin-left: var(--wp--preset--spacing--50);
  margin-bottom: var(--wp--preset--spacing--20);
}
.wp-block-image.alignfull :where(figcaption) {
  margin-left: 1rem; 
  margin-right: 1rem; 
}

/**
 ** Branding 
 */ 
/* Enlarge link target area to site title for accessibility */ 
.wp-block-site-title a:where(:not(.wp-element-button)) {
  display: block;
  padding: 1rem 1rem 1rem 0; 
}

/**
 ** Navigation 
 */ 
/* Set minimum height for accessible link target area */ 
.wp-block-navigation ul li:not(.wp-social-link) {
  min-height: 48px; 
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
  background-color: var(--wp--preset--color--quaternary);
} 

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:not(.wp-block-social-link-anchor):focus {
  outline: 4px solid var(--wp--preset--color--senary);
  outline-offset: -4px;
  color: var(--wp--preset--color--secondary);
  background-color: var(--wp--preset--color--background);
} 

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:not(.wp-block-social-link-anchor) {
  padding: 1rem 1.5rem; 
}

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:not(.wp-block-social-link-anchor) a:focus { 
  outline: 4px solid var(--wp--preset--color--senary);
  outline-offset: 2px;
  color: var(--wp--preset--color--foreground);
  background-color: var(--wp--preset--color--background);
}

/* Increase target area for accessibility */ 
.wp-block-navigation button.wp-block-navigation__submenu-icon {
  width: 24px; 
  height: 24px; 
}
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
  width: 13px; 
  height: 13px; 
}
.wp-block-navigation button.wp-block-navigation__submenu-icon:focus {
  outline: 2px solid var(--wp--preset--color--secondary);
  outline-offset: 1px;
  color: var(--wp--preset--color--secondary);
  background-color: var(--wp--preset--color--background);
}

/**
 ** Mobile Navigation 
 */ 
/* Make padding around button consistant whether menu is open or closed */ 
.wp-block-navigation__responsive-container.is-menu-open {
  padding-top: var(--wp--preset--spacing--40);
  padding-right: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--40);
  padding-left: var(--wp--preset--spacing--30);
}

/* Format focus on mobile menu button */ 
.wp-block-navigation__responsive-container-open:focus, .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open:focus, 
.wp-block-navigation__responsive-container-close:focus, .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close:focus, 
.wp-block-navigation .wp-block-navigation__submenu-icon:focus
 {
  outline: 2px solid var(--wp--preset--color--secondary);
  outline-offset: 1px;
}

/* Increase target area size to 48px by 48px on mobile menu button for accessibility */ 
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
  padding: 6px; 
}
.wp-block-navigation__responsive-container-close svg, 
.wp-block-navigation__responsive-container-open svg {
  width: 36px; 
  height: 36px; 
}

/* Make font size smaller */ 
.wp-block-navigation .is-menu-open {
  font-size: var(--wp--preset--font-size--x-small);
}

/* Remove gap between menu items on mobile */ 
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, 
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
  gap: 0; 
}

/* Make max-width narrower */ 
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
  max-width: 150px;
}

/* Group descendents visually with ancestor */ 
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
  padding-top: 0; 
}
.wp-block-navigation__responsive-container:hot(.is-menu-open) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
  padding-top: var(--wp--style--block-gap,2em); 
}

/* Format descendent indents */ 
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
  padding: 0 0 0 48px; 
}

/**
 ** Navigation Wayfinding, format current and current ancestor items for accessibility 
 */ 
/* Current menu item - works for both Navigation Links and Page List */
.wp-block-navigation .wp-block-navigation__container .wp-block-page-list .current-menu-item > a,
.wp-block-navigation .wp-block-navigation__container .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content.wp-block-navigation-item__content:not(.wp-block-social-link-anchor) {
  color: var(--wp--preset--color--foreground) !important;
  background-color: var(--wp--preset--color--background) !important;
}

/* Desktop child/grandchild level container */ 
.wp-block-navigation .wp-block-navigation__submenu-container {
  background-color: transparent !important;
  border: 1px solid transparent !important; 
  border-color: transparent !important;
}

/* Desktop child/grandchild level current menu item */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .current-menu-item > a,
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--background) !important;
  background-color: var(--wp--preset--color--secondary) !important;
}

/* Desktop child/grandchild level current menu ancestor */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .current-menu-ancestor > a,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--tertiary) !important;
  border-left: 0.75rem solid var(--wp--preset--color--senary) !important;
  padding-left: 0.75rem !important;
}

/* Desktop root current menu ancestor: add left solid border */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .current-menu-ancestor > a,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--tertiary) !important;
  background-color: var(--wp--preset--color--quaternary) !important;
  border-left: 0.75rem solid var(--wp--preset--color--senary) !important;
  padding-left: 0.75rem !important;
}

/**
 ** Home Page Template
 */ 
.home .entry-content > .wp-block-cover:first-of-type {
  padding-top: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--40);
}
.home main > .wp-block-cover:first-of-type {
  height: 100vh !important; 
  padding-top: var(--wp--preset--spacing--80);
  padding-bottom: var(--wp--preset--spacing--80);
}
@media (min-width: 782px) {
  .home main > .wp-block-cover:first-of-type {
    height: 80vh !important; 
  }
}
.home main > .wp-block-cover:first-of-type h1 {
  padding-top: 0;
}

 /**
 ** Page Wide Template
 */ 
.page-template-page-wide .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--wide-size)
}

/**
 ** Blog Archive Template
 */ 
.blog main > .wp-block-cover {
  min-height: auto !important;
  height: 25vh !important; 
}
.blog main > .wp-block-cover.has-background-dim-90 {
  background-color: rgba(14, 92, 183, 0.9) !important; /* primary */
}
/* Tighten up byline spacing for a sentence-like structure with added content */ 
body .byline.is-layout-flex {
  gap: 0.3rem; 
}
/* Add "By " before author in post metadata */  
.wp-block-post-author__name::before {
  content: "By "
}
/* Add "on " before date in post metadata */  
.wp-block-post-date::before {
  content: "on "
}

/* Add "Category: " before category in metadata */ 
.taxonomy-category::before {
  content: "Category: "
}
/* Add "Tags: " before tag list in metadata */ 
.taxonomy-post_tag::before {
  content: "Tags: "
}
/* Enlarge target area of category and tag links for accessibility */ 
.wp-block-post-terms {
  line-height: 25px;
  margin-bottom: 23px;  
}
.wp-block-post-terms a {
  padding: 12px 0; 
}

/**
 ** Search 
 */ 
/* Apply site focus styles to search field and button */
.wp-block-search__input:focus,
.wp-block-search__button:focus {
  outline: 2px solid var(--wp--preset--color--secondary);
  outline-offset: 1px;
}

/**
 ** Local formatting 
 */ 
.border {
  border: 1px solid var(--wp--preset--color--foreground); 
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/**
 ** Blocks 
 */

/* Button */ 
/* Add opacity to buttons for hover effect */
.wp-block-button__link {
  position: relative; 
  top: 0; 
  transition: all 0.5s; 
}

.wp-block-button__link:hover, 
.wp-block-button__link:focus {
  top: -6px; 
}

/* Change outline style button to custom colors */ 
.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color), 
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
  color: var(--wp--preset--color--secondary); 
  background-color: var(--wp--preset--color--quaternary);
  border-color: var(--wp--preset--color--secondary); 
}

/* Cover */ 
main > .wp-block-cover, 
main > .wp-block-telex-page-title-cover > .wp-block-cover {
  min-height: auto !important;
  height: 25vh !important; 
  margin-bottom: var(--wp--preset--spacing--80);
}
main > .wp-block-cover.has-quinary-background-color, 
main > .wp-block-telex-page-title-cover > .wp-block-cover.has-quinary-background-color {
  background-color: var(--wp--preset--color--quinary-rgb) !important; 
}

/* Social Links */
.wp-block-social-links {
  font-size: 30px!important; /* set so overall size is 45px for minimum accessibility */
}

/* Group */ 
div.wp-block-group.has-background {
  padding-top: var(--wp--preset--spacing--80);
  padding-bottom: var(--wp--preset--spacing--80);
  text-decoration: underline;
}