/**
  Theme Name: Lost Girl Found
  Theme URI: https://4610hosting.com
  Description: Custom theme for A Lost Girl Found
  Version: 1.0
  Author: Carlos Hernandez
  Author URI: https://4610hosting.com
  Tags: block-patterns, custom-theme
  Text Domain: lost-girl
  Domain Path: /assets/lang
  Tested up to: 6.4
  Requires PHP: 8.1
  License:           GNU General Public License v2.0 or later
  License URI:       https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {

  /**** COLORS ****/
  /*
  USAGE:
  Using HSL color function. Variables contain only the value.

  Example:

  --sample: 20 30% 50%
  color: hsl(var(--sample));

  If the alpha (transparency) needs to be adjusted
  color: hsl(var(--sample) / .3);
  */
  --color-amber: 37 100% 73%;
  --color-rust-orange: 21 57% 45%;
  --color-burnt-sienna: 20 68% 32%;
  --color-forest-green: 75 15% 26%;
  --color-kraft-tan: 37 56% 80%;

  /*
  Custom properties
  */
  --setting-color-body-bg: hsl(var(--color-kraft-tan));
  --setting-color-body-text: hsl(var(--color-forest-green));
  --setting-color-controls-bg: hsl(var(--color-burnt-sienna));
  --setting-color-controls-bg-hover: hsl(from var(--setting-color-controls-bg) h s calc(l + 10));
  --setting-color-inline-buttons-text: hsl(var(--color-kraft-tan)); 
  --setting-color-outlines: hsl(var(--color-forest-green));
  --setting-font-titles: 'Baskervville';
  --setting-font-text: 'Cabin';
  --setting-color-select: hsl(0 0% 97%);
  --setting-color-select-bg: hsl(219 79% 66%);

  --lgf-max-display-width: 100rem;
  --lgf-text-font: var(--setting-font-text), Arial, sans-serif, system-ui;
  --lgf-heading-font: var(--setting-font-titles), Georgia, serif, system-ui;
  --lgf-text-base-fs: 1rem;
  --lgf-fs-size-ratio: 1.15;
  --lgf-heading-base-fs: 3.75rem;
  --lgf-home-grid-max-col: 3;
  --lgf-home-grid-min-col-size: 250px;
  --lgf-home-grid-gap: 2.5rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
  &::selection {
    color: var(--setting-color-select);
    background-color: var(--setting-color-select-bg);
  }
}

html {
  background-color: var(--setting-color-body-bg);
  
  & :where(img, svg, iframe, video) {
    height: auto;
    max-width: 100%;
  } 
}

body, p, ul, figcaption {
  font-size: calc(var(--lgf-text-base-fs) * var(--lgf-fs-size-ratio));
}

body {
  color: var(--setting-color-body-text);
  container: body / inline-size;
  font-family: var(--lgf-text-font);
  margin-inline: auto;
  transition: opacity 1s ease-in 700ms;
  width: min(var(--lgf-max-display-width), 100%);

  &.preload {
    opacity: 0;
  }
}

