/* ============================================================
   慶覺寺 Base Styles
   ============================================================
   Consumes the tokens from tokens.css.
   Sets element defaults so GenerateBlocks starts from
   the right place. GP Customizer settings should mostly
   mirror these; this file is the backup and the reference.
   ============================================================ */


/* ----------------------------------------------------------
   GLOBAL DEFAULTS
   ---------------------------------------------------------- */

body {
  background-color: var(--k-bg);
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-text-base);
  line-height: var(--k-leading-body);
  letter-spacing: var(--k-tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ----------------------------------------------------------
   HEADINGS
   ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--k-font-display);
  line-height: var(--k-leading-heading);
  letter-spacing: var(--k-tracking-heading);
  color: var(--k-ink);
  font-weight: 500; /* mincho/serif looks best at medium weight */
}

h1 { font-size: var(--k-text-5xl); }
h2 { font-size: var(--k-text-4xl); }
h3 { font-size: var(--k-text-3xl); }
h4 { font-size: var(--k-text-2xl); }
h5 { font-size: var(--k-text-xl);  }
h6 { font-size: var(--k-text-lg);  }


/* ----------------------------------------------------------
   LINKS
   ---------------------------------------------------------- */

a {
  color: var(--k-forest);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--k-transition);
}

a:hover,
a:focus-visible {
  color: var(--k-forest-hover);
}


/* ----------------------------------------------------------
   IMAGES
   ---------------------------------------------------------- */

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


/* ----------------------------------------------------------
   FOCUS — visible keyboard focus, invisible for mouse
   ---------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--k-forest);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* ----------------------------------------------------------
   UTILITY CLASSES — for use in GenerateBlocks
   ----------------------------------------------------------
   Apply these as "Additional CSS Classes" on GB containers
   and elements to keep styling out of individual blocks.
   ---------------------------------------------------------- */

/* Section backgrounds */
.k-bg-alt   { background-color: var(--k-bg-alt); }
.k-bg-dark  { background-color: var(--k-bg-dark); color: var(--k-ink-on-dark); }
.k-bg-forest-light { background-color: var(--k-forest-light); }
.k-bg-plum-light   { background-color: var(--k-plum-light); }

/* Text colors */
.k-text-soft    { color: var(--k-ink-soft); }
.k-text-forest  { color: var(--k-forest); }
.k-text-plum    { color: var(--k-plum); }
.k-text-on-dark { color: var(--k-ink-on-dark); }

/* Font families */
.k-font-display { font-family: var(--k-font-display); }
.k-font-body    { font-family: var(--k-font-body); }

/* Content width constraints */
.k-width-content { max-width: var(--k-width-content); margin-inline: auto; }
.k-width-narrow  { max-width: var(--k-width-narrow);  margin-inline: auto; }
.k-width-wide    { max-width: var(--k-width-wide);    margin-inline: auto; }

/* Section vertical padding */
.k-section {
  padding-block: var(--k-space-2xl);
}

/* Centered text block — for poetic/hero copy */
.k-centered {
  text-align: center;
  max-width: var(--k-width-narrow);
  margin-inline: auto;
}

/* Decorative rule — the straw-gold line */
.k-rule {
  border: none;
  border-top: var(--k-border-straw);
  max-width: 120px;
  margin-inline: auto;
}

/* Screen-reader only (for accessible labels) */
.k-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ----------------------------------------------------------
   BUTTON STYLES — two tiers
   ----------------------------------------------------------
   Apply as GB button classes or additional CSS classes.
   ---------------------------------------------------------- */

/* Primary CTA — warm plum, high contrast */
.k-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.875em 2em;
  background-color: var(--k-plum);
  color: var(--k-white);
  font-family: var(--k-font-body);
  font-size: var(--k-text-base);
  font-weight: 600;
  letter-spacing: var(--k-tracking-wide);
  text-decoration: none;
  border: none;
  border-radius: var(--k-radius-m);
  cursor: pointer;
  transition:
    background-color var(--k-transition),
    transform var(--k-transition);
}

