/*
Theme Name: Angela's CAFE
Description: Angela's CAFE Website WordPress Theme.
Version: 0.1.0
Text Domain: angelascafe
*/

/* ==========================================================================
   Design Tokens (docs/07_Theme_Specification.md Section 5.1)
   ========================================================================== */

:root {
  /* Typography families */
  --font-family-ja: "Zen Maru Gothic", sans-serif;
  --font-family-en: "Inter", sans-serif;

  /* Typography sizes */
  --font-size-hero-en: 1.6rem;
  --font-size-hero-en-desktop: 3rem;
  --font-size-hero-ja: 0.88rem;
  --font-size-section-label: 0.75rem;
  --font-size-feature-label: 0.85rem;
  --font-size-section-heading: 1.2rem;
  --font-size-usage-heading: 1rem;
  --font-size-body: 0.9rem;
  --font-size-supporting: 0.88rem;
  --font-size-card-body: 0.82rem;
  --font-size-footer-small-min: 0.6rem;
  --font-size-footer-small-max: 0.7rem;

  /* Colors */
  --color-brand-primary: #33cccc;
  --color-brand-soft: #e8f8f8;
  --color-surface-default: #ffffff;
  --color-surface-light: #f9f9f9;
  --color-surface-warm: #f7f3ec;
  --color-text-primary: #2b2b2b;
  --color-text-secondary: #666666;
  --color-border-default: #dddddd;
  --color-greige: #6b6355;

  /* Global rhythm */
  --space-section: 64px;
  --space-content: 24px;
  --space-cta: 16px;

  /* Layout rhythm */
  --space-two-column: 60px;
  --space-usage-two-column: 60px;

  /* Component rhythm */
  --space-hero-collage: 3px;
  --space-hero-tagline-top: 26px;
  --space-hero-tagline-bottom: 18px;
  --space-hero-desktop-top: 40px;
  --space-hero-desktop-bottom: 64px;
  --space-information-card-internal: 14px;
  --space-information-card-list: 10px;
  --space-visit-guide: 14px;
  --space-with-dog-list: 14px;
  --space-instagram-grid: 6px;

  /* Radius */
  --radius-cta: 6px;
  --radius-information-card: 10px;
  --radius-instagram-thumbnail: 4px;
  --radius-benefit-chip: 20px;
  --radius-category-pill: 999px;
  --radius-circular: 50%;

  /* Functional shadows */
  --shadow-interaction: 0 6px 16px rgba(0, 0, 0, 0.08);
  --shadow-fixed-ui: 0 -4px 10px rgba(0, 0, 0, 0.05);

  /* Interaction timing */
  --transition-interaction: 0.15s ease;
}

/* Desktop Token Overrides (docs/07_Theme_Specification.md Section 5.2) */
@media (min-width: 1024px) {
  :root {
    --font-size-hero-en: var(--font-size-hero-en-desktop);
    --space-section: 120px;
    --space-content: 48px;
    --space-cta: 32px;
  }
}

/* ==========================================================================
   Global Baseline (docs/07_Theme_Specification.md Section 21.3)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* ==========================================================================
   Document Baseline (docs/07_Theme_Specification.md Sections 6.2, 7.1)
   ========================================================================== */

body {
  background-color: var(--color-surface-default);
  color: var(--color-text-primary);
  font-family: var(--font-family-ja);
  font-size: var(--font-size-body);
  line-height: 2;
}

:lang(en),
.text-en {
  font-family: var(--font-family-en);
}

/* ==========================================================================
   Accessibility Baseline (docs/07_Theme_Specification.md Sections 19.1, 19.7)
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/**
 * Visually Hidden (Additional Correction — HOME Primary Heading / Hero
 * Semantic Alignment). Removes visual presentation only; the element
 * remains present in the accessibility tree (unlike `display: none`,
 * `visibility: hidden`, or the `hidden` attribute).
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: var(--space-cta) var(--space-content);
  background-color: var(--color-surface-default);
  color: var(--color-text-primary);
  border-radius: var(--radius-cta);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   Global Rhythm (docs/07_Theme_Specification.md Section 8.1)
   ========================================================================== */

.site-section {
  padding-block: var(--space-section);
}