p {
  line-height: 1.15em;
  margin-block: 1rem;

  &.has-small-font-size {
    --lgf-fs-size-ratio: 0.7;
  }

  &.has-medium-font-size {
    --lgf-fs-size-ratio: 0.95;
  }

  &.has-large-font-size {
    --lgf-fs-size-ratio: 1.3;
  }

  &.has-x-large-font-size {
    --lgf-fs-size-ratio: 1.45;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
  line-height: 1.5em;
  font-family: var(--lgf-heading-font), system-ui;
  font-size: calc(var(--lgf-heading-base-fs) * var(--lgf-fs-size-ratio));
  font-weight: 600;
  margin-block: 1em;
  text-wrap: balance;

  &:not(h6).has-small-font-size {
    --lgf-fs-size-ratio: 0.45;
  }

  &.has-medium-font-size {
    --lgf-fs-size-ratio: 0.65;
  }

  &.has-large-font-size {
    --lgf-fs-size-ratio: 1;
  }

  &:not(h1).has-x-large-font-size {
    --lgf-fs-size-ratio: 1.35;
  }
}

h1 {
  font-size: clamp(2rem, 7vw + 1px, var(--lgf-heading-base-fs));
  font-size: clamp(2rem, 7dvw + 1px, var(--lgf-heading-base-fs));
}

h2 {
  --lgf-heading-base-fs: 2.5rem;
}

h3 {
  --lgf-heading-base-fs: 2.2rem;
}

h4 {
  --lgf-heading-base-fs: 1.9rem;
}

h5 {
  --lgf-heading-base-fs: 1.6rem;
}

h6 {
  --lgf-heading-base-fs: 1.35rem;
}

a,
button,
input:is([type="submit"], [type="reset"], [type="checkbox"], [type="radio"]) {
  cursor: pointer;
  font-family: inherit;
}

button,
input:is([type="submit"], [type="reset"], [type="checkbox"], [type="radio"]) {
  font-variant: small-caps;
  user-select: none;
}

ul,
ol {
  list-style-position: inside;

  &.type-none {
    list-style-type: none;
  }
}

ul>ul,
ul>ol,
ol>ol,
ol>ul {
  margin-inline-start: 5ch;
}

.is-grid {
  display: grid;
}

.is-flex {
  display: flex;

  &.is-col {
    flex-direction: column;
  }

  &.is-col-reverse {
    flex-direction: column-reverse;
  }

  &.is-reverse {
    flex-direction: row-reverse;
  }

  &.is-wrap {
    flex-wrap: wrap;
  }

  &.is-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

.overflow-scroll {
  overflow: auto;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none /*Deprecated*/;
}

.img-circle {
  border-radius: 55%;
}

.is-relative, .is-sticky {
  position: relative;
}

/* .is-sticky > a::before {
  --svg-size: 75px;
  content: '';
  aspect-ratio: 1;
  background-image: url();
  background-repeat: no-repeat;
  background-size: var(--svg-size) var(--svg-size);
  display: block;
  inset: 1rem;
  position:absolute;
  width: var(--svg-size);
} */

.line-clamp {
  display: -webkit-box;
  overflow: hidden;
  line-clamp: var(--lgf-line-clamp, 2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lgf-line-clamp, 2); /*For backwards compatability*/
}

a, .lgf-inline-links {
  color: var(--setting-color-controls-bg);
  font-weight: 500;
  transition: color 300ms ease-in-out
}

a, .lgf-inline-links{
  &:is(:hover, :focus-visible) {
    color: var(--setting-color-controls-bg-hover);
  }
}

a, .lgf-inline-links {
  &:focus-visible {
    outline-color: var(--setting-color-outlines);
  }
}

.lgf-inline-buttons {
  appearance: none;
  border: none;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--setting-color-inline-buttons-text);
  background-color: var(--setting-color-controls-bg);
  padding: .4em .7em;
  border-radius: .4rem;
  transition: background-color 300ms ease-in-out;
}

.lgf-inline-buttons:is(:hover, :focus-visible) {
  background-color: var(--setting-color-controls-bg-hover);
}

.lgf-inline-buttons:is(:focus-visible) {
  outline-color: var(--setting-color-outlines);
  outline-offset: .1rem;
}

.lgf-wrapper--tagline {
  background-color: var(--setting-color-tagline-bg, var(--setting-color-body-text));
  color: var(--setting-color-tagline-text, var(--setting-color-body-bg));
  font-family: var(--lgf-heading-font), system-ui;
  font-size: clamp(1.5rem, 5dvw, var(--lgf-heading-base-fs)) !important;
  padding: .2em;
  text-wrap: balance;
}

.lgf-tagline-text {
  text-align: center;
  
  @container body ( width < 25rem ) {
    text-align: left;
    margin-left: 1rem;
  }
}

.lgf-wrapper--header {
  grid-template-columns: min(25cqi, 375.344px) 1fr;
  grid-template-rows: min(350px, 25vw);
  isolation: isolate;

  & img {
    height: 100%;
    width: auto;
    object-fit: cover;
  }

  &>[class^="lgf-header"] {
    grid-row: 1 / 1;
  }
}

.lgf-header-logo {
  grid-column: 1 / 1;
  opacity: 0.65;
  text-align: center;

  @container body (width < 600px) {
    opacity: 1;
  }
}

.lgf-header-image {
  grid-column: 1 / -1;
  z-index: -1;

  & .lgf-image--bg {
    width: 100%;
  }
}

.lgf-navigation--main[popover] {
  background-color: color-mix(in oklab, var(--setting-color-body-bg)50%, hsl(var(--color-amber)));
  border: none;
  display: none;
  min-height: 30%;
  inset: auto;
  margin: 0;
  position: absolute;
  position-anchor: --main-menu-button;
  right: anchor(right);
  scale: 0 1;
  top: calc(anchor(bottom) + 0.2em);
  transition: display .5s ease, scale .5s ease;
  transition-behavior: allow-discrete;
  transform-origin: right;
  width: 70%;

  & .lgf-menu-list {
    flex-direction: column;

    & .lgf-nav-item,
    & .lgf-nav-item--link {
      width: 100%;
      --width-9kfnbr64qZMtGmbqIibd3: 100%;
    }

    & .current {
      background-color: color-mix(in oklab, var(--setting-color-body-bg)20%, hsl(var(--color-rust-orange)));

      & .lgf-nav-item--link {
        color: white;
      }
    }

    & .lgf-nav-item--link {
      text-align: center;

      &::after {
        content: unset;
      }
    }
  }
}

.lgf-navigation--main[popover]:popover-open {
  display: block;
  scale: 1;


  &::backdrop {
    background-image: linear-gradient(to bottom, transparent 4%, hsl(0 0%0%/.2)7%);
  }

  @starting-style {
    scale: 0 1;
  }
}

.lgf-menu-list {
  gap: 1ch;
  list-style-type: none;
  margin-block: 0.5em;
}

.lgf-control--main-menu {
  anchor-name: --main-menu-button;
  appearance: none;
  aspect-ratio: 1;
  background: none;
  border: none;
  display: none;
  justify-content: space-around;
  padding: 3px;
  width: 36px;

  & .bar {
    background: hsl(var(--setting-color-menu-bars-bg, var(--color-rust-orange)));
    border-radius: 3rem;
    height: 4px;
    width: 100%;
    transition: translate 300ms ease-in-out 200ms,
      rotate 200ms ease-in-out;
  }

  &[data-state="open"] .bar {
    transition: translate 300ms ease-in-out,
      rotate 200ms ease-in-out 300ms;

    &.bar1 {
      translate: 0 10px;
    }

    &.bar1,
    &.bar2 {
      rotate: 45deg;
    }

    &.bar3 {
      translate: 0 -10px;
      rotate: -45deg
    }
  }
}

.lgf-header-menu-main {
  & .lgf-nav-item--link {
    display: inline-block;
    font-weight: 650;
    isolation: isolate;
    padding: 0.5em;
    position: relative;
    text-decoration: none;

    /* &:first-child {
      padding-inline-start: 0;
    } */
    &::after {
      background-color: hsl(var(--setting-color-menu-item-decoration, var(--color-burnt-sienna)));
      border-radius: 10rem;
      bottom: 0;
      content: '';
      height: 5px;
      left: 0;
      position: absolute;
      scale: 0 1;
      transform-origin: right;
      transition: scale .3s ease-in-out;
      width: 100%;
    }

    &:is(:hover, :focus-visible) {

      &::after {
        scale: 1;
        transform-origin: left;
      }

    }
  }

  & .lgf-nav-item.current .lgf-nav-item--link {
    color: hsl(var(--setting-color-menu-item-current-text, var(--color-forest-green)));
    pointer-events: none;

    &::after {
      background-color: hsl(var(--setting-color-menu-item-current-decoration, var(--color-forest-green)));
      scale: 1;
    }
  }
}

.lgf-main--content {
  margin-block-end: 2.5rem;

  &.is-single {
    width: min(65ch , 100%);
    margin-inline: auto;
  }
}

.lgf-home--bloglist {
  /* Column calculations. DO NOT TOUCH! (unless you're fixing it...) 
    Variables used in calculations defined in :root.
    SOURCE: Kevin Powell https://codepen.io/kevinpowell/pen/GgRwqxJ
  */
  --col-size-calc: calc((100% - var(--lgf-home-grid-gap) * var(--lgf-home-grid-max-col)) / var(--lgf-home-grid-max-col));
  --col-min-size-calc: min(100%, max(var(--lgf-home-grid-min-col-size), var(--col-size-calc)));
  
  gap: var(--lgf-home-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-size-calc), 1fr));
}

