/* =========================================
   KYRIMAI LINKTREE — page-specific styles
   (shared layout / reveal / measure come from base.css)
========================================= */

/* -----------------------------------------
   Host-theme chrome tweaks — linktree page only.
   Scoped via the body class added by kev_body_class() (kev-kyrimai-linktree).
   Hide the mobile menu trigger and the header CTA buttons; the footer is
   removed in the template itself (wp_footer only, no get_footer).
------------------------------------------- */
body.kev-kyrimai-linktree .menu-toggle,
body.kev-kyrimai-linktree .header-ctas,
body.kev-kyrimai-linktree .text-lg-right,
body.kev-kyrimai-linktree #trigger-col {
  display: none !important;
}

.page-linktree {
  background: #B5C9B8;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh; /* accurate viewport on mobile (excludes browser UI) */
  /* Top padding clears the fixed/sticky theme header so the centered content
     is never hidden behind it. border-box keeps the section at 100vh total,
     and min-height (not height) lets it grow + scroll on short screens. */
  padding: 170px 20px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Narrow centered "link-in-bio" column, vertically centered in the screen */
.link-container {
  width: 100%;
  max-width: 560px;
  margin: 0px auto auto;
  text-align: center;
}

/* =========================================
   TITLE
========================================= */
.link-title {
  font-family: 'Noto Serif Display';
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  color: #000;
  margin: 0 0 60px;
}

/* =========================================
   TWO PRIMARY BUTTONS
========================================= */
.link-buttons {
  display: flex;
  flex-direction: column;
  /* Stretch both buttons to the column width, and size the column to its
     widest child (fit-content) — so the two buttons always match width
     regardless of their label length. */
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  gap: 18px;
  margin: 0 auto 90px;
}

.link-btn {
  display: inline-block;
  min-width: 280px;
  padding: 18px 32px;
  font-family: 'Noto Serif Display';
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #000;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}
.link-btn:hover { opacity: 0.85; }
.link-btn--primary   { background: #FDCE3F; }   /* yellow */
.link-btn--secondary { background: #B3B3B3; }   /* gray  */

/* =========================================
   NEWS LIST + PAGE LINKS
   Type follows the restaurant menu (.rest-tabs__item):
   serif 700, underlined, generous underline-offset.
========================================= */
.link-news,
.link-pages {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.link-news { margin-bottom: 110px; }

.link-news a,
.link-pages a {
  display: inline-block;
  font-family: 'Noto Serif Display';
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}
.link-news a:hover,
.link-pages a:hover { opacity: 0.55; }

.link-news a  { font-size: 28px; }
.link-pages a { font-size: 22px; }

/* =========================================
   SOCIAL ICONS — centered at the bottom.
   All three SVGs are ~207 units tall in their
   viewBox, so sizing by height (width:auto)
   keeps them optically consistent.
========================================= */
.link-social {
  list-style: none;
  margin: 60px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.link-social a {
  display: block;
  color: #000;
  transition: opacity 0.2s ease;
}
.link-social a:hover { opacity: 0.55; }

.link-social svg {
  display: block;
  width: auto;
  height: 26px;
  fill: currentColor;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 991px) {

  .link-title { font-size: 56px; margin-bottom: 44px; }
  .link-btn { font-size: 18px; min-width: 240px; padding: 14px 28px; }
  .link-news a  { font-size: 22px; }
  .link-pages a { font-size: 18px; }
  .link-news { margin-bottom: 80px; }
}

@media (max-width: 768px) {
  .page-linktree { padding: 120px 16px 40px; }
  .link-title { font-size: 42px; margin-bottom: 28px; }
  .link-buttons { gap: 12px; margin-bottom: 36px; }
  .link-btn { font-size: 18px; min-width: 200px; padding: 12px 22px; letter-spacing: 0.04em; }
  .link-news { margin-bottom: 36px; gap: 16px; }
  .link-pages { gap: 16px; }
  .link-news a  { font-size: 20px; text-underline-offset: 4px; }
  .link-pages a { font-size: 18px; text-underline-offset: 4px; }
  .link-social { margin-top: 40px; gap: 24px; }
  .link-social svg { height: 22px; }
}

/* Short phones: header (~160px) leaves little room — tighten everything so
   the whole link-tree fits in one screen with no scrolling. */
@media (max-width: 768px) and (max-height: 760px) {
  .link-title { font-size: 34px; margin-bottom: 16px; }
  .link-buttons { gap: 10px; margin-bottom: 40px; }
  .link-btn { font-size: 16px; padding: 10px 20px; }
  .link-news { margin-bottom: 70px; gap: 10px; }
  .link-pages { gap: 10px; }
  .link-news a  { font-size: 17px; }
  .link-pages a { font-size: 15px; }
}

/* Bump the host theme's brand name on mobile for this page only. */
@media screen and (max-width: 767px) {
  body.kev-kyrimai-linktree #brand-name p {
    font-size: 28px !important;
  }
}