/*!
Theme Name: Anamala Homestays
Theme URI: http://underscores.me/
Author: Chinna
Author URI: https://www.honeycombindia.net/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: anamala-homestays0
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Anamala Homestays is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/
:root {
  --headfont: "Playfair Display", serif;
  --bodyfont: "Inter", sans-serif;
  --bodycolor: rgba(247, 246, 232, 1);
  --white: rgba(255, 255, 255, 1);
  --black: rgba(0, 0, 0, 0.8);
  --gold: rgba(218, 131, 38, 1);
  --green: rgba(47, 90, 43, 1);
  --paracolor: rgba(13, 45, 10, 1);
  --lightblack: rgba(13, 45, 10, 0.5);
}
body {
  font-family: var(--bodyfont) !important;
  background: var(--bodycolor) !important;
}
img {
  max-width: 100%;
  height: auto;
}

/* global buttonstyles  */

/* =========================================================
   ANAMALA HOMESTAYS - GLOBAL BUTTON COMPONENT
   ========================================================= */

/* Base Pill Button */
.custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 195px;
  height: 52px;
  padding: 0 30px;
  border-radius: 9999px;

  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  overflow: hidden;

  /* Smooth transitions */
  transition:
    background-color 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.2s ease;
}

.custom-btn:active {
  transform: scale(0.98);
}

/* Animated SVG Icon Wrapper */
.custom-btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  margin-right: 0;
  opacity: 0;
  transform: translateX(-24px);
  flex-shrink: 0;

  /* Smooth transition for icon slide-in from left to center */
  transition:
    width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    margin-right 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.custom-btn .btn-icon svg {
  width: 24px;
  height: 27px;
  display: block;
}

/* Text Label */
.custom-btn .btn-text {
  display: inline-block;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---------------------------------------------------------
   HOVER ANIMATION TRIGGER
   On hover, the icon smoothly expands and slides in from left,
   while the text moves to accommodate it.
   --------------------------------------------------------- */
.custom-btn:hover .btn-icon,
.custom-btn.is-hovered .btn-icon {
  width: 24px;
  margin-right: 12px;
  opacity: 1;
  transform: translateX(0);
}

/* ---------------------------------------------------------
   VARIANT 1: DARK / PRIMARY BUTTON
   Used on dark backgrounds, hero banners, dark sections.
   --------------------------------------------------------- */
.btn-dark-variant {
  background-color: #222222;
  border: 1px solid rgba(247, 246, 232, 0.65);
  color: #ffffff;
}

.btn-dark-variant:hover,
.btn-dark-variant.is-hovered {
  background-color: #191919;
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------
   VARIANT 2: GREY / SECONDARY BUTTON
   Used on light/cream backgrounds or as secondary action.
   --------------------------------------------------------- */
.btn-grey-variant {
  background-color: #484848;
  border: 1px solid #1a1a1a;
  color: #121212;
}

.btn-grey-variant:hover,
.btn-grey-variant.is-hovered {
  background-color: #666666;
  border-color: #111111;
  color: #121212;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ===================================
         COMMON BUTTON STYLES
      =================================== */

.primary-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  min-width: 150px;
  min-height: 55px;
  padding: 12px 40px;

  background-color: transparent;
  border: 1px solid;
  border-radius: 35px;

  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;

  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  overflow: hidden;
  cursor: pointer;

  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

/* ===================================
         SVG ICON ANIMATION
      =================================== */

.primary-btn svg {
  position: absolute;
  left: 10px;
  top: 70%;

  width: 28px;
  height: 32px;

  flex-shrink: 0;
  pointer-events: none;

  transform: translate(-45px, -50%);
  opacity: 0;
  scale: 1.4;

  transition:
    transform 0.4s ease,
    opacity 0.3s ease;
}

/* ===================================
         BUTTON TEXT ANIMATION
      =================================== */

.primary-btn span {
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.4s ease;
}

/* ===================================
         HOVER ANIMATION
      =================================== */

.primary-btn:hover svg {
  transform: translate(0, -50%);
  opacity: 1;
}

.primary-btn:hover span {
  transform: translateX(10px);
}

/* ===================================
         VARIANT 1: OUTLINE BUTTON
         SVG COLOR: #FFFFFFB2
      =================================== */

.primary-btn--outline {
  background-color: transparent;
  color: #f7f6e8;
  border-color: #f7f6e8cc;
}

.primary-btn--outline:hover {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

/* ===================================
         VARIANT 2: FILLED BUTTON
         SVG COLOR: #000000B2
      =================================== */

.primary-btn--filled {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

.primary-btn--filled:hover {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

/* ===================================
         KEYBOARD ACCESSIBILITY
      =================================== */

.primary-btn:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 4px;
}

/* ===================================
         REDUCED MOTION ACCESSIBILITY
      =================================== */

@media (prefers-reduced-motion: reduce) {
  .primary-btn,
  .primary-btn svg,
  .primary-btn span {
    transition: none;
  }
}

/* ===================================
         MOBILE RESPONSIVE
      =================================== */

@media (max-width: 480px) {
  .btn-sec {
    flex-direction: column;
    gap: 18px;
  }

  .primary-btn {
    min-width: 140px;
    min-height: 52px;
    font-size: 16px;
  }

  .primary-btn svg {
    transform: translate(0, -50%);
    opacity: 1;
  }

  .primary-btn span {
    transform: translateX(10px);
  }
}

.primary-btn svg {
  transition:
    transform 0.4s ease,
    opacity 0.3s ease;
}

.primary-btn span {
  transition: transform 0.4s ease;
}

.primary-btn:hover svg {
  transform: translate(0, -50%);
  opacity: 1;
}

.primary-btn:hover span {
  transform: translateX(10px);
}