.lgf-home-article--card {
  background: color-mix(in hsl, var(--setting-color-body-bg) 95%, hsl(0 0 0) 5%);
  border-radius: .4rem;
  overflow: hidden;
}

.lgf-home-article--card-link {

  text-decoration: none;

  & .lgf-home-article--title {
    font-size: 1.35rem;
    margin-block: 0.5em;
    --lgf-line-clamp: 2;
  }

  & .lgf-home-article--meta {
    color: var(--setting-color-body-text);
    font-size: 0.95rem;
    font-weight: 400;
    text-align: end;
  }

}

.lgf-home-article--thumbnail {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  vertical-align: middle;
  width: 100%;
}

.lgf-home-article--info {
  padding-inline: 0.5rem;
  padding-block-end: 0.5rem;
}

.lgf-main {
  container-type: inline-size;
}

.lgf-article--title {
  margin-block: 0.15em;
  text-align: center;
  text-wrap: balance;
}

.lgf-article--date {

  --lgf-fs-size-ratio: 1;
  font-style: italic;
  margin-inline-end: auto;

  &.is-updated {
    margin-inline: auto 0;
  }
}

.lgf-article--author {
  margin-inline-end: auto;
}

.lgf-article--share {
  align-items: center;
}

.lgf-article--share-list {
  gap: 1ch;
}

