/*
Theme Name: Estheraphy
Author: Eleanor Lim
Version: 1.0
Description: A Full Site Editing theme for Estheraphy
Requires at least: 6.0
Requires PHP: 7.4
*/

/*******************************************
 * Fonts
 *******************************************/
@font-face {
  font-family: 'WixMadeforText';
  src: url(/wp-content/themes/estheraphy/assets/fonts/WixMadeforText-Regular.woff) format('woff');
}

@font-face {
  font-family: 'LumiosTypewriterUsed';
  src: url(/wp-content/themes/estheraphy/assets/fonts/LumiosTypewriterUsed.woff) format('woff');
}

@font-face {
  font-family: 'Syne';
  src: url(/wp-content/themes/estheraphy/assets/fonts/Syne-Regular.woff) format('woff');
}

@font-face {
  font-family: 'PlayfairDisplay';
  src: url(/wp-content/themes/estheraphy/assets/fonts/PlayfairDisplay-Italic.woff) format('woff');
}

@font-face {
  font-family: 'Adonis';
  src: url(/wp-content/themes/estheraphy/assets/fonts/Adonis_Regular.woff) format('woff');
}


/*******************************************
 * Override
 * *****************************************/
:where(.wp-block-columns.is-layout-flex) {
  gap: 0;
}
:where(.wp-block-button__link) {
  border-radius: 0;
}

.wp-block-post-content {
  padding: 0px;
}

.wp-block-group.alignfull {
  max-width: 100% !important;
}

.wp-social-link {
  background-color: #a1a1a1;
}

.wp-block-separator {
  color: ;
}

/*******************************************
 * Default
 * *****************************************/
body {
  white-space: collapse;
  font-family: "WixMadeforText", sans-serif;
  background-color: #fdfafa;
  color: #363636;
  font-size: 14px;
  min-width: 250px;
}

.pattern.subpage-title h1 {
  margin: 0;
  font-family: "LumiosTypewriterUsed";
  font-size: 50px;
  letter-spacing: 5px;
  font-weight: 400;
  color: #000000;
}

h1 {
  font-family: "LumiosTypewriterUsed";
  font-size: 40px;
  letter-spacing: 5px;
  font-weight: 400;
}

h2 {
  font-family: "Syne";
  font-size: 30px;
  letter-spacing: 0px;
  font-weight: 100;
}

h3 {
  font-family: "WixMadeforText";
  font-size: 20px;
  font-weight: 200;
}

p, li {
  font-family: "WixMadeforText";
  font-size: 16px;
  line-height: 1.5em;
}

img {
  border-radius: 20px;
}

.img-noround img {
  border-radius: 0;
}

a {
  color: #363636;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* Mobile: hide menu, show toggle */
@media (max-width: 600px) {
  .pattern.subpage-title h1 {
    font-size: 40px;
    letter-spacing: 3px;
  }
  h1 {
    font-size: 30px;
    letter-spacing: 3px;
  }
  h2 {
    font-size: 25px;
  }
}


/*******************************************
 * Header
 * *****************************************/
header {
  padding: 10px;
}

/* Logo */
.logo {
  margin: 0;
  font-family: "LumiosTypewriterUsed";
  letter-spacing: 5px;
  white-space: nowrap;
}

header .logo h1 {
  font-size: 30px;
  margin: 0;
}

/*******************************************
 * Top Menu
 * *****************************************/
nav li {
  margin: 0 10px;
}

/* Replace hamburger icon with ☰ */
.wp-block-navigation__responsive-container-open svg {
  display: none;
}

.wp-block-navigation__responsive-container-open::before {
  content: "☰";
  display: inline-block;
  font-size: 30px;
}


/* Default: show menu, hide toggle */
#mobile-menu-toggle {
  display: none;
}
#main-navigation {
  display: flex;
}

/* Mobile: hide menu, show toggle */
@media (max-width: 600px) {
  #mobile-menu-toggle {
  display: block;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  }

  #main-navigation {
  display: none;
  flex-direction: column;
  background: white;
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  z-index: 1000;
  }

  #main-navigation.active {
  display: flex;
  }
}

/*******************************************
 * Sub Pages & Titles
 * *****************************************/
.subpage {

}

.pattern.subpage-title {
  padding: 48px;
  margin: 0;
}


/*******************************************
 * Patterns
 * *****************************************/
.pattern {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 60px;
}

.pattern.pattern-full {
  margin-top: 0;
  margin-bottom: 60px;
  margin-left: 0px;
  margin-right: 0px;
}

.pattern.pattern-full img {
  border-radius: 0;
}

.pattern .wp-block-column {
  padding: 20px;
}

.pattern .text-column {
  margin-top: 0;
  margin-bottom: 0;
}

/* Mobile: hide menu, show toggle */
@media (max-width: 800px) {
  .pattern {
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
  }

  .pattern.pattern-full {
    margin-bottom: 20px;
  }

  .reviews .wp-block-column,
  .pattern .wp-block-column {
    padding-left: 0px;
    padding-right: 0px;
  }

  .pattern .text-column {
    margin-top: 0;
    margin-bottom: 0;
  }

}

/*******************************************
 * Patterns > Intro
 * *****************************************/
 .pattern-intro .wp-block-cover {
  --mediaOpacity: 0.25;
  background-color: #413e3c;
 }
.pattern-intro img {
  object-position:30% 30%;
}

.pattern-intro .center-texts {
  width: 100%;
  height: 100%;
  flex-basis:100%;
}

.pattern-intro .line1 {
  font-family: "Syne";
  font-size: 70px;
  line-height: 1.3em;
  white-space: nowrap;
  margin: 0;
}

