/*
Theme Name: Conde Hotel (Custom)
Theme URI: https://condehotel.com.br
Author: JS Inforseg
Description: Tema customizado do Conde Hotel, criado para reproduzir o layout, as cores e o conteúdo do site original — sem depender de Elementor ou de plugins de terceiros. Todo o design é HTML/CSS/PHP nativo do WordPress.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: conde-hotel
*/

/* =========================================================
   1. VARIÁVEIS DE MARCA (extraídas do site original)
   ========================================================= */
:root{
	--color-dark:        #334F52; /* cor principal (textos escuros, fundo header) */
	--color-teal:         #3B99A3; /* início do gradiente dos botões */
	--color-teal-light:   #38d1bc; /* detalhes / hover */
	--color-teal-2:       #43848B; /* apoio */
	--color-green-deep:   #085E3F; /* fim do gradiente dos botões */
	--color-accent:       #FAED1F; /* amarelo de destaque, usar com moderação */
	--color-ink:          #1c1c1c;
	--color-body-text:    #333333;
	--color-muted:        #7a7a7a;
	--color-bg:           #ffffff;
	--color-bg-soft:      #f6f8f8;

	--gradient-brand: linear-gradient(90deg, var(--color-teal) 0%, var(--color-dark) 51%, var(--color-green-deep) 100%);

	--font-heading: 'Lora', Georgia, serif;
	--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	--container-width: 1200px;
	--radius: 14px;
	--shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
	--shadow-strong: 0 15px 40px rgba(0,0,0,0.18);
}

