/*
Theme Name: Vet It (Twenty Twenty-Five Child)
Template: twentytwentyfive
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: Kishore Hiranand
Author URI: https://wordpress.org
Description: Customizations for Vet It site
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
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, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}


/*****************/
/* Custom Styles */
/*****************/






/* Global Styles */

:root {
  --color-black : #000;
  --color-bone : #faf9dc;
  --color-green : #077e63;
  --color-lime : #d2d860;
  --color-pink : #f8bed7;
  --color-orange : #f26841;
  --color-white: #fff;
  --color-grey: #999999;
  --color-grey-2: #F3F4F6;
}

h1 {
  font-size: 2.91vw !important;
  line-height: 3.7vw;
}

.heading-padding {
  margin: 4vw 0 3vw !important;
}


.text-bone {
  color: var(--color-bone);
}

.text-green {
  color: var(--color-green);
}

.text-lime {
  color: var(--color-lime);
}

.text-pink {
  color: var(--color-pink);
}

.text-orange {
  color: var(--color-orange);
}

.text-grey {
  color: var(--color-grey);
}

.font-bold {
  font-weight: 700;
}

.font-italic {
  font-style: italic;
}

.font-larger {
  font-size: 115%;
}

.opacity-20 {
  opacity: 20%;
}

.quote {
  line-height: 1;
  
  &::before {
    content: open-quote;
    display: inline-block;
    font-size: 35px;
    top: -2px;
  }
  
  &::after {
    content: close-quote;
    display: inline-block;
    font-size: 35px;
    top: -2px;
  }
}

.bg-black {
  background-color: var(--color-black);
}

.bg-bone {
  background-color: var(--color-bone);
}

.bg-green {
  background-color: var(--color-green);
}

.bg-lime {
  background-color: var(--color-lime);
}

.bg-pink {
  background-color: var(--color-pink);
}

.bg-orange {
  background-color: var(--color-orange);
}

.bg-black {
  background-color: var(--color-black);
}

.bg-grey {
  background-color: var(--color-grey);
}

.bg-frosted-glass,
.frosted-glass {
  /* 1. Semi-transparent background */
  background: rgba(255, 255, 255, 0.2); /* White with 20% opacity */
  
  /* 2. Apply the blur effect to the background behind the element */
  backdrop-filter: blur(10px); 
  
  /* 3. Add vendor prefix for broader browser support (especially Safari) */
  -webkit-backdrop-filter: blur(10px);
  
  /* 4. Optional styling for better visual appeal */
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  padding: 25px;
}

.border-green {
  border: 1px solid var(--color-green);
}

.padding-left {
  padding-left: 7vw;
}

.padding-right {
  padding-right: 7vw;
}

.padding-10 {
  padding: 10px;
}

.padding-20 {
  padding: 20px;
}

.slight-right-margin {
  margin-right: 1vw !important;
}

.flex-center {
  align-items: center;
  display: flex;
}

.flex-end {
  justify-content: flex-end;
}

.v-align-center {
  display: flex;
  align-items: center;
}

div.wp-block-group {
  position: relative;
}

a.wp-block-button__link.wp-element-button {
  background-color: var(--color-orange);
  color: inherit;
}

div.wp-block-button.btn-green {
  a.wp-block-button__link.wp-element-button {
    background-color: var(--color-green);
  }
}

ul {
  margin: 10px 0 0 10px;
}

ul li {
  list-style-position: inside;
}

ul li.marker-checkbox::marker {
  content: "\2713"; /* Unicode for a check mark followed by a space */
  color: var(--color-white); /* You can style the marker color */
}

ul li.marker-checkbox p {
  padding-left: 40px;
}

