/*
Theme Name: Ayatanur Enterprise
Theme URI: https://ayatanur.com
Author: Honeyfex
Author URI: https://honeyfex.com
Version: 1.0.0
Description: Turnkey construction & interiors theme for Ayatanur Enterprise -- civil, interior design, painting, plumbing, electrification, building design. Bunny Stream video, book-flip portfolio, client content dashboard.
Text Domain: ayatanur
*/

/* =========================================================
   1. DESIGN TOKENS -- Maroon / White / Sand / Black
   ========================================================= */
:root {
  /* Canvas */
  --color-bg: #F7F3EC;             /* warm sand-white, main background */
  --color-bg-panel: #EFE7D8;       /* sand panel, cards on white */
  --color-white: #FFFFFF;

  /* Dark */
  --color-black: #141110;          /* near-black, hero/footer bg */
  --color-charcoal: #221E1C;       /* secondary dark panels */

  /* Maroon system */
  --color-maroon: #5C0F14;         /* primary brand / buttons / active states */
  --color-maroon-deep: #3D0A0D;    /* hover / pressed */
  --color-maroon-bright: #8B1E24;  /* accents, links, highlight text */

  /* Text */
  --color-text: #221E1C;
  --color-text-muted: #6B6259;
  --color-text-on-dark: #F7F3EC;
  --color-text-on-dark-muted: #B9AE9E;

  /* Sand accent (replaces old gold) */
  --color-sand-accent: #C9B99A;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
}

.font-serif { font-family: 'Cormorant Garamond', serif; }
.font-mono  { font-family: 'JetBrains Mono', monospace; }

/* Color Utilities */
.bg-maroon          { background-color: var(--color-maroon) !important; }
.bg-black           { background-color: var(--color-black) !important; }
.bg-sand            { background-color: var(--color-bg-panel) !important; }
.text-maroon        { color: var(--color-maroon-bright) !important; }
.text-sand          { color: var(--color-sand-accent) !important; }
.text-muted         { color: var(--color-text-muted) !important; }
.text-on-dark       { color: var(--color-text-on-dark) !important; }
.text-on-dark-muted { color: var(--color-text-on-dark-muted) !important; }

/* Support arbitrary class syntax fallback */
[class*="text-[--color-text-on-dark]"]       { color: var(--color-text-on-dark) !important; }
[class*="text-[--color-text-on-dark-muted]"] { color: #D4C9BC !important; }
[class*="text-[--color-text-muted]"]         { color: var(--color-text-muted) !important; }
[class*="text-[--color-text]"]               { color: var(--color-text) !important; }
[class*="bg-[--color-bg]"]                   { background-color: var(--color-bg) !important; }

/* =========================================================
   2. MARQUEE / TICKER (trades loop - high visibility)
   ========================================================= */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: flex;
  width: max-content;
  animation: ticker-scroll 32s linear infinite;
  color: #EDE6DC !important;
}
.animate-marquee:hover { animation-play-state: paused; }
.animate-marquee span {
  color: #EDE6DC !important;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.animate-marquee span svg,
.animate-marquee span i {
  color: var(--color-sand-accent) !important;
}

/* =========================================================
   FOOTER (HIGH VISIBILITY & CONTRAST)
   ========================================================= */
footer.bg-black,
.bg-black {
  background-color: #141110 !important;
  color: #F7F3EC !important;
}
footer.bg-black h3 {
  color: #FFFFFF !important;
}
footer.bg-black h3 span {
  color: var(--color-sand-accent) !important;
}
footer.bg-black p,
footer.bg-black span {
  color: #D6CCC0 !important;
}
footer.bg-black p.text-sand,
footer.bg-black .text-sand {
  color: var(--color-sand-accent) !important;
  font-weight: 600;
}
footer.bg-black ul li a,
footer.bg-black a {
  color: #D6CCC0 !important;
  transition: color 0.2s ease;
}
footer.bg-black ul li a:hover,
footer.bg-black a:hover {
  color: #FFFFFF !important;
}

/* =========================================================
   3. HEADER SCROLL STATE & CONTRAST
   ========================================================= */
/* Transparent header over dark hero banner */
#site-header.header-transparent:not(.scrolled) {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
}
#site-header.header-transparent:not(.scrolled) .header-logo {
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
#site-header.header-transparent:not(.scrolled) .header-logo span {
  color: var(--color-sand-accent) !important;
}
#site-header.header-transparent:not(.scrolled) .header-nav a {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
#site-header.header-transparent:not(.scrolled) .header-nav a:hover {
  color: #FFFFFF !important;
}
#site-header.header-transparent:not(.scrolled) #mobile-menu-toggle {
  color: #FFFFFF !important;
}

/* Light / Scrolled / Solid Header State */
#site-header.scrolled,
#site-header.header-solid {
  background-color: rgba(247, 243, 236, 0.96) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(20, 17, 16, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
#site-header.scrolled .header-logo,
#site-header.header-solid .header-logo {
  color: var(--color-text) !important;
  text-shadow: none;
}
#site-header.scrolled .header-logo span,
#site-header.header-solid .header-logo span {
  color: var(--color-maroon-bright) !important;
}
#site-header.scrolled .header-nav a,
#site-header.header-solid .header-nav a {
  color: rgba(34, 30, 28, 0.78) !important;
  text-shadow: none;
}
#site-header.scrolled .header-nav a:hover,
#site-header.header-solid .header-nav a:hover {
  color: var(--color-maroon) !important;
}
#site-header.scrolled #mobile-menu-toggle,
#site-header.header-solid #mobile-menu-toggle {
  color: var(--color-text) !important;
}

/* =========================================================
   4. READING PROGRESS BAR
   ========================================================= */
#top-reading-progress {
  transform-origin: left;
  transform: scaleX(0);
  background-color: var(--color-maroon);
}

/* =========================================================
   5. FADE-IN ON SCROLL
   ========================================================= */
.fade-in-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   6. BOOK-FLIP PORTFOLIO (StPageFlip)
   ========================================================= */
#portfolio-flipbook {
  margin: 0 auto;
  background: var(--color-black);
}
.flip-page {
  background-color: var(--color-white);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.15);
}
.flip-page .flip-page-caption {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(to top, rgba(20,17,16,0.85), transparent);
  color: var(--color-text-on-dark);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.flip-page.flip-page-cover {
  background-color: var(--color-maroon);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
}
.flipbook-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.flipbook-nav button {
  border: 1px solid var(--color-black);
  background: transparent;
  padding: 8px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
}
.flipbook-nav button:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* =========================================================
   7. TRADE FILTER PILLS (services + portfolio)
   ========================================================= */
.trade-filter {
  border: 1px solid var(--color-text-muted);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  background: transparent;
  color: var(--color-text);
  transition: all 0.2s ease;
}
.trade-filter.active,
.trade-filter:hover {
  background: var(--color-maroon);
  border-color: var(--color-maroon);
  color: var(--color-white);
}