/* ============================================================
   base.css — Global resets and shared components

   Shared components defined here are used across multiple
   sections. All values via tokens from tokens.css.
   ============================================================ */


/* ============================================================
   GLOBAL RESETS
   ============================================================ */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;          /* prevent horizontal scroll from oversized bg images */
}

body {
  font-family: var(--type-family-body);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-regular);
  line-height: 1;
  color: var(--color-text-default);
  background-color: var(--color-surface-page);
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}


/* ============================================================
   Button component
   Four variants: primary, cta, secondary-open, secondary-closed.
   Each has a photographed ceramic tile as background (<img>),
   absolutely positioned to fill the button frame.
   Text label sits on top via relative positioning.
   Drop shadow baked into tile asset — no CSS box-shadow.

   NOTE: Full Button implementation added when building Navbar
   (Step 7). Placeholder here to reserve the component slot.
   ============================================================ */

/* Base button: relative container for tile bg + label */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;          /* clip tile edges within button frame */
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Tile background image — fills entire button frame */
.btn__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0;
  pointer-events: none;
  max-width: none;           /* override base.css img { max-width: 100% } */
  transition: transform 0.15s ease;
}

/* Text label — sits above tile */
.btn__label {
  position: relative;
  z-index: 1;
  font-family: var(--type-family-display);  /* Alphabet Soup */
  letter-spacing: 0.03em;
  font-weight: var(--type-weight-regular);
  font-size: var(--type-size-h4);           /* 36px — buttons use H4 */
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transition: transform 0.15s ease;
}

/* Shared tile inner frame — padding + radius + shadow */
.btn__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ── primary: dark/black tile, white text ── */
.btn--primary {
  width: 115px;
  padding: var(--space-component-sm) var(--space-component-md);
}
.btn--primary .btn__label {
  color: var(--color-action-primary-label);
}

/* ── cta: red/terracotta tile, white text ── */
.btn--cta {
  padding: var(--space-component-sm) var(--space-component-md);
  border-radius: var(--radius-button);
  overflow: visible;
}
.btn--cta .btn__bg {
  filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.25));
}
.btn--cta .btn__label {
  color: var(--color-action-accent-label);
}

/* ── secondary/open (Menu): unglazed tile ── */
.btn--menu {
  padding: var(--space-component-sm) var(--space-component-md);
  border-radius: var(--radius-button);
  overflow: visible;
  filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.25));
}
/* Remove shadow on hover/clicked/clicked-hover states */
.btn--menu.btn--hover,
.btn--menu.btn--clicked,
.btn--menu.btn--clicked-hover {
  filter: none;
}
.btn--menu .btn__label {
  color: var(--color-action-secondary-label);
}
/* Close state ("x") — smaller text, h5 */
.btn--menu.btn--close-state .btn__label {
  font-size: var(--type-size-h5);
}


/* ============================================================
   SeeMoreLink
   Used in: GallerySection, UpcomingEventsSection, AboutSection.

   Styled to match navbar links: nav font, semibold, uppercase,
   link colour, animated underline on hover.
   Full width. Padding via component tokens.
   ============================================================ */

.see-more-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: var(--space-component-3xl);
  padding-bottom: var(--space-component-3xl);
  padding-left: var(--space-component-4xl);
  padding-right: var(--space-component-4xl);
  font-family: var(--type-family-nav);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-semibold);
  line-height: 1;
  color: var(--color-text-link);
  white-space: nowrap;
  text-transform: uppercase;
  box-sizing: border-box;
  pointer-events: none;
}

.see-more-link__text {
  text-decoration: none;
  position: relative;
  pointer-events: auto;
  cursor: pointer;
}

.see-more-link__text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease;
}

.see-more-link__arrow {
  text-decoration: none;
  margin-left: 0.2em;
  pointer-events: auto;
  cursor: pointer;
}

/* Hover: animated underline on text */
.see-more-link:has(.see-more-link__text:hover, .see-more-link__arrow:hover) .see-more-link__text::after {
  transform: scaleX(1);
  transform-origin: left;
}