.lgf-article--share-item {
  --_spacing: .15rem;
  --_size: calc((var(--lgf-text-base-fs) * var(--lgf-fs-size-ratio, 1.75)) + var(--_spacing));
  padding-inline: .15rem;
  max-height: var(--_size);
  width: var(--_size);

  &:is(:hover, :focus-visible) {
    background: hsl(from var(--setting-color-body-bg) h calc(s + 50) l);
    --box-shadow-color: hsl(var(--setting-color-share-link-boxshadow, var(--color-burnt-sienna)) / .5);
    box-shadow: -2px 2px 8px var(--box-shadow-color), 2px -2px 8px var(--box-shadow-color);
  }
}

.lgf-article--share-link {
  display: block;
  max-height: var(--_size);
  fill: var(--setting-color-controls-bg);

  &.lgf-article--share-button {
    appearance: none;
    background: transparent;
    border: none;
  }

  & .lgf-icon {
    margin-block-start: var(--_spacing);
  }
}

.lgf-article--excerpt {
  color: hsl(from var(--setting-color-body-text) h s l / 0.85);
  font-style: italic;
  font-weight: 550;
  margin-block: 1ch;
}

.lgf-article--thumbnail-container {
  margin-block: 1rem;
}

.lgf-article--thumbnail-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.lgf-article--thumbnail-caption {
  font-weight: 575;
}

.lgf-article--content {
  margin-block: 2rem;

  & > p:first-child::first-letter {
    color: hsl(var(--setting-color-first-letter, var(--color-burnt-sienna)));
    font-family: var(--lgf-heading-font);
    font-size: 2rem;
    font-weight: 700;
  }
}

.lgf-pagination-list {
  max-width: 100cqw;
}

