/*
Theme Name: Project 2
Theme URI: -
Author: Benz
Author URI: https://carlou-benedict-luchavez.vercel.app/
Description: Single-page author book showcase theme
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: author-showcase
*/

:root {
--background: 40 20% 97%;
--foreground: 30 15% 15%;

--card: 0 0% 100%;
--card-foreground: 30 15% 15%;

--popover: 0 0% 100%;
--popover-foreground: 30 15% 15%;

--primary: 150 45% 25%;
--primary-foreground: 40 95% 85%;

--secondary: 35 65% 55%;
--secondary-foreground: 30 15% 15%;

--muted: 40 15% 92%;
--muted-foreground: 30 10% 45%;

--accent: 35 80% 50%;
--accent-foreground: 30 15% 15%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;

--border: 40 20% 88%;
--input: 40 20% 88%;
--ring: 150 45% 25%;

--radius: 0.75rem;

--forest: 150 45% 25%;
--forest-light: 150 35% 35%;
--earth: 30 35% 45%;
--earth-light: 30 25% 65%;
--gold: 45 90% 55%;
--gold-light: 45 95% 75%;

--gradient-hero: linear-gradient(135deg, hsl(var(--forest)) 0%, hsl(var(--forest-light)) 100%);
--gradient-accent: linear-gradient(90deg, hsl(var(--gold)) 0%, hsl(var(--secondary)) 100%);

--shadow-elegant: 0 10px 40px -10px hsl(var(--forest) / 0.2);
--shadow-book: 0 20px 60px -10px hsl(var(--forest) / 0.3);

--transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

--sidebar-background: 0 0% 98%;

--sidebar-foreground: 240 5.3% 26.1%;

--sidebar-primary: 240 5.9% 10%;

--sidebar-primary-foreground: 0 0% 98%;

--sidebar-accent: 240 4.8% 95.9%;

--sidebar-accent-foreground: 240 5.9% 10%;

--sidebar-border: 220 13% 91%;

--sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
--background: 30 15% 10%;
--foreground: 40 20% 95%;

--card: 30 15% 12%;
--card-foreground: 40 20% 95%;

--popover: 30 15% 12%;
--popover-foreground: 40 20% 95%;

--primary: 150 40% 35%;
--primary-foreground: 40 95% 85%;

--secondary: 35 60% 45%;
--secondary-foreground: 40 20% 95%;

--muted: 30 10% 20%;
--muted-foreground: 30 10% 60%;

--accent: 35 75% 45%;
--accent-foreground: 40 20% 95%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;

--border: 30 10% 25%;
--input: 30 10% 25%;
--ring: 150 40% 35%;

--forest: 150 40% 35%;
--forest-light: 150 30% 45%;
--earth: 30 30% 40%;
--earth-light: 30 20% 55%;
--gold: 45 85% 50%;
--gold-light: 45 90% 70%;

--sidebar-background: 30 15% 12%;
--sidebar-foreground: 40 20% 95%;
--sidebar-primary: 150 40% 35%;
--sidebar-primary-foreground: 40 95% 85%;
--sidebar-accent: 30 10% 20%;
--sidebar-accent-foreground: 40 20% 95%;
--sidebar-border: 30 10% 25%;
--sidebar-ring: 150 40% 35%;
}

.dark {
  --background: 30 15% 10%;
  --foreground: 40 20% 95%;
  --forest: 150 40% 35%;
  /* …and the rest of your dark mode variables */
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(228, 229, 229) !important;
}

.cf7-input,
.cf7-textarea {
  width: 100%;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #d1d9e0;
  border-radius: 0.75rem;
  color: #0f172a; /* slate-900 */
  font-size: 0.95rem;
  transition: all 0.25s ease;
}

.cf7-input:focus,
.cf7-textarea:focus {
  border-color: #059669; /* emerald-600 */
  box-shadow: 0 0 0 3px rgb(5 150 105 / 25%);
  outline: none;
}

.cf7-textarea {
  height: 150px;
  resize: vertical;
}

.cf7-submit {
  padding: 12px 24px;
  background: #fbbf24; /* amber-400 */
  color: #78350f; /* amber-900 */
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.cf7-submit:hover {
  background: #f59e0b; /* amber-500 */
  transform: translateY(-2px);
}

/* Success/Validation messages */
.wpcf7 form .wpcf7-response-output {
  border-radius: 0.75rem;
  padding: 10px 16px;
  margin-top: 12px;
}

#menu-navigation-menu li a {
  font-size: 1.1rem;
}

.custom-shadow:hover {
  filter: drop-shadow(8px 8px 7px rgba(0, 0, 0, 0.16));
}

.container {
	max-width: 1200px !important;
}

.display-none {
	display: none;
}

.display-show {
	display: block;
}

.swiper-fade-slide {
  opacity: 1;
  transition: opacity .7s ease-in-out, transform .7s ease-in-out;
}
.swiper-slide.swiper-slide-active .swiper-fade-slide,
.swiper-slide.swiper-slide-next .swiper-fade-slide {
  opacity: 1;
}
.swiper-slide p {
  display: flex;
  gap: 6px;
}

iframe {
  width: 100%;
}