.content-stack {
  display: grid;
  gap: var(--space-content);
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-cta);
}

/* ==========================================================================
   Layout Rhythm (docs/07_Theme_Specification.md Section 8.2)
   ========================================================================== */

.two-column {
  display: grid;
  gap: var(--space-content);
}

.usage-layout {
  display: grid;
  gap: var(--space-content);
}

@media (min-width: 1024px) {
  .two-column {
    gap: var(--space-two-column);
  }

  .usage-layout {
    gap: var(--space-usage-two-column);
  }
}

/* ==========================================================================
   Mobile-First Structure (docs/07_Theme_Specification.md Section 16.1)
   ========================================================================== */

.layout-one-column,
.layout-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .layout-two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-two-column);
  }
}

/* ==========================================================================
   Global Navigation Structure (docs/07_Theme_Specification.md Section 4.8)
   ========================================================================== */

.site-navigation ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-navigation a {
  color: var(--color-text-primary);
}

/* ==========================================================================
   Typography Role Classes (docs/07_Theme_Specification.md Section 6.3)
   ========================================================================== */

.hero__title-en {
  font-family: var(--font-family-en);
  font-size: var(--font-size-hero-en);
  font-weight: 800;
}

.hero__text-ja {
  font-size: var(--font-size-hero-ja);
  line-height: 1.9;
}

.section-label {
  font-size: var(--font-size-section-label);
  font-weight: 700;
  letter-spacing: 0.25em;
}

.feature-label {
  font-size: var(--font-size-feature-label);
  font-weight: 700;
  letter-spacing: 0.15em;
}

.section-heading {
  font-size: var(--font-size-section-heading);
  letter-spacing: 0.03em;
}

.usage-heading {
  font-size: var(--font-size-usage-heading);
  font-weight: 700;
}

.supporting-text {
  font-size: var(--font-size-supporting);
  line-height: 1.8;
}

.card-body {
  font-size: var(--font-size-card-body);
  line-height: 1.6;
}

/**
 * Footer Small Text (docs/07_Theme_Specification.md Section 6.3: "Footer
 * small text shall use a value within the approved 0.6rem to 0.7rem
 * range... This specification does not assign additional footer
 * sub-roles."). No exact class name or single value is given by the
 * approved Design System beyond this range; `--font-size-footer-small-min`
 * is used as the single value for the one approved footer role.
 */
.footer-small-text {
  font-size: var(--font-size-footer-small-min);
}

/* ==========================================================================
   Radius Implementation (docs/07_Theme_Specification.md Section 9)
   ========================================================================== */

.button,
.cta,
.compact-cta,
.fixed-ui a,
.fixed-ui button {
  border-radius: var(--radius-cta);
}

.information-card {
  border-radius: var(--radius-information-card);
}

.instagram-thumbnail {
  border-radius: var(--radius-instagram-thumbnail);
}

.benefit-chip {
  border-radius: var(--radius-benefit-chip);
}

.category-pill {
  border-radius: var(--radius-category-pill);
}

/* ==========================================================================
   Shadow Implementation (docs/07_Theme_Specification.md Section 10)
   ========================================================================== */

.information-card,
.category-pill,
.button {
  box-shadow: none;
}

.fixed-ui {
  box-shadow: var(--shadow-fixed-ui);
}

/* ==========================================================================
   Standard Button (docs/08_Component_Specification.md Section 6)
   ========================================================================== */

.button--primary {
  transition: opacity var(--transition-interaction);
}

.button--secondary {
  transition: background-color var(--transition-interaction);
}

@media (hover: hover) and (pointer: fine) {
  .button--primary:hover {
    opacity: 0.85;
  }

  .button--secondary:hover {
    background-color: var(--color-surface-light);
  }
}

/* ==========================================================================
   Information Card (docs/08_Component_Specification.md Section 9)
   Transform target value remains an unresolved Implementation Boundary.
   ========================================================================== */

.information-card {
  background-color: var(--color-surface-default);
  transition:
    transform var(--transition-interaction),
    box-shadow var(--transition-interaction);
}

.information-card__content {
  display: grid;
  gap: var(--space-information-card-internal);
}

.information-card__list {
  display: grid;
  gap: var(--space-information-card-list);
}

