/*
Theme Name: Rosetta Pyramids Inn
Theme URI: https://rosettapyramidsinn.com
Author: Rosetta Pyramids Inn — In-house Development
Description: A custom, high-end Classic WordPress theme for Rosetta Pyramids Inn, a 7-room boutique guesthouse in Al Haram, Giza. Built with Tailwind CSS (CDN) for layout and hand-written CSS for signature visual components (Window Hero, Room cards, Skyline Roof Terrace, ticket-style Tour cards). No build tools required.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rosetta-theme
*/

/* ==========================================================================
   1. BRAND DESIGN TOKENS
   ========================================================================== */
:root{
  --rosetta-dark:        #3E2415;
  --rosetta-wood:        #6B4226;
  --rosetta-beige:       #EFE4CB;
  --rosetta-beige-light: #FAF5E8;
  --rosetta-gold:        #B8892E;
  --rosetta-gold-light:  #D9AE49;
  --rosetta-ink:         #251A12;
  --rosetta-line:        rgba(37,26,18,0.14);
  --rosetta-shadow:      0 20px 50px rgba(42,24,13,0.22);
}

/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

body{
  background-color:var(--rosetta-beige);
  color:var(--rosetta-ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  margin:0;
}

h1,h2,h3,h4{ font-family:'Cinzel', serif; color:var(--rosetta-dark); margin:0; }
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4{ font-family:'Cairo', sans-serif; }

a{ color:inherit; }
img{ max-width:100%; display:block; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   3. WORDPRESS CORE / DEFAULT CONTENT STYLES
   ========================================================================== */
.alignleft{ float:left; margin:0 1.5rem 1rem 0; }
.alignright{ float:right; margin:0 0 1rem 1.5rem; }
.aligncenter{ display:block; margin:1rem auto; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:0.85rem; color:#7a6650; text-align:center; padding-top:0.4rem; }

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.screen-reader-text:focus{
  position:static !important; width:auto; height:auto; clip:auto;
  background:var(--rosetta-gold); color:#fff; padding:0.5rem 1rem; z-index:999999;
}

/* ==========================================================================
   4. LOGO MARK — "Twin Peaks" (inline SVG uses currentColor; this class
   just sizes/contains it consistently wherever it's dropped in)
   ========================================================================== */
.rosetta-mark{ display:inline-block; color:var(--rosetta-gold); }
.rosetta-mark svg{ display:block; width:100%; height:100%; }
.is-scrolled .rosetta-mark,
.on-dark-bg .rosetta-mark{ color:var(--rosetta-gold-light); }

/* ==========================================================================
   5. SITE HEADER / NAVIGATION
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:transparent; transition:background .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
  background:rgba(250,245,232,0.95); backdrop-filter:blur(8px);
  box-shadow:0 4px 20px rgba(42,24,13,0.1);
}
.site-header .site-logo-word{ color:#fff; transition:color .3s ease; }
.site-header.is-scrolled .site-logo-word{ color:var(--rosetta-dark); }
.site-header nav a{ color:rgba(255,255,255,0.92); transition:color .3s ease; }
.site-header.is-scrolled nav a{ color:var(--rosetta-dark); }

/* ==========================================================================
   6. SIGNATURE HERO — "THE WOODEN WINDOW"
   ========================================================================== */
.hero-window-stage{
  position:relative; height:100vh; min-height:640px; max-height:980px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #cbb98e 0%, #b89a68 100%);
  overflow:hidden;
}
.window-frame{ position:relative; width:min(78vw, 640px); height:min(76vh, 720px); display:flex; align-items:center; justify-content:center; }
.window-outer{
  position:absolute; inset:0; background:var(--rosetta-dark);
  border-radius:6px 6px 96px 96px / 6px 6px 140px 140px;
  box-shadow:0 40px 90px rgba(0,0,0,0.45); padding:22px;
}
.window-view{
  position:relative; width:100%; height:100%;
  border-radius:2px 2px 84px 84px / 2px 2px 118px 118px;
  overflow:hidden; background-color:#8a7550;
  background-image: var(--rosetta-hero-image, none);
  background-size:cover; background-position:50% 65%;
}
.window-mullion-v{ position:absolute; top:0; bottom:0; left:50%; width:10px; margin-left:-5px; background:var(--rosetta-dark); z-index:3; }
.window-mullion-h{ position:absolute; left:0; right:0; top:42%; height:10px; margin-top:-5px; background:var(--rosetta-dark); z-index:3; }
.window-sill{ position:absolute; bottom:-26px; left:-34px; right:-34px; height:26px; background:linear-gradient(180deg, var(--rosetta-wood), var(--rosetta-dark)); border-radius:4px; box-shadow:0 10px 24px rgba(0,0,0,0.3); }
.curtain{ position:absolute; top:-14px; bottom:-14px; width:72px; background:linear-gradient(180deg, var(--rosetta-dark), var(--rosetta-wood)); border-radius:0 0 50% 50% / 0 0 30% 30%; opacity:0.92; z-index:4; box-shadow:inset -8px 0 20px rgba(0,0,0,0.3); }
.curtain.is-left{ left:-48px; }
.curtain.is-right{ right:-48px; transform:scaleX(-1); }
.hero-copy{ position:absolute; z-index:10; text-align:center; color:#fff; top:8%; left:50%; transform:translateX(-50%); width:90%; max-width:680px; }
.hero-copy h1{ color:#fff; text-shadow:0 4px 24px rgba(0,0,0,0.4); }
.hero-copy .eyebrow{ text-shadow:0 2px 10px rgba(0,0,0,0.4); }
.scroll-cue{ position:absolute; bottom:2.5%; left:50%; transform:translateX(-50%); z-index:10; color:rgba(255,255,255,0.75); font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.15em; text-align:center; }
.scroll-cue .cue-line{ width:1px; height:26px; background:rgba(255,255,255,0.5); margin:8px auto 0; animation:rosetta-scroll-pulse 2s ease-in-out infinite; }
@keyframes rosetta-scroll-pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ==========================================================================
   7. SEARCH / FILTER ENGINE CARD
   ========================================================================== */
.search-engine-card{
  position:relative; z-index:20; background:var(--rosetta-beige-light);
  border:1px solid var(--rosetta-line); border-top:4px solid var(--rosetta-gold);
  border-radius:10px; box-shadow:var(--rosetta-shadow);
  margin-top:-64px; /* pulls the card up so it overlaps the hero, anchoring it visually */
}
.search-type-toggle{ display:flex; flex-wrap:wrap; gap:8px; }
.search-type-toggle label{
  cursor:pointer; font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:600;
  letter-spacing:0.04em; padding:8px 16px; border-radius:20px; border:1px solid var(--rosetta-line);
  background:#fff; color:var(--rosetta-dark); transition:.2s ease;
}
.search-type-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.search-type-toggle input:checked + label,
.search-type-toggle label.is-active{ background:var(--rosetta-dark); color:var(--rosetta-beige-light); border-color:var(--rosetta-dark); }
.search-engine-card input[type="text"],
.search-engine-card input[type="number"]{
  width:100%; border:1px solid var(--rosetta-line); border-radius:6px; padding:11px 14px;
  font-family:'Work Sans', sans-serif; font-size:14px; background:#fff; color:var(--rosetta-ink);
}
.search-engine-card input:focus{ outline:2px solid var(--rosetta-gold); outline-offset:1px; }
.search-submit-btn{
  background:var(--rosetta-gold); color:#fff; font-weight:700; border:none; border-radius:6px;
  padding:12px 22px; cursor:pointer; transition:transform .2s ease, background .2s ease; width:100%;
}
.search-submit-btn:hover{ background:var(--rosetta-dark); transform:translateY(-1px); }

/* ==========================================================================
   8. ROOM CARDS
   ========================================================================== */
.room-card{
  position:relative; border-radius:8px; overflow:hidden; box-shadow:var(--rosetta-shadow);
  min-height:420px; display:flex; align-items:flex-end;
  background-color:#7a6650; background-size:cover; background-position:center;
}
.room-card::before{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(42,24,13,0.9) 0%, rgba(42,24,13,0.15) 55%, transparent 100%); z-index:1; }
.room-card .room-copy{ position:relative; z-index:2; color:#fff; }
.room-card--signature{ border:2px solid var(--rosetta-gold-light); box-shadow:0 24px 60px rgba(184,137,46,0.35); }
.room-card--signature .signature-badge{
  position:absolute; top:18px; z-index:3; background:var(--rosetta-gold); color:var(--rosetta-dark);
  font-family:'JetBrains Mono', monospace; font-weight:600; font-size:11px; letter-spacing:0.08em;
  padding:6px 14px; border-radius:3px;
}
body.rtl .room-card--signature .signature-badge{ right:18px; }
body:not(.rtl) .room-card--signature .signature-badge{ left:18px; }
.room-unavailable-badge{
  position:absolute; top:18px; right:18px; z-index:3; background:rgba(140,47,47,0.9); color:#fff;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.06em; padding:5px 12px; border-radius:3px;
}

/* ==========================================================================
   9. TICKET-STYLE TOUR CARDS
   ========================================================================== */
.ticket-card{ background:var(--rosetta-beige-light); border:1px solid var(--rosetta-line); border-radius:6px; overflow:hidden; box-shadow:0 8px 22px rgba(42,24,13,0.1); transition:transform .25s ease, box-shadow .25s ease; }
.ticket-card:hover{ transform:translateY(-5px); box-shadow:var(--rosetta-shadow); }
.ticket-photo{ height:170px; overflow:hidden; background-size:cover; background-position:center; }
.ticket-perforation{ position:relative; height:0; border-top:2px dashed var(--rosetta-line); margin:0 20px; }
.ticket-perforation::before,.ticket-perforation::after{ content:''; position:absolute; top:-9px; width:18px; height:18px; background:var(--rosetta-beige); border-radius:50%; }
.ticket-perforation::before{ left:-29px; } .ticket-perforation::after{ right:-29px; }

/* ==========================================================================
   10. SKYLINE ROOF TERRACE (with day/night toggle)
   ========================================================================== */
.skyline-section{ position:relative; background-color:var(--rosetta-dark); overflow:hidden; }
.skyline-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:opacity .6s ease; }
.skyline-bg[data-mood="night"]{ opacity:1; }
.skyline-bg[data-mood="day"]{ opacity:0; }
.skyline-section.is-day .skyline-bg[data-mood="day"]{ opacity:1; }
.skyline-section.is-day .skyline-bg[data-mood="night"]{ opacity:0; }
.skyline-section::before{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, var(--rosetta-dark) 35%, rgba(62,36,21,0.55) 100%); z-index:1; }
.skyline-section .skyline-inner{ position:relative; z-index:2; }
.mood-toggle{ display:inline-flex; border:1px solid rgba(250,245,232,0.3); border-radius:20px; overflow:hidden; }
.mood-toggle button{ background:none; border:none; color:rgba(250,245,232,0.7); font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:0.08em; padding:8px 16px; cursor:pointer; transition:.2s ease; }
.mood-toggle button.is-active{ background:var(--rosetta-gold); color:var(--rosetta-dark); font-weight:700; }

/* ==========================================================================
   11. OFFER BADGES
   ========================================================================== */
.offer-badge{ background:var(--rosetta-dark); color:var(--rosetta-beige-light); border-radius:6px; padding:16px 18px; border-left:3px solid var(--rosetta-gold); }
body.rtl .offer-badge{ border-left:none; border-right:3px solid var(--rosetta-gold); }
.offer-badge .discount{ font-family:'Cinzel', serif; font-size:22px; color:var(--rosetta-gold-light); }

/* ==========================================================================
   12. SITE FOOTER
   ========================================================================== */
.site-footer a:hover{ color:var(--rosetta-gold-light); }

/* ==========================================================================
   13. SCROLL-REVEAL UTILITY
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   14. EMPTY SEARCH STATE
   ========================================================================== */
.search-empty-state{ text-align:center; padding:60px 20px; border:1px dashed var(--rosetta-line); border-radius:8px; background:var(--rosetta-beige-light); }