/*
Theme Name: Twenty Twenty-Three Child
Theme URI: https://wordpress.org/themes/twentytwentythree
Template: twentytwentythree
Author: SageMG
Author URI: https://sagemg.com.au/
Description: Twenty Twenty-Three is designed to take advantage of the new design tools introduced in WordPress 6.1. With a clean, blank base as a starting point, this default theme includes ten diverse style variations created by members of the WordPress community. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.6
Version: 1.0001
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentythree
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/

/*********** header ***********/

:root {
  --header-height: 114px; /* fallback/default - TODO: best to update before release with actual */
  --admin-bar-height: 0px;
  --header-effective-height: var(--header-height); /* gets overwritten by js calc */  
}

html {
  scroll-padding-top: 10rem;
}

html.admin-bar {
  scroll-padding-top: calc(10rem + 32px);
  --admin-bar-height: 32px;
}
@media screen and (max-width: 782px) {
  html.admin-bar {
    --admin-bar-height: 46px;
  }
}
header {
  position: fixed;
  z-index: 1000;
  top: var(--admin-bar-height);
  width: 100%;
}

/* adminbar not fixed <= 600px, so don't need to offset header */
@media screen and (max-width: 600px) {
  html.scrolled-past-adminbar header {
    top: 0;
  }
}

body {
  /* padding-top: calc(var(--header-effective-height) + var(--admin-bar-height)); */
  padding-top: calc(var(--header-effective-height) );
}

.wp-block-site-logo img {
  width: clamp(100px, 20vw, 240px);
}

/*********** gutenberg fixes ***********/

.wp-block-column {
  /* min-width: unset; */
}


body .is-layout-flow > * + * {
  margin-block-start: 1.25em;
}

body .is-layout-flow > *.wp-block-group + *.wp-block-group {
  margin-block-start: var(--wp--preset--spacing--40);
}

body .is-layout-constrained > *.has-background + *.has-background, 
body .is-layout-flow > *.has-background + *.has-background {
  margin-block-start: 0;
}

:where(.wp-block-group.has-background) {
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
}



/* TODO: this has to be changed based on theme.json contentSize. Use contentSize + 56px  */
@media (max-width: 1256px) {
  .has-global-padding :where(.has-global-padding) {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
  }
}


/* globals */

body {
  --rpt_divide_4: calc(var(--wp--style--root--padding-top) / 4);
}
/* 2023 fixes */

.wp-site-blocks {
  padding-top: 0; /* var(--rpt_divide_4); */
  padding-bottom: 0;
}
.pt-rpt_divide_4 {
  padding-top: var(--rpt_divide_4);  
}
.pb-rpt_divide_4 {
  padding-bottom: var(--rpt_divide_4);
}

/* nav */
.wp-block-navigation__responsive-container-open {
  padding-top: var(--rpt_divide_4);
  padding-bottom: var(--rpt_divide_4);
}

:where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)), 
:where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)), 
:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)), 
:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)) {
  padding-top: var(--rpt_divide_4);
  padding-bottom: var(--rpt_divide_4);
}

/* fix whitespace for button-ish (.has-highlight) items in mobile menu */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-highlight {
  /* background-color: blue !important; 2023 clobbers background color in mobile menu */
  padding: 0.5rem;
} 


/* give some extra vertical spacing if we have a button-ish (.has-highlight) item.  */

.wp-block-navigation:not(.is-vertical):has(.wp-block-navigation-item.has-highlight) {
  margin-top: var(--rpt_divide_4);
  margin-bottom: var(--rpt_divide_4);
}

/* don't right pad last item unless it's button-ish (.has-highlight) */
.wp-block-navigation .wp-block-navigation-item:last-child:not(.has-highlight) a {
  padding-right: 0;
}

/* don't right pad last social link */
.wp-block-social-links .wp-social-link:last-child a {
  padding-right: 0;
}

/* non-header navs */

.non-header-nav .wp-block-navigation__container {
  row-gap: 0.5rem;
  margin-left: 0.5em;
}