@media (hover: hover) and (pointer: fine) {
  .information-card:hover {
    box-shadow: var(--shadow-interaction);
  }
}

/* ==========================================================================
   Category Pill (docs/08_Component_Specification.md Section 13)
   Hover target colors remain an unresolved Implementation Boundary.
   ========================================================================== */

.category-pill {
  transition:
    border-color var(--transition-interaction),
    color var(--transition-interaction);
}

/* ==========================================================================
   Instagram Thumbnail (docs/08_Component_Specification.md Section 14)
   ========================================================================== */

.instagram-thumbnail {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.instagram-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instagram-grid {
  display: grid;
  gap: var(--space-instagram-grid);
}

/* ==========================================================================
   Guide Item container (docs/08_Component_Specification.md Section 11)
   ========================================================================== */

.visit-guide {
  gap: var(--space-visit-guide);
}

/* ==========================================================================
   WITH DOG list (docs/07_Theme_Specification.md Section 8.3)
   ========================================================================== */

.with-dog-list {
  gap: var(--space-with-dog-list);
}

/* ==========================================================================
   Reduced Motion (docs/07_Theme_Specification.md Section 18.3)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .information-card,
  .category-pill,
  .button {
    transition-duration: 0.01ms;
  }
}

/* ==========================================================================
   Photography Implementation (docs/07_Theme_Specification.md Section 15.1)
   ========================================================================== */

.photo--dog-run,
.photo--cafe {
  aspect-ratio: 4 / 3;
}

.photo--seasonal-event {
  aspect-ratio: 2 / 1;
}

.photo--with-dog,
.photo--instagram {
  aspect-ratio: 1 / 1;
}

.photo--dog-run img,
.photo--cafe img,
.photo--seasonal-event img,
.photo--with-dog img,
.photo--instagram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Hero Component Rhythm (docs/07_Theme_Specification.md Section 8.3)
   A multi-image Hero Collage is not implemented (Hero composition beyond a
   single image remains undefined by the approved Design System); this rule
   is implemented ready for that context.
   ========================================================================== */

.hero__collage {
  gap: var(--space-hero-collage);
}

.hero__tagline {
  margin-block: var(--space-hero-tagline-top) var(--space-hero-tagline-bottom);
}

@media (min-width: 1024px) {
  .hero {
    padding-block: var(--space-hero-desktop-top) var(--space-hero-desktop-bottom);
  }
}

/* ==========================================================================
   Hero Intrinsic Aspect Ratio (Implementation Correction — Hero Intrinsic
   Aspect Ratio / Mobile Runtime Correction). Applies to all viewports so
   the Production Hero Composition Asset (intrinsic 2400 x 1240) keeps its
   intrinsic aspect ratio instead of stretching under the Global baseline
   `img { max-width: 100% }` alone. No cropping or `object-fit` is applied.

   Hero Desktop Temporary Validation (Implementation Correction — Production
   Hero Composition Alignment). `1160px` is a TEMPORARY validation value
   only — it is not a Design Token and not a final approved Design
   Decision. It exists to confirm a centered, contained desktop
   presentation of the Asset pending Staging visual confirmation, after
   which the desktop value is re-evaluated. No Mobile-specific layout is
   introduced by this rule.
   ========================================================================== */

.hero img {
  width: 100%;
  height: auto;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .hero img {
    max-width: 1160px;
  }
}

/* ==========================================================================
   Fixed CTA position (docs/03_Design_System.md Section 9 — Fixed CTA,
   Fixed Position; docs/07_Theme_Specification.md Section 11.6;
   docs/08_Component_Specification.md Section 8). Approved: Bottom anchor,
   16px bottom offset, 16px horizontal inset. CTA dimensions (width /
   height) remain an unresolved Implementation Boundary and are not set
   here; no safe-area-inset requirement is introduced.
   ========================================================================== */

.fixed-ui {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
}

/* ==========================================================================
   Fixed Mobile CTA visibility (docs/05_HOME_Specification.md Visibility
   Rules: "Fixed Mobile CTA: Displayed on mobile devices."). Only the
   approved 1024px breakpoint is used.
   ========================================================================== */

@media (min-width: 1024px) {
  .fixed-ui {
    display: none;
  }
}