/* =========================================================
   2. RESET BÁSICO
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin:0;
	font-family: var(--font-body);
	color: var(--color-body-text);
	background: var(--color-bg);
	line-height: 1.65;
	font-size: 16px;
}
h1,h2,h3,h4{
	font-family: var(--font-heading);
	color: var(--color-dark);
	line-height: 1.2;
	margin: 0 0 .5em;
}
h1{ font-size: clamp(2rem, 4vw, 3.4rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3{ font-size: 1.2rem; }
p{ margin: 0 0 1em; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ margin:0; padding:0; list-style:none; }
.container{
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}
.section{ padding: 80px 0; }
.section--soft{ background: var(--color-bg-soft); }
.section-title{ text-align:center; margin-bottom: 12px; }
.section-kicker{
	display:block;
	text-align:center;
	text-transform:uppercase;
	letter-spacing: .12em;
	font-size: .78rem;
	font-weight:700;
	color: var(--color-teal-2);
	margin-bottom: 10px;
}
.section-lead{
	text-align:center;
	max-width: 640px;
	margin: 0 auto 48px;
	color: var(--color-muted);
}

/* =========================================================
   3. BOTÕES
   ========================================================= */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.5em;
	padding: 15px 34px;
	border-radius: 999px;
	font-weight: 700;
	font-family: var(--font-body);
	background-image: var(--gradient-brand);
	background-size: 200% auto;
	color:#fff;
	border:none;
	cursor:pointer;
	box-shadow: var(--shadow-soft);
	transition: background-position .35s ease, transform .2s ease;
}
.btn:hover{ background-position: right center; transform: translateY(-2px); color:#fff; }
.btn--outline{
	background-image:none;
	background: transparent;
	color: var(--color-dark);
	border: 2px solid var(--color-dark);
	box-shadow:none;
}
.btn--outline:hover{ background: var(--color-dark); color:#fff; }
.btn--block{ width:100%; }

/* =========================================================
   4. HEADER
   ========================================================= */
.site-header{
	position: sticky;
	top:0;
	z-index: 500;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.site-header__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding: 14px 0;
}
.site-header__logo img{ height: 52px; width:auto; }
.site-nav ul{ display:flex; gap: 28px; }
.site-nav a{
	font-weight:600;
	font-size:.95rem;
	color: var(--color-dark);
}
.site-nav a:hover{ color: var(--color-teal); }
.site-header__cta{ display:flex; align-items:center; gap:18px; }
.nav-toggle{
	display:none;
	background:none;
	border:none;
	cursor:pointer;
	padding:8px;
}
.nav-toggle span{
	display:block;
	width:26px;
	height:2px;
	background: var(--color-dark);
	margin:5px 0;
}

/* =========================================================
   5. HERO
   ========================================================= */
.hero{
	position:relative;
	min-height: 88vh;
	display:flex;
	align-items:center;
	color:#fff;
	background: linear-gradient(180deg, rgba(20,30,30,.55), rgba(8,20,18,.75)), var(--hero-image) center/cover no-repeat;
}
.hero__content{ max-width: 640px; }
.hero h1{ color:#fff; }
.hero p{ font-size:1.15rem; color: rgba(255,255,255,.9); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top: 28px; }

.hero__info{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 56px;
	max-width: 900px;
}
.hero__info-card{
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.25);
	border-radius: var(--radius);
	padding: 18px 20px;
}
.hero__info-card h3{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px;}
.hero__info-card p{ color: rgba(255,255,255,.85); margin:0; font-size:.95rem;}

/* =========================================================
   6. SOBRE
   ========================================================= */
.about{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.about__image img{ border-radius: var(--radius); box-shadow: var(--shadow-strong); }
.about__text h2{ text-align:left; }

/* =========================================================
   7. FEATURES (3 destaques)
   ========================================================= */
.features{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.feature-card{
	background: #fff;
	border-radius: var(--radius);
	padding: 34px 28px;
	box-shadow: var(--shadow-soft);
	text-align:center;
	border-top: 4px solid transparent;
	border-image: var(--gradient-brand) 1;
}
.feature-card__icon{
	width:56px; height:56px; margin: 0 auto 18px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%;
	background: var(--gradient-brand);
	color:#fff;
}
.feature-card h3{ margin-bottom: 10px; }
.feature-card p{ color: var(--color-muted); margin:0; font-size:.95rem; }

/* =========================================================
   8. AMENIDADES (ícones)
   ========================================================= */
.amenities{ display:flex; flex-wrap:wrap; justify-content:center; gap: 40px; }
.amenity{ display:flex; flex-direction:column; align-items:center; gap:10px; width: 130px; text-align:center; }
.amenity__icon{
	width:64px; height:64px;
	border-radius:50%;
	background: var(--color-bg-soft);
	display:flex; align-items:center; justify-content:center;
	color: var(--color-dark);
}
.amenity span{ font-weight:600; font-size:.9rem; }

/* =========================================================
   9. QUARTOS
   ========================================================= */
.rooms-grid{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}
.room-card{
	background:#fff;
	border-radius: var(--radius);
	overflow:hidden;
	box-shadow: var(--shadow-soft);
	transition: transform .25s ease, box-shadow .25s ease;
}
.room-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-strong); }
/* Carrossel de fotos de cada quarto — CSS scroll-snap + JS leve, sem biblioteca externa */
.room-carousel{
	position:relative;
	height: 280px;
	overflow:hidden;
	background: #0f1a1a;
}
.room-carousel__track{
	display:flex;
	height:100%;
	overflow-x:auto;
	scroll-snap-type: x mandatory;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
}
.room-carousel__track::-webkit-scrollbar{ display:none; }
.room-carousel__slide{
	flex: 0 0 100%;
	scroll-snap-align:start;
	height:100%;
}
.room-carousel__slide img{ width:100%; height:100%; object-fit:cover; cursor:zoom-in; }
.room-carousel__arrow{
	position:absolute; top:50%; transform:translateY(-50%);
	width:38px; height:38px; border-radius:50%; border:none;
	background: rgba(255,255,255,.85);
	color: var(--color-dark);
	display:flex; align-items:center; justify-content:center;
	cursor:pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.2);
	transition: background .2s ease;
}
.room-carousel__arrow:hover{ background:#fff; }
.room-carousel__arrow--prev{ left:12px; }
.room-carousel__arrow--next{ right:12px; }
.room-carousel__dots{
	position:absolute; bottom:14px; left:0; right:0;
	display:flex; justify-content:center; gap:8px;
}
.room-carousel__dots button{
	width:8px; height:8px; border-radius:50%; border:none;
	background: rgba(255,255,255,.55);
	cursor:pointer; padding:0;
	transition: background .2s ease, transform .2s ease;
}
.room-carousel__dots button.is-active{ background:#fff; transform: scale(1.3); }
.room-card__body{ padding: 24px 26px 28px; }
.room-card__body h3{ font-size:1.3rem; margin-bottom:8px; }
.room-card__body p{ color: var(--color-muted); font-size:.95rem; margin-bottom: 16px; }
.room-card__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.room-card__tags span{
	font-size:.78rem; font-weight:600;
	background: var(--color-bg-soft);
	color: var(--color-dark);
	padding: 5px 12px;
	border-radius: 999px;
}

/* =========================================================
   10. LOCALIZAÇÃO / MAPA
   ========================================================= */
.location{ display:grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items:center; }
.location__map iframe{ width:100%; height: 380px; border:0; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.location__details h2{ text-align:left; }
.location__details ul{ margin-top: 20px; }
.location__details li{ margin-bottom: 12px; display:flex; gap:12px; align-items:flex-start; }

/* =========================================================
   11. CONTATO
   ========================================================= */
.contact{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact-form{ display:grid; gap: 16px; }
.contact-form input, .contact-form textarea{
	width:100%;
	padding: 14px 16px;
	border: 1px solid #dfe4e4;
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: .98rem;
	background: var(--color-bg-soft);
}
.contact-form textarea{ min-height: 130px; resize: vertical; }
.contact-form label{ font-weight:600; font-size:.88rem; margin-bottom:4px; display:block; }
.form-notice{ padding: 14px 18px; border-radius:10px; margin-bottom: 18px; font-weight:600; }
.form-notice--success{ background:#e5f7ee; color:#0d6b3d; }
.form-notice--error{ background:#fdecec; color:#b3261e; }
.contact-info-list li{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.contact-info-list strong{ display:block; color: var(--color-dark); }
.social-links{ display:flex; gap:14px; margin-top: 28px; }
.social-links a{
	width:44px; height:44px;
	border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background: var(--color-bg-soft);
	color: var(--color-dark);
	transition: background .2s ease, color .2s ease;
}
.social-links a:hover{ background: var(--gradient-brand); color:#fff; }

/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer{ background: var(--color-dark); color: rgba(255,255,255,.85); padding: 40px 0; }
.site-footer__inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.site-footer a{ color:#fff; }
.site-footer small{ opacity:.8; }
.site-footer__credit img{ height: 36px; }

/* =========================================================
   13. LIGHTBOX (sem plugin, JS puro em assets/js/theme.js)
   ========================================================= */
.lightbox{
	position: fixed; inset:0; background: rgba(10,15,15,.92);
	display:flex; align-items:center; justify-content:center;
	z-index: 9999; padding: 30px; opacity:0; pointer-events:none;
	transition: opacity .2s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width: 90vw; max-height: 85vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox__close{
	position:absolute; top:24px; right:32px;
	color:#fff; font-size:2rem; background:none; border:none; cursor:pointer;
}

/* =========================================================
   14. RESPONSIVO
   ========================================================= */
@media (max-width: 900px){
	.about, .contact, .location{ grid-template-columns: 1fr; }
	.features{ grid-template-columns: 1fr; }
	.rooms-grid{ grid-template-columns: 1fr; }
	.hero__info{ grid-template-columns: 1fr; }
	.site-nav{ display:none; }
	.nav-toggle{ display:block; }
}
@media (max-width: 900px){
	.site-nav.is-open{
		display:flex; position:absolute; top:100%; left:0; right:0;
		background:#fff; flex-direction:column; padding: 20px 24px; box-shadow: var(--shadow-soft);
	}
	.site-nav.is-open ul{ flex-direction:column; gap:16px; }
}