/*
Theme Name: Bliss Minpaku
Theme URI: https://bliss-stay.jp
Description: 大分・別府エリア民泊ブランド「Bliss」公式サイトテーマ
Author: Bliss / Smaice Celessong Group
Version: 1.0.0
Text Domain: bliss-minpaku
*/

/* ===== CSS Variables ===== */
:root {
  --color-cream: #2E2E2C;
  --color-cream-dark: #383836;
  --color-gold: #B8975A;
  --color-gold-light: #D4B483;
  --color-gold-dark: #8C7040;
  --color-dark: #1C1C1C;
  --color-charcoal: #E8E4DE;
  --color-gray: #A8A29A;
  --color-gray-light: #3A3A3A;
  --color-white: #FFFFFF;
  --color-surface: #1C1C1C;
  --color-text: #EDEAE4;
  --bg-texture: url('/wp-content/themes/bliss-theme/assets/images/bg-texture.jpg') center / cover no-repeat fixed;
  --font-serif: 'Noto Serif JP', 'Times New Roman', serif;
  --font-sans: 'Noto Sans JP', 'Helvetica Neue', sans-serif;
  --transition: 0.3s ease;
  --shadow: 0 4px 20px rgba(0,0,0,0.35);
  --shadow-hover: 0 8px 40px rgba(0,0,0,0.5);
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
button, input, select, textarea { font-family: inherit; }
body {
  font-family: var(--font-serif);
  color: var(--color-text);
  background: var(--color-surface) var(--bg-texture);
  line-height: 1.8;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: var(--transition); }
ul { list-style: none; }

/* ===== Typography ===== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.4;
}
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--color-text);
  letter-spacing: 0.1em;
  margin-bottom: 0.3em;
}
.section-title-en {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--color-gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 1em;
}
.section-subtitle {
  color: var(--color-gray);
  font-size: 0.95rem;
  max-width: 600px;
  margin: 0 auto 3rem;
  text-align: center;
}

/* ===== Layout ===== */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.section {
  padding: 80px 0;
}
.section--cream {
  background: var(--color-dark) var(--bg-texture);
}
.section--dark {
  background: var(--color-dark) var(--bg-texture);
  color: var(--color-white);
}
.text-center { text-align: center; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 14px 40px;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  border: 1px solid currentColor;
  transition: var(--transition);
  cursor: pointer;
  font-family: var(--font-serif);
}
.btn--gold {
  background: var(--color-gold);
  color: var(--color-white);
  border-color: var(--color-gold);
}
.btn--gold:hover {
  background: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
}
.btn--outline {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn--outline:hover {
  background: var(--color-white);
  color: var(--color-dark);
}
.btn--outline-dark {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.btn--outline-dark:hover {
  background: var(--color-text);
  color: var(--color-dark);
}

/* ===== Gold Divider ===== */
.gold-line {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 2rem;
}
.gold-line::before,
.gold-line::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-gold);
}
.gold-line__diamond {
  width: 8px;
  height: 8px;
  background: var(--color-gold);
  transform: rotate(45deg);
}