/* ==========================================================================
   FILE: assets/css/03-components.css
   PURPOSE: Reusable UI Components

   CONTENTS:
   - Buttons (WordPress core buttons + custom .button)
   - Card styling helpers (.card / .hcc-card)
   - Anchor navigation pills (.anchor-nav)
   - Forms styling (custom signup form + WPForms + Contact Form 7 bridges)
   - Image presentation helpers (panel images, WP image alignment)
   - Theme toggle component styles
   - Header logo component styles
   - Social / Facebook link component styles
   - Room card/grid components (used on Room Hire listings and room pages)

   RULE:
   This file contains reusable “building block” styles.
   It should NOT contain:
   - global tokens (01-config.css)
   - site-wide typography defaults (02-base.css)
   - header/footer/panels/navigation layout (04-layout.css)
   - page-specific layouts (05-pages.css)
   - one-off feature sections (06-features.css)

   LOAD ORDER:
   Loaded after 02-base.css.
   ========================================================================= */

/* ============================================================
   BUTTONS (HCC)
   ============================================================ */

/* WordPress core buttons should look like HCC buttons */
.wp-block-button__link,
a.wp-block-button__link,
.wp-site-blocks input[type="submit"],
.wp-site-blocks button {
  display: inline-block;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.wp-site-blocks .wp-block-button__link:hover,
.wp-site-blocks a.wp-block-button__link:hover,
.wp-site-blocks input[type="submit"]:hover,
.wp-site-blocks button:hover {
  background: var(--button-text);
  color: var(--button-bg);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  filter: brightness(1.05);
}

/* Keep your original class too (useful in custom HTML blocks) */
.button {
  display: inline-block;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.button:hover {
  background: var(--button-text);
  color: var(--button-bg);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  filter: brightness(1.05);
}

/* Ghost / secondary */
.button--ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--text);
}

/* Optional: make outline button border match */
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 1px solid var(--border);
}

/* ============================================================
   CARDS (HCC)
   ============================================================ */

.card,
.hcc-card {
  padding: 1.25rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.card h3,
.hcc-card h3 {
  margin-bottom: var(--space-xs);
}

/* ============================================================
   ANCHOR NAV (HCC)
   ============================================================ */

.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem 0 0;
  gap: 0.5rem 0.75rem;
  padding-top: 0;
  border-top: none;
}

.anchor-nav__label {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.anchor-nav a {
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.anchor-nav a:hover {
  background: var(--surface-2);
}

/* ============================================================
   FORMS (HCC)
   ============================================================ */

/* 1) Keep your original selector for custom HTML forms */
.signup-form {
  margin-top: var(--space-md);
  width: 100%;
  max-width: none;
}

/* 2) Bridge: apply the same look to common WP form markup */
.signup-form,
.wp-site-blocks .wpforms-container,
.wp-site-blocks .wpcf7,
.hcc-form {
  width: 100%;
  max-width: none;
}

/* Labels */
.signup-form label,
.wp-site-blocks .wpforms-container label,
.wp-site-blocks .wpcf7 label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
  color: var(--text);
}

/* Help text (WPForms uses .wpforms-field-description) */
.signup-form .help,
.wp-site-blocks .wpforms-container .wpforms-field-description,
.wp-site-blocks .wpcf7 .wpcf7-not-valid-tip {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--text) 75%, var(--muted));
  max-width: none;
}

/* Inputs */
.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form textarea,
.signup-form select,

.wp-site-blocks .wpforms-container input[type="text"],
.wp-site-blocks .wpforms-container input[type="email"],
.wp-site-blocks .wpforms-container input[type="tel"],
.wp-site-blocks .wpforms-container textarea,
.wp-site-blocks .wpforms-container select,

.wp-site-blocks .wpcf7 input[type="text"],
.wp-site-blocks .wpcf7 input[type="email"],
.wp-site-blocks .wpcf7 input[type="tel"],
.wp-site-blocks .wpcf7 textarea,
.wp-site-blocks .wpcf7 select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}

/* Placeholders */
.signup-form input::placeholder,
.signup-form textarea::placeholder,
.wp-site-blocks .wpforms-container input::placeholder,
.wp-site-blocks .wpforms-container textarea::placeholder,
.wp-site-blocks .wpcf7 input::placeholder,
.wp-site-blocks .wpcf7 textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

