/* ==========================================================================
   links.ynodesigns.com
   Standalone stylesheet — no framework. Tokens mirror the 2026 WordPress
   theme (wp-content/themes/ynodesigns/scss/custom-variables.scss) so this
   page reads as part of ynodesigns.com.

   Layout note: the hero is deliberately short. On a phone the link cards
   themselves need to land in the first fold, so branding gets the minimum
   space that still reads as YNO, and the video and credibility badges sit
   below the links rather than above them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (from the theme's SCSS variables)
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --plum:         #593E4A;  /* $primary        */
  --plum-deep:    #260E19;  /* $secondary / $primary-hover / $headings-color */
  --body-color:   #7A4960;  /* $body-color     */
  --light:        #FAF7F9;  /* $light          */
  --white:        #FFFFFF;
  --yellow:       #FFB033;  /* $yellow         */
  --green:        #00A281;  /* $green          */
  --grad-1:       #A52727;  /* $gradient1      */
  --grad-2:       #61289A;  /* $gradient2      */

  /* Derived surfaces */
  --border-soft:  rgba(0, 0, 0, 0.08);
  --shadow-lg:    -5px 10px 40px -10px rgba(41, 24, 32, 0.15);
  --shadow-hover: 0 14px 32px -12px rgba(41, 24, 32, 0.28);

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Shape — $border-radius-lg / $btn-border-radius */
  --radius-card: 0.75rem;
  --radius-btn:  4px;

  /* Motion — $btn-transition */
  --transition: all 0.25s ease-in-out;

  --shell: 34rem; /* readable single-column measure */
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--light);
  color: var(--body-color);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img { height: auto; }

h1, h2 {
  margin: 0;
  color: var(--plum-deep);
  font-weight: 700;
  line-height: 1.25;
}

p { margin: 0 0 1rem; }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Visible focus ring on every interactive element — never removed. */
a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: var(--radius-btn);
}

/* Screen-reader-only, but reachable by keyboard when focused. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background-color: var(--white);
  color: var(--plum-deep);
  border-radius: var(--radius-btn);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -150%);
  transition: transform 0.2s ease-in-out;
}
.skip-link:focus { transform: translate(-50%, 0); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* --------------------------------------------------------------------------
   3. Hero — dark plum panel carrying the theme's iridescent conic sweep.
   Kept short on purpose: see the layout note at the top of this file.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.75rem 0 1.25rem;
  background-color: var(--plum-deep);
  text-align: center;
}

/* Iridescent conic sweep, heavily blurred to read as a soft brand glow.
   Same stops as .main-header-blog in the theme. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -2;
  background: conic-gradient(
    from 200deg at 50% 50%,
    rgba(255, 176, 51, 0.55)   0%,
    rgba(165,  39, 39, 0.50)  20%,
    rgba( 97,  40, 154, 0.50) 45%,
    rgba( 89,  62,  74, 0.55) 70%,
    rgba(  0, 162, 129, 0.40) 88%,
    rgba(255, 176,  51, 0.55) 100%
  );
  filter: blur(90px) saturate(1.1);
  animation: hero-sweep 28s linear infinite;
  will-change: transform;
  pointer-events: none;
}

/* Voice-vector motif — the same wave signature used across the site.
   Kept faint: on a wide, short hero "cover" scales the wave up a lot, and
   anything above ~0.15 stops reading as a motif and starts competing. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/voice-vector.svg") center bottom / cover no-repeat;
  opacity: 0.13;
  pointer-events: none;
}

@keyframes hero-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Sizing lives on the link, not the image: an inline-block anchor shrink-wraps
   its content, which made the image's percentage max-width collapse. */
.hero__logo-link {
  /* Flex + min-height guarantees a 44px tap target even at 320px, where the
     percentage-capped logo would otherwise render only 40px tall. */
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 7.25rem;
  max-width: 38%;
  margin: 0 auto 0.625rem;
  border-radius: var(--radius-btn);
}

.hero__logo {
  display: block;
  width: 100%;
}

/* The positioning line from the business card. It carries the whole message,
   so there is no separate intro paragraph competing with it for the fold. */
