/* ============================================================
   Two Rebels Tech — styles.css
   Mobile-first responsive stylesheet
   Draft 1
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  /* Colors — sampled/inspired by tworebels.com */
  --color-bg:          #f7f7f5;
  --color-surface:     #ffffff;
  --color-border:      #e2e2de;
  --color-text:        #1c1c1a;
  --color-text-muted:  #6b6b66;
  --color-accent:      #1268d6;
  --color-accent-dark: #073f91;
  --color-accent-light:#66e8ff;
  --color-nav-bg:      #1a1a18;
  --color-nav-text:    #f7f7f5;

  /* Typography */
  --font-display: 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  clamp(1.6rem, 4vw, 2.25rem);
  --text-4xl:  clamp(2rem, 6vw, 3.25rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Layout */
  --max-width: 900px;
  --radius:    4px;
  --radius-lg: 8px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-dark); text-decoration: underline; }

/* ── Google Fonts import ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ── Top Bar ────────────────────────────────────────────────── */
.topbar {
  background: var(--color-nav-bg);
  color: var(--color-nav-text);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.topbar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

.topbar a {
  color: var(--color-accent-light);
  font-weight: 600;
}

.topbar .topbar-address {
  opacity: 0.75;
  white-space: nowrap;
}

.topbar .topbar-hours {
  opacity: 0.9;
  white-space: nowrap;
}

.phone-note {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
  white-space: nowrap;
}

.phone-note span {
  font-size: var(--text-xs);
  color: rgba(247,247,245,0.58);
}

.footer-hours {
  white-space: nowrap;
}

@media (min-width: 760px) {
  .topbar-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    column-gap: var(--space-4);
  }

  .topbar .topbar-address,
  .topbar .topbar-hours,
  .topbar .phone-note {
    justify-self: center;
    text-align: center;
  }
}

/* ── Site Header / Logo ─────────────────────────────────────── */
.site-header {
  background: var(--color-nav-bg);
  border-bottom: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.site-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-logo {
  font-family: var(--font-display);
  font-size: calc(var(--text-2xl) * 1.1);
  font-weight: 700;
  color: var(--color-nav-text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
}

.site-logo span {
  color: var(--color-accent);
}

.site-logo:hover { text-decoration: none; color: var(--color-nav-text); }

/* ── Nav ────────────────────────────────────────────────────── */
.site-nav {
  background: var(--color-nav-bg);
}

.site-nav ul {
  list-style: none;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.site-nav a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--color-nav-text);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.site-nav a:hover,
.site-nav a.active {
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
}

/* Keep the four primary links on one row on narrow mobile viewports. */
@media (max-width: 480px) {
  .site-nav ul {
    flex-wrap: nowrap;
  }

  .site-nav li {
    flex: 1 1 0;
    min-width: 0;
  }

  .site-nav a {
    padding-inline: var(--space-2);
    text-align: center;
    white-space: nowrap;
  }
}

/* ── Main Layout ────────────────────────────────────────────── */
.page-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

/* ── Hero (home page) ───────────────────────────────────────── */
.hero {
  background: var(--color-nav-bg);
  color: var(--color-nav-text);
  padding: var(--space-12) var(--space-4);
  text-align: center;
  border-bottom: 3px solid var(--color-accent);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  max-width: var(--max-width);
  margin: 0 auto;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg width='220' height='140' viewBox='0 0 220 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d9dde2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 28h46v26h36'/%3E%3Cpath d='M142 18h-34v30H76'/%3E%3Cpath d='M24 112h42V86h52v-28h44'/%3E%3Cpath d='M198 106h-48V78h-32'/%3E%3Cpath d='M176 36h24v34h-42'/%3E%3Ccircle cx='56' cy='28' r='4'/%3E%3Ccircle cx='92' cy='54' r='4'/%3E%3Ccircle cx='142' cy='18' r='4'/%3E%3Ccircle cx='66' cy='112' r='4'/%3E%3Ccircle cx='162' cy='58' r='4'/%3E%3Ccircle cx='198' cy='106' r='4'/%3E%3Ccircle cx='200' cy='70' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 140px;
  background-position: center;
  pointer-events: none;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.hero h1 span { color: var(--color-accent); }

.hero p {
  font-size: var(--text-lg);
  color: #d9dde2;
  max-width: 540px;
  margin: 0 auto var(--space-6);
  line-height: 1.5;
}

.hero-cta {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius);
  transition: background 0.15s;
  text-decoration: none;
}

.hero-cta:hover { background: var(--color-accent-dark); color: #fff; text-decoration: none; }

/* ── Service Cards ──────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-8) 0;
}

@media (min-width: 500px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  transition: box-shadow 0.15s;
}

.service-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.service-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ── Notice / Callout Box ───────────────────────────────────── */
.callout {
  background: #eef7ff;
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
}

.callout p { margin: 0; font-size: var(--text-sm); }
.callout strong { color: var(--color-accent); }

.price-callout {
  padding-top: var(--space-3);
}

.price-callout h2 {
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

/* ── Store Photo ────────────────────────────────────────────── */
.store-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--space-8) 0;
  border: 1px solid var(--color-border);
}

.store-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Section Headings ───────────────────────────────────────── */
.page-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 3px solid var(--color-accent);
  line-height: 1.15;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: var(--space-8) 0 var(--space-4);
  color: var(--color-text);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-3);
}