.lgf-pagination-nav {
  --page-numbers-bg: var(--setting-color-controls-bg);
  --page-numbers-bg-hover: var(--setting-color-controls-bg-hover);
  --page-numbers-bg-inactive: hsl(from var(--page-numbers-bg) h calc(s - 40) l);
  /* --lgf-fs-size-ratio: 1.28; */
  align-items: center;
  font-weight: 600;
  justify-content: center;
  
  & .page-numbers {
    background: var(--page-numbers-bg); 
    color: var(--setting-color-inline-buttons-text);
    display: block;
    padding: 1em;
    text-decoration: none;
    transition: background 0.3s ease-in-out;

    &.prev {
      border-radius: 50% 0 0 50%;
    }

    &.inactive {
      background: var(--page-numbers-bg-inactive);
      pointer-events: none;
    }

    &.dots {
      padding-inline: 0.25em;
      pointer-events: none;
    }

    &.current {
      background: hsl(from var(--page-numbers-bg-hover) h s calc(l - 5));
      pointer-events: none;
    }

    &.next {
      border-radius: 0 50% 50% 0;
    }

    &:is(:hover, :focus-visible) {
      background: var(--page-numbers-bg-hover);
    }

    &:focus-visible {
      outline: none;
    }
  }
}

.lgf-footer-main {
  align-items: center;
  background: hsl(var(--setting-color-footer-bg, var(--color-forest-green)));
  color: hsl(var(--setting-color-footer-text, var(--color-kraft-tan)));
  font-weight: 450;
  gap: 1rem;
  justify-content: center;
  margin-block-start: var(--lgf-home-grid-gap);
  padding: 2rem;

  & a {
    color: white;
  }
}

.lgf-footer--copyright {
  text-align: center;

  & > p {
    margin: 0;
  }
}

.lgf-footer--socials,
.lgf-footer-socials--list {
  align-items: center;
  gap: 1ch;
  justify-content: center;

  & .lgf-footer-socials-item {
    /* --base-color: hsl(var(--setting-color-footer-socials-item-hover-bg, var(--color-burnt-sienna))); */
    background: var(--setting-color-controls-bg);
    border-radius: 5px;
    transition: background .3s ease-in-out, border-radius .3s ease-in-out; 

    &:is(:hover, :focus-within) {
      background: var(--setting-color-controls-bg-hover);
      border-radius: 0;
    }
  }
}

.lgf-footer-socials-link {
  display: block;
  height: 1.55em;
  padding: 0.25rem;
  width: 1.55em;
  outline-offset: 2px;

  &:is(:focus-visible) {
    outline: 1px double var(--setting-color-controls-bg-hover);
  }

  & .lgf-icon {
    fill: hsl(var(--setting-color-footer-socials-icon-fill, var(--color-kraft-tan)));
  }
}

.wp-caption {
  max-width: 100%;

  &.aligncenter {
    margin-inline: auto;
  }

  &.alignleft {
    float: inline-start;
    margin-block-end: 0.75em;
    margin-inline-end: 0.75em;
  }

  &.alignright {
    float: inline-end;
    margin-block-end: 0.75em;
    margin-inline-start: 0.75em;
  }

}

.wp-caption-text {
  --lgf-fs-size-ratio: .95;
  color: hsl(from var(--setting-color-body-text) h s l / 0.85);
  font-weight: 450;
}

p:has( > img.aligncenter ) {
  text-align: center;
}

p > img[class*="wp-image-"] {
  &.aligncenter {
    display: inline-block;
    margin-inline: center;
  }

  &.alignleft {
    float: inline-start;
    margin-block-end: .75em;
    margin-inline-end: .75em;
  }

  &.alignright {
    float: inline-end;
    margin-block-end: .75em;
    margin-inline-start: .75em;
  }
}

.wp-block-quote {
  inline-size: fit-content;
  margin-inline: auto;

  & p{
    font-size: 1.45rem;
    margin-block-end: 0.1em;

  }
  
  & cite{
    display: block;
    font-weight: 450;
    inline-size: fit-content;
    margin-inline: auto 0;

    &::before {
      content: '\2E3A'; /*2-em symbol (double dash)*/
    }
  }
}