/* ===========================
   Coco & Co — Mobile-first Clean Styles
   (Notebook list + aligned 'from' + fluid price column)
   =========================== */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
/* === Japanese web font (harmonised with Inter) === */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');


/* Background motif */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../images/kamon-coco-1.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 200vmin;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  background-color: #E2F4F8; /* pale blue-green (mint-white base) */

}

/* Global brand text colour */
body, 
h1, h2, h3, h4, h5, h6,
p, dt, dd, span, li, a {
  color: #6E4A36;
}


/* Base */
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1a1a1a;
  line-height: 1.55;
}

/* Layout wrapper */
.container {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 20px;
  text-align: left;
}

/* Responsive container padding */
@media (max-width: 992px) { .container { padding: 0 8%; } }
@media (max-width: 600px) { .container { padding: 0 10%; } }

/* Images */
img { display: block; max-width: 100%; height: auto; }

/* Logo — controls the gap below the logo */
.logo {
  width: min(60vw, 280px);
  margin: 2rem auto 3rem; /* top | horizontal | bottom */
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.08));
}

/* Card */
.card {
  background: rgba(255, 247, 250, 0.50); /* was #fff7fa */
  border: 1px solid #E2A3B4;
  border-radius: 20px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  padding: clamp(16px, 3vw, 28px);
  margin: 22px auto;
}


/* Headings */
.Heading1, .Heading2, .Heading3 {
  color: #222;
  letter-spacing: -0.01em;
  margin-top: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.Heading2 { font-size: clamp(1.5rem, 2.5vw, 2.125rem); font-weight: 600; margin-bottom: 8px; }
.Heading3 { font-size: clamp(1.1rem, 2vw, 1.25rem); font-weight: 600; margin: 18px 0 8px; }
.price-guide .Heading2 { text-align: center; }

/* === Japanese heading styling === */
.jp {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;   /* slightly more open tracking for legibility */
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--brand-dark); /* use the darker heading brown */
  text-align: center;
  line-height: 1.3;
}


/* Disclaimer (fine print) */
.price-guide .disclaimer {
  max-width: 560px;
  margin: 0.75rem auto 1.75rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.1px;
}

/* ================================
   PRICE GUIDE — NOTEBOOK LIST (final)
   Row grid: [ service | price-cell ]
   The price cell is itself a 2-col grid: [ fixed 'from' | price ]
   Separator: dotted border-bottom on EVERY row.
   ================================ */

.price-guide{
  /* Right column overall width (fluid but bounded) */
  --price-min: 8.5ch;   /* fits $105–115 neatly */
  --price-max: 14ch;    /* cap so the gap isn't huge on desktop */

  /* Inside the price cell, reserve fixed space for the 'from' label */
  --from-label-col: 3.6em;
}

.price-guide .pg-group + .pg-group { margin-top: 18px; }
.price-guide .pg-list { margin: 8px 0 0; padding: 0; }

/* Each row is one line with a dotted separator beneath */
.price-guide .pg-list .row {
  display: grid;
  grid-template-columns:
    minmax(0,1fr)                          /* service (flexes) */
    minmax(var(--price-min), var(--price-max)); /* price cell */
  align-items: center;                      /* keep everything on one line */
  column-gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dotted rgba(0,0,0,0.14);
}

/* EVERY listed item gets a separator (including the last) */
.price-guide .pg-list .row:last-child { border-bottom: 1px dotted rgba(0,0,0,0.14); }

.price-guide dt,
.price-guide dd { margin: 0; }

/* Service (left) */
.price-guide dt {
  color: #333;
  font-weight: 400;
  font-size: clamp(0.98rem, 1.6vw, 1.05rem);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;                  /* trims gracefully on very narrow screens */
}

/* Price cell (right) — 2-col subgrid: [ fixed 'from' | price ] */
.price-guide dd {
  text-align: right;
  white-space: nowrap;
  color: #000;
  font-weight: 500;
  font-feature-settings: "tnum" 1, "lnum" 1;

  display: grid;                             /* <<< grid inside the cell */
  grid-template-columns: var(--from-label-col) 1fr;
  align-items: center;
  justify-items: end;                         /* price hugs the right edge */
  min-width: 0;
}

/* Show 'from' ONLY where the row needs it, always left-aligned in its fixed slot */
.price-guide .pg-list .row.has-from dd::before {
  content: "from";
  grid-column: 1;
  justify-self: start;                        /* left align 'from' */
  color: rgba(0,0,0,0.6);
  font-weight: 400;
  line-height: 1;
}