.pattern-intro .line2 {
  gap: 1.3em;
}

.pattern-intro .line2 .line2-text1 {
  font-size: 70px;
  font-style: italic;
  color: #FFE9D7;
  font-family: "PlayfairDisplay";
  line-height: 1em;
  white-space: nowrap;
}

.pattern-intro .line2 .line2-text2 {
  font-size: 70px;
  font-family: "Syne";
  line-height: 1em;
  white-space: nowrap;
}

.pattern-intro .line3 {
  margin: 0;
  font-size: 20px;
  font-family: "Syne";
  line-height: 4em;
  white-space: nowrap;
}


/* Mobile: hide menu, show toggle */
@media (max-width: 600px) {
  .pattern-intro .line1 {
    font-size: 50px;
  }

  .pattern-intro .line2 .line2-text1 {
    font-size: 50px;
  }

  .pattern-intro .line2 .line2-text2 {
    font-size: 50px;
  }

  .pattern-intro .line3 {
    font-size: 16px;
  }
}

/*******************************************
 * Patterns > Reviews
 * *****************************************/
.reviews .wp-block-column {
  margin: 15px 20px;
  border-radius: 20px;
  background-color: #DDDBDC;
}

.reviews p {
  padding: 10px;
  font-family: "Adonis";
  font-size: 20px;
  text-align: center;
}

.reviews .star {
  display: block;
  color: #B8860B;
  font-size: 30px;
  margin-bottom: 20px;
}

.reviews .reviewer {
  display: block;
  font-family: "Syne";
  font-size: 18px;
  margin-top: 20px;
}

/*******************************************
 * Patterns > Buttons
 * *****************************************/
.pattern-button {
  padding: 20px;
}

#wpforms-submit-334,
.pattern-button .wp-block-button a {
  background-color: #66615e;
  padding: 20px 60px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 20px;
  border-radius: 0;
  height: auto;
}

#wpforms-submit-334,
.pattern-button .wp-block-button a:hover {
  background-color: #413e3c;
}


/*******************************************
 * Patterns > Business Info
 * *****************************************/
strong {
  font-family: sans-serif;
  font-weight: 900;
}


/*******************************************
 * Footer
 * *****************************************/
footer {
  background-color: #f7f4f4;
  padding: 40px 30px;
  text-align: left;
}

footer .logo .wp-block-site-title {
  margin: 0;
}

footer .footer-links {
  justify-content: flex-end; /* align right */
  max-width: fit-content;
  margin-left: 0;
  margin-right: 30px;
  flex-basis:100%;
  justify-content: flex-start;
  max-width: fit-content;
}

footer .footer-links h3 {
  font-family: "Syne";
  margin-bottom: 20px;
}

footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer .footer-links li {
  margin-bottom: 0.5rem;
}

footer .footer-links li a {
  color: #666;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

footer .footer-links li a:hover {
  text-decoration: underline;
  color: #000;
}

footer p.copyright {
  text-align: left;
  font-size: 0.85rem;
  color: #666;
  margin-top: 1rem;
}

footer .right-column {
  display: flex;
  justify-content: flex-end;
}


/* Mobile: hide menu, show toggle */
@media (max-width: 800px) {
  footer {
    padding: 15px;
  }
  footer .right-column {
    display: block;
    justify-content: flex-start;
  }
}

/*******************************************
 * iFrame
 * *****************************************/
.responsive-iframe {
  position: relative;
  width: 100%;
  padding-bottom: 1800px; /* Adjust height ratio as needed */
  height: 0;
  overflow: hidden;
}

.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/*******************************************
 * Contact Us Form
 * *****************************************/
.pattern.pattern-full.contact-us-form-home {
  margin-bottom: 0;
}

.contact-us-form-home .wp-block-cover__inner-container,
.contact-us-form .wp-block-cover__inner-container {
  display: flex;
  justify-content: center; /* 가로 정렬 */
  align-items: center;      /* 세로 정렬 */
  height: 100%;             /* 높이 채우기 */
}

.contact-us-form-home .wpform,
.contact-us-form .wpform {
  background-color: #FFF;
  padding: 50px;
  border-radius: 20px;
  max-width: 700px;
  color: #000;
}

.contact-us-form-home .wpform {
  margin: 60px;
}

#wpforms-confirmation-334 {
  background-color: #e6f5ea;
  border: 1px solid #49a662;
  padding: 20px;
  border-radius: 10px;
  color: #1a5c2c;
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);  
}

@media (max-width: 800px) {
  .contact-us-form-home .wpform,
  .contact-us-form .wpform {
    padding: 15px;
    margin: 5px;
  }
  .contact-us-form-home .wp-block-cover,
  .contact-us-form-home .wp-block-cover-image {
    padding: 5px;
  }

}

/*******************************************
 * Animation
 * *****************************************/
@keyframes slideLeftFadeIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRightFadeIn {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-left-fade-in {
  animation: slideLeftFadeIn 1s ease-out forwards;
}

.slide-right-fade-in {
  animation: slideRightFadeIn 1s ease-out forwards;
}

.slide-up-fade-in {
  animation: slideUpFadeIn 1s ease-out forwards;
}

.slide-down-fade-in {
  animation: slideDownFadeIn 1s ease-out forwards;
}

.fade-in-left {
  animation: fadeInLeft 0.6s ease-out forwards;
}

.fade-in-right {
  animation: fadeInRight 0.6s ease-out forwards;
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.fade-in-down {
  animation: fadeInDown 0.6s ease-out forwards;
}

.delay1 {
  animation-delay: 0.3s;
}

.delay2 {
  animation-delay: 0.6s;
}