.no-preset-padding {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.no-preset-margin {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: unset;
  width: 100%;
}

.pad-content-vertically {
  margin-bottom: 16vw !important;
  margin-top: 16vw !important;
}

.pad-content-bottom-3-vw {
  margin-bottom: 3vw !important;
}

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

.min-50vw {
  min-width: 50vw;
}

.width-22 {
  margin-left: auto;
  margin-right: auto;
  max-width: 22%;
  width: 22%;
}

figure.width-25 {
  max-width: 22%;
  width: 22%;
  
  img {
    max-width: 100%;
    width: 100%;
  }
}

.width-25 {
  margin-left: auto;
  margin-right: auto;
  max-width: 25%;
  width: 25%;
}

figure.width-25 {
  max-width: 25%;
  width: 25%;
  
  img {
    max-width: 100%;
    width: 100%;
  }
}

.width-50 {
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
  width: 50%;
}

figure.width-50 {
  max-width: 50%;
  width: 50%;
  
  img {
    max-width: 100%;
    width: 100%;
  }
}

.width-57 {
  margin-left: auto;
  margin-right: auto;
  max-width: 57%;
  width: 57%;
}

figure.width-57 {
  max-width: 57%;
  width: 57%;
  
  img {
    max-width: 100%;
    width: 100%;
  }
}

.width-80 {
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
  width: 80%;
}

figure.width-80 {
  max-width: 80%;
  width: 80%;
  
  img {
    max-width: 100%;
    width: 100%;
  }
}

.width-100 {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: 100%;
}

figure.width-100 {
  max-width: 100%;
  width: 100%;
  
  img {
    max-width: 100%;
    width: 100%;
  }
}

.width-23-5vw {
  margin-left: unset !important;
  margin-right: unset !important;
  margin: 0 auto;
  max-width: unset !important;
  width: 23.5vw !important;
}

.width-25vw {
  margin-left: unset !important;
  margin-right: unset !important;
  margin: 0 auto;
  max-width: unset !important;
  width: 25vw !important;
}

.width-47vw {
  margin-left: unset !important;
  margin-right: unset !important;
  margin: 0 auto;
  max-width: unset !important;
  width: 50vw !important;
}

.width-50vw {
  margin-left: unset !important;
  margin-right: unset !important;
  margin: 0 auto;
  max-width: unset !important;
  width: 50vw !important;
}

.width-84vw {
  margin-left: unset !important;
  margin-right: unset !important;
  margin: 0 auto;
  max-width: unset !important;
  width: 84vw !important;
}

.width-94vw {
  margin-left: unset !important;
  margin-right: unset !important;
  margin: 0 auto;
  max-width: unset !important;
  width: 94vw !important;
}

.width-100vw {
  margin-left: unset !important;
  margin-right: unset !important;
  margin: 0 auto;
  max-width: unset !important;
  width: 100vw !important;
}



.absolute-center {
  left: 50%;
  position: absolute !important;
  top: 50%;
  transform: translate(-50%, -50%);
}

.absolute-hang {
  position: absolute !important;
  top: 75%;
}

.margin-top-offset {
  margin-top: -70px !important;
}

.btn-rounded {
  border-radius: 50px;
}


/* Image should stretch to fill entire container. */
.wp-block-image.block-image {
  max-width: unset;
  width: 100vw;
  
  img {
    max-width: unset;
    width: 100vw;
  }
}

/* Image needs to off screen to the left */
.wp-block-image.off-screen-left-image {
  display: block;
  left: -14vw;
  position: relative;
  top: 8vw;
  width: 60vw;
  
  img {
    max-width: unset;
    width: 100%;
  }
}

.wp-block-image.height-13vw {
  img {
    height: 13vw;
    width: auto;
  }
}

.wp-block-image.image-width-crop {
  aspect-ratio: 260 / 220;
  height: 100%;
  overflow: hidden;
  
  img {
    bottom: 8%;
    max-width: 110%;
    position: relative;
    right: 10%;
  }
  
  &.brian-carter-special {
    img {
      bottom: 40%;
      right: 35%;
      max-width: 150%;
    }
  }
  
  &.ava-wilson-special {
    img {
      right: 0;
    }
  }
}

header {
  background-color: transparent;
  box-sizing: border-box;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  
  #desktop-header {
    background-color: rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
    border-radius: 100px;
    display: flex;
    justify-content: space-between;
    margin: 25px auto;
    padding: 15px 5%;
    width: 80%;
    
    a {
      font-size: 1vw;
      font-weight: 700;
      text-decoration: none;
    }
    
    .header-left {
      display: flex;
      
      img.logo {
        height: auto;
        margin-right: 20px;
        width: 10vw;
        
        &.logo-bone {
          display: none;
        }
      }
      
      .navigation-link {
        margin-right: 20px;
      }
    }
    
    .header-right {
      display: flex;
      
      .navigation-link {
        margin-left: 20px;
      }
    }
    
    .navigation-links {
      margin-top: .48vw;
    }
  }
}

main {
  padding: 0 !important;
}

body.admin-bar {
  header {
    top: 36px;
  }
}

footer {
  background-color: var(--color-black);
  color: var(--color-bone) !important;
  padding: 4.5vw 3vw;
  
  nav {
    ul {
      li {
        a {
          color: var(--color-bone) !important;
        }
      }
    }
  }
}

/* Page customizations */

/* Home page */
body.page-id-11 {
  
  header {
    #desktop-header {
      
      a {
        color: var(--color-bone);
      }
      
      .header-left {
        img.logo {
          &.logo-black {
            display: none;
          }
          
          &.logo-bone {
            display: block;
          }
        }
      }
    }
  }
  
  main {
    margin-top: 0 !important;
    padding-right: var(--wp--style--root--padding-right) !important;
    padding-left: var(--wp--style--root--padding-left) !important;
  }
}

/* About Us */
body.page-id-338 {
  background-color: var(--color-white);

  header {
    background-color: var(--color-white);
    
    #desktop-header {
      
      a {
        color: var(--color-black);
      }
    }
  }
  
  .about-us-block-1 {
    * {
      z-index: 2;
    }
    
    .about-us-bg-under {
      bottom: 0;
      position: absolute;
      z-index: 1;
    }
  }
  
  div.special-crop {
    figure {
      aspect-ratio: 10 / 3;
      border-radius: 15px;
      overflow: hidden;
      
      img {
        bottom: 60%;
        position: relative;
      }
    }
    
    .relative-hang {
      margin-top: -10%;
    }
  }
}

/* custom components */

.three-grid {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 84vw;
}

.testimonial-thumb {
  height: 40vw;
  position: relative;
  width: 31.5%;

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

  .testimonial-copy {
    bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    left: 50%;
    padding: 20px 15px;
    position: absolute;
    transform: translateX(-50%);
    width: 86%;
    

    .testimonial-title {
      font-size: 2rem;
      font-weight: 700;
      margin: 5px 0 15px;
    }
  }
}