/* Rows without 'from' render nothing in col 1 (space remains to keep alignment) */
.price-guide .pg-list .row:not(.has-from) dd::before { content: ""; }

/* Notes inside service names */
.price-guide .note {
  font-size: 0.9em;
  color: #777;
  margin-left: 6px;
}

/* Mobile refinements */
@media (max-width: 600px) {
  .price-guide{
    --price-min: 8ch;
    --price-max: 12ch;      /* tighter right column on phones */
    --from-label-col: 3.3em;
  }
  .price-guide .pg-list .row { column-gap: 10px; padding: 10px 0; }
}

@media (max-width: 480px) {
  .container {
    max-width: 98vw;      /* use 95% of screen width */
    padding: 0 3vw;       /* small breathing space on sides */
  }
  .card {
    border-radius: 16px;  /* slightly softer corner for mobile aesthetic */
  }
}

/* Reviews carousel (kept intact) */
.reviews-carousel {
  margin: 2rem auto 3rem;
  max-width: 800px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 6.5rem;
}
.review-item {
  display: none;
  opacity: 0;
  position: absolute;
  inset: 0;
  transition: opacity 0.8s ease-in-out;
  padding: 0 1.5rem;
}
.review-item.active {
  display: block;
  opacity: 1;
  position: relative;
}
.reviews-carousel blockquote {
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  color: #4a3a30;
  margin: 0 0 0.6rem;
}
.reviews-carousel cite {
  display: block;
  font-style: normal;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  color: #777;
}


.welcome .Heading2 {
  text-align: center;              /* consistent with Price Guide */
}

.welcome .intro {
  max-width: 640px;
  margin: 0.75rem auto 0;
  text-align: center;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: #333;
  line-height: 1.6;
}

/* Mobile: justify text for smoother wrapping */
@media (max-width: 600px) {
  .welcome .intro {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    padding: 0 4vw;                /* small internal buffer on narrow devices */
  }
}

/* Softer tints of the brand brown */
.price-guide .pg-list .row {
  border-bottom: 1px dotted rgba(110, 74, 54, 0.25); /* was grayish */
}

.price-guide .pg-list .row.has-from dd::before {
  color: rgba(110, 74, 54, 0.7); /* 'from' label */
}

.price-guide .note {
  color: rgba(110, 74, 54, 0.65); /* parentheses notes */
}

/* === Brand text colour override (append at end) === */
:root{
  --brand: #6E4A36;                 /* Coco & Co brown from SVG */
  --brand-70: rgba(110,74,54,0.70); /* for subtle labels like “from” */
  --brand-55: rgba(110,74,54,0.55); /* fine-print/secondary */
  --brand-25: rgba(110,74,54,0.25); /* dotted separators */
}

/* Global default (helps generic text) */
body, p, a, li, span { color: var(--brand) !important; }

/* Headings + primary text in cards */
.Heading1, .Heading2, .Heading3,
.welcome .intro,
.price-guide dt,
.price-guide dd,
.price-guide .note,
.price-guide .disclaimer {
  color: var(--brand) !important;
}

/* “from” label tint */
.price-guide .pg-list .row.has-from dd::before {
  color: var(--brand-70) !important;
}

/* Dotted separators in the notebook list */
.price-guide .pg-list .row {
  border-bottom: 1px dotted var(--brand-25) !important;
}
.price-guide .pg-list .row:last-child {
  border-bottom: 1px dotted var(--brand-25) !important;
}

/* === Darker heading tone for visual depth === */
:root{
  --brand-dark: #4A2F1E; /* richer espresso-brown contrast for headings */
}

/* Headings: slightly darker, more saturated for better hierarchy */
.Heading1, .Heading2, .Heading3 {
  color: var(--brand-dark) !important;
}

.contact .Heading2 {
  text-align: center;
}

.contact .contact-rows {
  max-width: 640px;
  margin: 0.5rem auto 0;
}

.contact .row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dotted var(--brand-25);
  text-decoration: none;          /* for the <a> row */
  color: var(--brand);            /* inherit your brown */
}

.contact .row:last-child {
  border-bottom: 1px dotted var(--brand-25); /* keep final separator, per spec */
}

.contact .icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--brand-dark);       /* icons use darker brown for clarity */
  flex: 0 0 22px;
}

