/*
Theme Name: Dynasty Luxury Rentals
Theme URI: https://dynastyluxuryrentals.com
Author: Dynasty Luxury Rentals
Description: Tema standalone para Dynasty Luxury Rentals. Implementa la experiencia visual Dynasty sobre WordPress + WooCommerce + RnB sin depender del tema Cartsy.
Version: 0.30.0-standalone-alpha.123
Text Domain: dynasty
Tags: e-commerce, custom-colors, custom-menu, featured-images, full-width-template, translation-ready
*/

/* ==========================================================================
   Base — reset / defaults Dynasty.
   NOTA: aplicado a body (sin clase extra) para evitar romperse si el theme
   padre filtra body_class.
   ========================================================================== */

/* Fuerza que los controles nativos del navegador (selects, su lista de
   opciones, scrollbars) se dibujen en esquema claro sin importar el modo
   oscuro del SO/navegador del visitante. Sin esto, el <select> de
   pickup/dropoff location (RnB) sale con fondo negro del SO + texto oscuro
   forzado por nuestro CSS = ilegible. Bug reportado por el cliente 2026-07-06. */
html {
    color-scheme: light;
}

/* Red de seguridad anti-scroll-horizontal en mobile: si algún elemento
   nuevo (o de un plugin) se pasa del 100% de ancho, esto lo recorta en vez
   de dejar que toda la página se corra/zoom-out (bug reportado 2026-07-21,
   visible como una franja/imagen ajena asomando en el borde derecho).
   SOLO en <html>, nunca en <body>: overflow-x (u overflow) en <body> rompe
   `position: sticky` en Safari/iOS para sus hijos directos — en este caso
   el header (bug reportado 2026-07-21, el ícono del carrito/menu dejó de
   quedarse pegado arriba al scrollear). La causa real del desborde ya se
   arregló en el header (alpha.115); esto queda solo como resguardo. */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    margin: 0;
    font-family: var(--dynasty-font-body, "Raleway", system-ui, sans-serif);
    font-size: var(--dynasty-fs-body, 16px);
    font-weight: var(--dynasty-fw-regular, 400);
    line-height: 1.5;
    color: var(--dynasty-black-obsidian, #0A0A0A);
    background: var(--dynasty-white, #FFFFFF);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

.dynasty-header img,
.dynasty-footer img,
.dynasty-main img {
    display: block;
}

.dynasty-main h1,
.dynasty-main h2,
.dynasty-main h3,
.dynasty-main h4,
.dynasty-main h5,
.dynasty-main h6,
.dynasty-footer h1,
.dynasty-footer h2,
.dynasty-footer h3,
.dynasty-footer h4,
.dynasty-footer h5,
.dynasty-footer h6 {
    font-family: var(--dynasty-font-heading, "Montserrat", system-ui, sans-serif);
    color: inherit;
    margin: 0;
}

.dynasty-main p {
    margin: 0 0 1em;
}

.dynasty-header a,
.dynasty-footer a,
.dynasty-main a {
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   Containers + utilities
   ========================================================================== */

/* Box interno único de toda la web: 1400px en desktop. */
.dynasty-container {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 24px;
}

@media (min-width: 1024px) {
    .dynasty-container { padding-inline: 32px; }
}

/* Eyebrow gold reutilizable (Section 2 spec → todas las secciones). */
.dynasty-eyebrow {
    display: inline-block;
    font-family: var(--dynasty-font-heading, "Montserrat", system-ui, sans-serif);
    font-size: 18px;
    font-weight: var(--dynasty-fw-bold, 700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dynasty-brand-gold, #D4AF37);
    margin-bottom: 16px;
}

/* H2 de sección — Montserrat Bold 43 (escala en mobile). */
.dynasty-section-title {
    font-family: var(--dynasty-font-heading, "Montserrat", system-ui, sans-serif) !important;
    font-weight: var(--dynasty-fw-bold, 700) !important;
    font-size: clamp(28px, 4.5vw, 43px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 50px !important;
    padding: 0 !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}

.dynasty-section-title--light { color: var(--dynasty-white, #FFFFFF) !important; }

/* ==========================================================================
   Botones base
   ========================================================================== */

.dynasty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    font-family: var(--dynasty-font-body, sans-serif);
    font-size: var(--dynasty-fs-small, 13px);
    font-weight: var(--dynasty-fw-bold, 700);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    text-decoration: none !important;
    line-height: 1;
}

.dynasty-btn--primary {
    background: var(--dynasty-brand-gold, #D4AF37);
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}
.dynasty-btn--primary:hover {
    background: var(--dynasty-black-obsidian, #0A0A0A);
    color: var(--dynasty-brand-gold, #D4AF37) !important;
}

.dynasty-btn--ghost-light {
    background: transparent;
    color: var(--dynasty-white, #FFFFFF) !important;
    border: 1.5px solid var(--dynasty-white, #FFFFFF);
}
.dynasty-btn--ghost-light:hover {
    background: var(--dynasty-white, #FFFFFF);
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}

.dynasty-btn--ghost-dark {
    background: transparent;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    border: 1.5px solid var(--dynasty-black-obsidian, #0A0A0A);
}
.dynasty-btn--ghost-dark:hover {
    background: var(--dynasty-black-obsidian, #0A0A0A);
    color: var(--dynasty-white, #FFFFFF) !important;
}

/* ==========================================================================
   Page pill — chip de categoría usado en headers de páginas estáticas
   (Contact, About, FAQs, Blog, etc.) arriba del H1 hero.
   ========================================================================== */

.dynasty-page-pill {
    display: inline-block;
    padding: 10px 22px;
    margin: 0 0 24px;
    background: #F7F7F7;
    color: var(--dynasty-black-obsidian, #0A0A0A);
    font-family: var(--dynasty-font-body, "Raleway", sans-serif);
    font-size: 14px;
    font-weight: var(--dynasty-fw-regular, 400);
    line-height: 1.2;
    border-radius: 8px;
    letter-spacing: 0;
    text-transform: none;
}

/* ==========================================================================
   Reveal-on-scroll (IntersectionObserver en custom.js → agrega .is-visible)
   ========================================================================== */

.dynasty-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}
.dynasty-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays para grids: agregar --d1..--d6 junto con .dynasty-reveal. */
.dynasty-reveal--d1 { transition-delay: 0.10s; }
.dynasty-reveal--d2 { transition-delay: 0.20s; }
.dynasty-reveal--d3 { transition-delay: 0.30s; }
.dynasty-reveal--d4 { transition-delay: 0.40s; }
.dynasty-reveal--d5 { transition-delay: 0.50s; }
.dynasty-reveal--d6 { transition-delay: 0.60s; }

/* Respeta prefers-reduced-motion: mostrar sin animar. */
@media (prefers-reduced-motion: reduce) {
    .dynasty-reveal,
    .dynasty-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Fallback sin JS: si el navegador no carga JS, la clase .is-visible nunca
   se agrega. Para evitar contenido fantasma, mostramos todo si <html> no
   tiene la clase 'js' (custom.js la agrega al cargar). */
html:not(.dynasty-js) .dynasty-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* ==========================================================================
   Estilos heredados del child anterior (RnB deposit rows en checkout)
   ========================================================================== */

tr.rnb-deposit-item th {
    padding-left: 2em;
    font-weight: normal;
    font-size: 0.95em;
}

tr.rnb-deposit-item td {
    font-weight: normal;
    font-size: 0.95em;
}

tr.rnb-deposit-item:first-of-type th,
tr.rnb-deposit-item:first-of-type td {
    border-top: 0;
}