/* Focus */
.signup-form input:focus,
.signup-form textarea:focus,
.signup-form select:focus,
.wp-site-blocks .wpforms-container input:focus,
.wp-site-blocks .wpforms-container textarea:focus,
.wp-site-blocks .wpforms-container select:focus,
.wp-site-blocks .wpcf7 input:focus,
.wp-site-blocks .wpcf7 textarea:focus,
.wp-site-blocks .wpcf7 select:focus {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Checkbox accent */
.signup-form input[type="checkbox"],
.wp-site-blocks .wpforms-container input[type="checkbox"],
.wp-site-blocks .wpcf7 input[type="checkbox"] {
  accent-color: var(--link);
}

/* Error styling */
.signup-form .errorlist,
.wp-site-blocks .wpforms-container label.wpforms-error,
.wp-site-blocks .wpforms-container .wpforms-error,
.wp-site-blocks .wpcf7 .wpcf7-not-valid-tip {
  color: color-mix(in srgb, #c00 70%, var(--text));
}

/* ============================================================
   IMAGES (HCC)
   ============================================================ */

.panel-image {
  margin: var(--space-md) 0;
}

.panel-image img,
.wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* Float-right style (supports both your class and WP's alignright) */
.panel-image--float,
.wp-block-image.alignright {
  max-width: 420px;
  float: right;
  margin: 0 0 2.5rem 1.5rem;
}

/* Float-left if needed */
.wp-block-image.alignleft {
  max-width: 420px;
  float: left;
  margin: 0 1.5rem 2.5rem 0;
}

/* Make sure text doesn't get squeezed too hard on small screens */
@media (max-width: 720px) {
  .panel-image--float,
  .wp-block-image.alignright,
  .wp-block-image.alignleft {
    float: none;
    max-width: none;
    margin: var(--space-md) 0;
  }
}

/* Quiet image option */
.panel-image--quiet img {
  opacity: 0.95;
}

/* ============================================================
   THEME TOGGLE (HCC)
   ============================================================ */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--blue-accent);
  outline-offset: 2px;
}

.theme-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--muted);
}

html[data-theme="light"] .theme-dot {
  background: var(--blue-accent);
}

html[data-theme="dark"] .theme-dot {
  background: var(--sage-soft);
}

/* ============================================================
   HEADER LOGO (HCC)
   ============================================================ */

.hcc-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 0;
  flex: 0 0 auto;
}

.hcc-logo-link {
  position: relative;
  display: block;
  width: 150px;
  height: 150px;
  text-decoration: none;
  transition:
    width 0.25s ease,
    height 0.25s ease;
}

.hcc-header-bar.is-scrolled .hcc-logo-link {
  width: 95px;
  height: 95px;
}

.hcc-logo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

.hcc-logo--default {
  opacity: 1;
  visibility: visible;
}

.hcc-logo--scrolled {
  opacity: 0;
  visibility: hidden;
}

.hcc-header-bar.is-scrolled .hcc-logo--default {
  opacity: 0;
  visibility: hidden;
}

.hcc-header-bar.is-scrolled .hcc-logo--scrolled {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   FACEBOOK / SOCIAL LINK (HCC)
   ============================================================ */

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition:
    transform 0.15s ease,
    background 0.2s ease;
}

.social-link svg {
  width: 72px;
  height: 72px;
  fill: currentColor;
}

.social-link:hover {
  transform: translateY(-2px);
  background: var(--surface-2);
}

/* Facebook branded button */
.social-link--facebook {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
  box-shadow: 0 6px 16px rgba(24, 119, 242, 0.35);
}

.social-link--facebook:hover {
  background: #166fe5;
  border-color: #166fe5;
}

/* ============================================================
   ROOMS UI (cards, grids)
   ============================================================ */

.room-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .room-grid {
    grid-template-columns: 1fr;
  }
}

.room-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}

.room-card__link {
  display: block;
  text-decoration: none;
  color: var(--text);
}

.room-card__img {
  width: 100%;
  height: auto;
  display: block;
}

.room-card__body {
  padding: 1rem;
}

.room-card__title {
  margin: 0 0 0.5rem 0;
}

.room-card__summary {
  margin: 0 0 0.75rem 0;
}

.room-card__meta {
  margin: 0;
  color: var(--muted);
}

.room-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .room-details {
    grid-template-columns: 1fr;
  }
}

.room-detail h2 {
  margin: 0 0 0.5rem 0;
}

.room-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

@media (max-width: 900px) {
  .room-gallery {
    grid-template-columns: 1fr;
  }
}

.room-gallery__item img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  display: block;
}

.room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}