.k-btn-primary:hover,
.k-btn-primary:focus-visible {
  background-color: var(--k-plum-hover);
  color: var(--k-white);
  transform: translateY(-1px);
}

/* Secondary CTA — outlined forest green */
.k-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.875em 2em;
  background-color: transparent;
  color: var(--k-forest);
  font-family: var(--k-font-body);
  font-size: var(--k-text-base);
  font-weight: 600;
  letter-spacing: var(--k-tracking-wide);
  text-decoration: none;
  border: 2px solid var(--k-forest);
  border-radius: var(--k-radius-m);
  cursor: pointer;
  transition:
    background-color var(--k-transition),
    color var(--k-transition);
}

.k-btn-secondary:hover,
.k-btn-secondary:focus-visible {
  background-color: var(--k-forest);
  color: var(--k-white);
}

/* Nav CTA — smaller, for use in the header */
.k-btn-nav {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1.25em;
  background-color: var(--k-plum);
  color: var(--k-white);
  font-family: var(--k-font-body);
  font-size: var(--k-text-sm);
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--k-radius-s);
  transition: background-color var(--k-transition);
}

.k-btn-nav:hover,
.k-btn-nav:focus-visible {
  background-color: var(--k-plum-hover);
  color: var(--k-white);
}


/* ----------------------------------------------------------
   CARD — reusable pattern for events, experiences
   ---------------------------------------------------------- */

.k-card {
  background: var(--k-white);
  border-radius: var(--k-radius-m);
  box-shadow: 0 2px 8px var(--k-shadow);
  overflow: hidden;
  transition: box-shadow var(--k-transition);
}

.k-card:hover {
  box-shadow: 0 4px 16px var(--k-shadow);
}

.k-card__body {
  padding: var(--k-space-m);
}

.k-card__meta {
  font-size: var(--k-text-sm);
  color: var(--k-ink-soft);
  letter-spacing: var(--k-tracking-wide);
}

.k-card__title {
  font-family: var(--k-font-display);
  font-size: var(--k-text-2xl);
  margin-top: var(--k-space-xs);
}


/* ----------------------------------------------------------
   MOBILE BOTTOM ACTION BAR
   ----------------------------------------------------------
   Fixed to viewport bottom on mobile only.
   3-column: 予約 (primary) / LINE / 電話
   ---------------------------------------------------------- */

.k-bottom-bar {
  display: none; /* hidden on desktop */
}

@media (max-width: 767px) {
  .k-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--k-white);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
    border-top: 1px solid var(--k-border);
    /* Leave space so it doesn't cover content */
  }

  .k-bottom-bar__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    text-decoration: none;
    font-family: var(--k-font-body);
    font-size: var(--k-text-sm);
    font-weight: 600;
    color: var(--k-ink);
    transition: background-color var(--k-transition);
  }

  .k-bottom-bar__item:hover {
    background-color: var(--k-bg-alt);
  }

  .k-bottom-bar__item--primary {
    background-color: var(--k-plum);
    color: var(--k-white);
  }

  .k-bottom-bar__item--primary:hover {
    background-color: var(--k-plum-hover);
    color: var(--k-white);
  }

  /* Prevent fixed bar from covering page footer content */
  body {
    padding-bottom: 56px;
  }
}


/* ----------------------------------------------------------
   ANNOUNCEMENT BAR
   ----------------------------------------------------------
   Rendered as a GP Block Element above the header.
   These styles give it the visual treatment; the Element
   itself is built in the WP editor.
   ---------------------------------------------------------- */

.k-announce {
  background-color: var(--k-forest);
  color: var(--k-white);
  font-family: var(--k-font-body);
  font-size: var(--k-text-sm);
  letter-spacing: var(--k-tracking-wide);
  padding: var(--k-space-xs) var(--k-space-s);
  text-align: center;
}

.k-announce a {
  color: var(--k-white);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.k-announce a:hover {
  opacity: 0.85;
}