.non-header-nav li.wp-block-navigation-item.has-highlight.wp-block-navigation-link {
  padding: 0.5em var(--rpt_divide_4);
  margin-left: -0.5em;
}

/* colors. TODO extend, play with HSL stuff in theme.json etc. */


.wp-block-navigation-link a {
  color: inherit;
}


/*
:root {
  --primary-hue: 45deg; 
  --primary-sat: 100%;
  --primary-lum: 60%; 
}
*/
.has-contrast-background-color.has-background {
  --forecolor: var(--wp--preset--color--secondary);
}
.has-base-background-color.has-background, 
.has-secondary-background-color.has-background {
  --forecolor: var(--wp--preset--color--contrast);
}

.has-contrast-background-color.has-background *,
/* .has-base-background-color.has-background *,  */
.has-secondary-background-color.has-background *
 {
  color: var(--forecolor);
} 


a, .wp-block-post-content a {
  --forecolor: var(--wp--preset--color--contrast);
  color: var(--forecolor);
}

.has-secondary-background-color.has-background a,
.has-contrast-background-color.has-background a {
  --forecolor: var(--wp--preset--color--base);
  color: var(--forecolor);  
} 

/* 
a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--contrast);
} */
a:where(:not(.wp-element-button)):hover {
  color: var(--wp--preset--color--primary);
}

/*********** social/contact links ***********/

.wp-block-social-links .wp-social-link span:not(.screen-reader-text) {
  font-size: var(--wp--preset--font-size--medium);
}

.wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
  background: transparent;
  color: var(--wp--preset--color--contrast); 
}

.wp-block-social-links:not(.is-style-logos-only) .wp-social-link:hover .wp-block-social-link-anchor,
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link:hover .wp-block-social-link-anchor svg {
  color: var(--wp--preset--color--primary);
  fill: var(--wp--preset--color--contrast);
}


.wp-social-link a[href^=tel] svg {
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='fill: white; transform: scaleX(-1);'%3E%3C!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
}
.wp-social-link a[href^=tel] svg path {
  display: none;
}

/*********** text outline effect ***********/

[data-tfx-words] {
  position: relative;
  transform: translateX(0.2em);
}
[data-tfx-words]:before {
  content: attr(data-tfx-words);
  -webkit-text-stroke-width: 0.75px;
  -webkit-text-stroke-color: inherit;
  -webkit-text-fill-color: transparent;
  opacity: 0.5;
  position: absolute;
  left: 0;
  font-size: 2em;  
  transform: translate(-0.2em, -0.3em);
  overflow: hidden; max-width: 100%; /* make sure it doesn't overflow on small screens */
}



/*********** utilities ***********/

  /*********** typography ***********/

.white-space-no-wrap {
  white-space: nowrap !important;
}
.lh-1 {
  line-height: 1 !important;
}

  /*********** spacing/flex ***********/

.no-gap {
  gap: 0 !important;
}
.no-row-gap {
  row-gap: 0 !important;
}

.gap-0p5rem {
  gap: 0.5rem !important;
}
.row-gap-0p5rem {
  row-gap: 0.5rem !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}
.no-shrink {
  flex-shrink: 0 !important;
}

.justify-right-child > * {
  justify-content: right;
}

.align-start {
  align-items: flex-start !important;
}
.align-self-stretch {
  align-self: stretch !important;
}

.child-flex-direction-column > * {
  flex-direction: column !important;
}
.child-flex-align-start > * {
  align-items: flex-start !important;
}

  /*********** images ***********/

.aspect-ratio-1, .aspect-ratio-1 img {
  aspect-ratio: 1 !important;
}
.object-fit-cover, .object-fit-cover img {
  object-fit: cover !important;
}
.img-width-100 img {
  width: 100%;
}

  /*********** effects ***********/

:root {
  --box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  /* --drop-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25); */
  --drop-shadow: 1px 1px 24px rgba(0, 0, 0, 0.25);
}

.drop-shadow {
  filter: drop-shadow(var(--drop-shadow));
}

/* general */

.width-icon-medium {
  --icon-width: 24px;
  
  flex-basis: var(--icon-width) !important;
}