.hero__tagline {
  display: block;
  max-width: 22rem;
  margin: 0 auto 1.125rem;
  color: var(--white);
  font-size: clamp(1.375rem, 5.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  /* Even out the line lengths so no line ends on a dangling "and".
     Ignored by browsers without support, which just wrap normally. */
  text-wrap: balance;
  /* "App—Designed" is one long token; let it break if a narrow phone needs it */
  overflow-wrap: anywhere;
}

/* Accent on the payoff words, echoing the site's own "[better]" treatment. */
.hero__tagline em {
  font-style: normal;
  color: var(--yellow);
}

/* Certification line — three tappable credentials, each linking to the
   issuing body's record. Inline text flow, no icon. */
.hero__certs {
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
  line-height: 1.6;
}

.hero__certs a {
  display: inline-block;
  padding: 0.25rem 0.375rem;
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
  border-radius: var(--radius-btn);
  transition: var(--transition);
}

.hero__certs a:hover,
.hero__certs a:focus-visible {
  color: var(--yellow);
  text-decoration-color: var(--yellow);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;                 /* > 44px touch target */
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn--light {
  background-color: var(--white);
  color: var(--plum);
}
.btn--light:hover,
.btn--light:focus-visible {
  background-color: var(--white);
  color: var(--plum-deep);
  border-color: var(--plum-deep);
  text-decoration: underline;
}

.btn--block { display: flex; width: 100%; }

.btn__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

/* --------------------------------------------------------------------------
   5. Link cards
   -------------------------------------------------------------------------- */
.links {
  display: grid;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

/* Grid/flex children default to min-width:auto, so a long unbreakable URL in a
   subtitle would push the column wider than the viewport. Let them shrink. */
.links > li { min-width: 0; }

.link-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  min-height: 3.75rem;
  padding: 0.75rem 1rem;
  background-color: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  color: var(--plum-deep);
  text-decoration: none;
  transition: var(--transition);
}

.link-card:hover,
.link-card:focus-visible {
  border-color: var(--plum);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.link-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background-color: rgba(89, 62, 74, 0.10);
  color: var(--plum);
}

.link-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* The primary action gets the inverted tile. */
.link-card--accent .link-card__icon {
  background-color: var(--plum-deep);
  color: var(--yellow);
}

.link-card__text {
  flex: 1;
  min-width: 0;
}

.link-card__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.link-card__meta {
  display: block;
  color: var(--body-color);
  font-size: 0.8125rem;
  line-height: 1.45;
  /* "anywhere" (not "break-word") so long URLs also shrink min-content width */
  overflow-wrap: anywhere;
}

.link-card__arrow {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--plum);
  opacity: 0.6;
  transition: var(--transition);
}

.link-card:hover .link-card__arrow,
.link-card:focus-visible .link-card__arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   6. Video — below the links, so it never pushes them out of the first fold
   -------------------------------------------------------------------------- */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 1.5rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--plum-deep);
  box-shadow: var(--shadow-lg);
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.footer {
  margin-top: 2.5rem;
  padding: 2.25rem 0 2rem;
  background-color: var(--plum-deep);
  color: var(--white);
  text-align: center;
}

.footer__heading {
  margin: 0 0 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  font-weight: 600;
}

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  opacity: 0.7;
  transition: var(--transition);
}

.social__link:hover,
.social__link:focus-visible {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.16);
}

.social__link img {
  width: 1.375rem;
  height: 1.375rem;
}

/* Certifications — same badges, order and destinations as the site footer. */
.certs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.certs__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.25rem;
  background-color: var(--white);
  border-radius: 0.5rem;
  transition: var(--transition);
}

.certs__badge:hover,
.certs__badge:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.55);
}

.certs__badge img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.footer__qr {
  width: 7rem;
  height: auto;
  padding: 0.5rem;
  background-color: var(--white);
  border-radius: 0.625rem;
}

.footer__caption {
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8125rem;
}

.footer__meta {
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__location {
  margin: 1.25rem 0 0.25rem;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
}

/* #B3ABAE on #260E19 → 7.2:1, comfortably past WCAG AA. */
.footer__copyright {
  margin: 0;
  color: #B3ABAE;
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   8. Larger screens
   -------------------------------------------------------------------------- */
@media (min-width: 40em) {
  .hero { padding: 2.75rem 0 1.75rem; }
  .links { gap: 0.75rem; }
  .link-card { padding: 0.875rem 1.25rem; }
}

/* --------------------------------------------------------------------------
   9. Reduced motion — kill the sweep and all movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero::before { animation: none; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .link-card:hover,
  .link-card:focus-visible,
  .certs__badge:hover,
  .certs__badge:focus-visible { transform: none; }

  .link-card:hover .link-card__arrow,
  .link-card:focus-visible .link-card__arrow { transform: none; }
}

/* --------------------------------------------------------------------------
   10. Forced colors / high contrast
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .link-card,
  .certs__badge { border: 1px solid CanvasText; }

  .hero::before,
  .hero::after { display: none; }
}