p { margin-bottom: var(--space-4); }

/* ── Lists ──────────────────────────────────────────────────── */
ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

li { margin-bottom: var(--space-2); line-height: 1.55; }

/* ── Prices Page ────────────────────────────────────────────── */
.price-highlight {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-accent);
  display: inline-block;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
}

.price-table th {
  background: var(--color-nav-bg);
  color: var(--color-nav-text);
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--space-3) var(--space-4);
}

.price-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.price-table tr:last-child td { border-bottom: none; }
.price-table tr:nth-child(even) td { background: #f9f9f7; }

/* ── Contact Page ───────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: var(--space-6) 0;
}

@media (min-width: 640px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

.contact-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  transition: box-shadow 0.15s;
}

.contact-item:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.contact-item h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.contact-item .contact-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1.2;
}

.contact-item .contact-value a {
  color: var(--color-accent);
}

.contact-item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

.map-embed {
  margin: var(--space-8) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.map-embed iframe {
  width: 100%;
  height: 320px;
  display: block;
  border: none;
}

@media (min-width: 768px) {
  .map-embed iframe { height: 420px; }
}

/* ── FAQ accordion ──────────────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}

.faq-item:first-of-type { border-top: 1px solid var(--color-border); }

.faq-item p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-nav-bg);
  color: var(--color-nav-text);
  padding: var(--space-8) var(--space-4);
  margin-top: var(--space-16);
  border-top: 3px solid var(--color-accent);
}

.site-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .site-footer-inner { grid-template-columns: repeat(3, 1fr); }
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.footer-col p,
.footer-col a {
  font-size: var(--text-sm);
  color: rgba(247,247,245,0.7);
  line-height: 1.7;
  display: block;
}

.footer-col a:hover { color: var(--color-accent-light); text-decoration: none; }

.footer-bottom {
  max-width: var(--max-width);
  margin: var(--space-8) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: var(--text-xs);
  color: rgba(247,247,245,0.4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
}

/* ── Utility ────────────────────────────────────────────────── */
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.mt-0 { margin-top: 0; }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── Router wrapper IDs (original index.php structure) ──────── */
#container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#page {
  flex: 1;
}

/* ── Forms (public, e.g. check-in) ─────────────────────────── */
.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.form-control {
  display: block;
  width: 100%;
  padding: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  appearance: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(18,104,214,0.16);
}

.form-actions {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s;
}

.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); color: #fff; text-decoration: none; }