.contact .label {
  font-size: clamp(1rem, 2vw, 1.06rem);
  line-height: 1.4;
  white-space: normal;         /* allow wrapping on narrow screens */
  overflow-wrap: anywhere;     /* prevent edge overflow */
  min-width: 0;                /* allow flex item to shrink properly */
  flex: 1;                     /* label takes remaining space */
}

/* === Contact: Business Hours sub-card === */
.contact .hours-card {
  max-width: 640px;
  margin: 10px auto 0;
  padding: 10px 14px;
  border: 1px solid rgba(110, 74, 54, 0.22);
  border-radius: 14px;
  background: rgba(255, 247, 250, 0.55);
  scroll-margin-top: 18px; /* nicer anchor jump position */
}

.contact .hours-row {
  display: grid;
  grid-template-columns: 6.5ch 1fr; /* stable day column, fluid time column */
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--brand-25);
}

.contact .hours-row:last-child {
  border-bottom: none;
}

.contact .hours-row .day {
  font-weight: 600;
  color: var(--brand-dark);
  white-space: nowrap;
}

.contact .hours-row .time {
  text-align: right;
  white-space: nowrap;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.contact .hours-row.closed .time {
  color: var(--brand-70);
  font-weight: 500;
}

/* Remove divider under Business Hours row */
.contact .row[href="#business-hours"] {
  border-bottom: none;
}

/* === Meet Kyoko Card === */
.meet .Heading2 {
  text-align: center;
}

.meet .portrait {
  display: flex;
  justify-content: center;
  margin: 0.75rem auto 1.5rem;
}

.meet .portrait img {
  width: min(380px, 85%);
  height: auto;
  max-width: 100%;
  border-radius: 18px;
  object-fit: cover;   /* ok even for portrait */
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}


/* Bio text */
.meet .bio {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem;
  font-size: clamp(0.98rem, 1.8vw, 1.06rem);
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: inherit;
}

.meet .bio p {
  margin: 0 0 1rem;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* End Kyoko

/* Mobile refinement */
@media (max-width: 600px) {
  .meet .portrait img {
    width: 90%;
    border-radius: 16px;
  }

  .meet .bio {
    padding: 0 4vw;
    line-height: 1.6;
  }
}

/* === Consistent centered headings across all cards === */
.card .Heading2 {
  text-align: center !important;
  display: block;
  width: 100%;
}

img, section, .card, .container {
  max-width: 100%;
  box-sizing: border-box;
}

/*========= Bottom Trailer ==============

/* Shared transparent card background */
.price-guide.card,
.welcome.card,
.contact.card,
.meet.card {
  background: rgba(255, 247, 250, 0.80); /* adjust alpha (0.4–0.9) to taste */
}

/* === Brand green headings === */
:root {
  --brand-green: #6D7858; /* 'Coco' green from logo */
}

/* Apply to all main headings */
.Heading1, .Heading2 /*,.Heading3*/ {
  color: var(--brand-green) !important;
}


@media (max-width: 600px) {
  .contact .row { padding: 14px 0; }          /* larger tap target */
  .contact .label { font-size: 1.02rem; }     /* comfortable on iPhone */
}

/* === Customer Voice Card === */
.customer-voice .Heading2 { text-align: center; }

#customer-voice-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  max-width: 720px;
  margin: 1rem auto;
}

.voice-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.7;
}

/* Center photos like the Meet Kyoko card */
.voice-entry figure {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 0 1rem 0;
}

.voice-entry img {
  display: block;
  margin: 0 auto;              /* keeps it centered even if figure rules change */
  float: none;
  width: min(360px, 85%);      /* slightly larger to match portrait feel */
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.voice-entry blockquote {
  font-size: clamp(0.96rem, 1.8vw, 1.06rem);
  color: var(--brand);
  font-style: italic;
  margin: 0 0 0.5rem;
  padding: 0 1rem;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.voice-entry cite {
  font-size: 0.95rem;
  color: var(--brand-dark);
  font-weight: 500;
}

@media (min-width: 1200px) {
  body::before { background-size: 90vmin; }
}

.card {
  width: 60%;
}
@media (max-width: 900px) {
  .card { width: 98%; }
}

/* Mobile spacing */
@media (max-width: 600px) {
  #customer-voice-content { gap: 2rem; }
  .voice-entry img { width: 90%; border-radius: 14px; }
  .voice-entry blockquote { padding: 0 6vw; }
}