/* =============================================================================
   Island Finance Blog — design system

   Ported from the contentberg-child theme (Chat Agency, v1.1.0) that shipped on
   the previous WordPress install. Brand tokens, type scale, header, featured
   card, article grid and footer are carried over so the rebuild is visually
   continuous with what the client already signed off.

   Identity preservation over invention: the blue/orange pairing, Roboto, the
   overlapping featured card and the blue footer are the established brand.
   ========================================================================== */

/* Fonts, tokens and article rules — shared with the Filament editor. */
/* article.css is linked separately by the layout, before this file: an
   @import cannot carry a cache-busting query. This file consumes its
   tokens and will render unstyled without it. */

/* ---- Base --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6875;              /* the source theme's body rhythm */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--color-primary); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;   /* the focus ring's own step; see DESIGN.md rounded.focus */
}

.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3.125rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px 20px;
  z-index: calc(var(--z-header) + 1);
}
.skip-link:focus { left: 0; }

/* ---- Header ------------------------------------------------------------- */

.site-header {
  background: var(--color-white);
  height: var(--header-height);
  position: relative;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.site-logo { flex-shrink: 0; display: flex; align-items: center; }
.site-logo img { height: 48px; width: auto; display: block; }

/* Navigation.
   Mirrors the main site (www.islandfinance.com), which is Laravel + Flux UI.
   Values below are the resolved equivalents of its Tailwind utilities so the two
   headers match: xl breakpoint at 1280px, gap-1, justify-around, uppercase 14px
   bold links in --color-primary, full-height hit areas with a zinc-800/5 hover
   wash, a 2px --color-primary-600 underline on the current page, two dropdowns,
   and the PAGAR / SOLICITA AQUI calls to action. */

.site-nav { position: static; display: flex; align-items: center; }

/* --- hamburger ----------------------------------------------------------- */

.site-nav__toggle {
  display: grid;
  place-items: center;
  width: 44px;                 /* 44px minimum touch target */
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}

.site-nav__toggle:hover { background: var(--color-nav-hover); }

.site-nav__bars,
.site-nav__bars::before,
.site-nav__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: transform var(--transition), background-color var(--transition);
}

.site-nav__bars { position: relative; }
.site-nav__bars::before,
.site-nav__bars::after { content: ''; position: absolute; left: 0; }
.site-nav__bars::before { transform: translateY(-7px); }
.site-nav__bars::after  { transform: translateY(7px); }

.site-nav.is-open .site-nav__bars { background: transparent; }
.site-nav.is-open .site-nav__bars::before { transform: rotate(45deg); }
.site-nav.is-open .site-nav__bars::after  { transform: rotate(-45deg); }

/* --- shared link / trigger typography ------------------------------------ */

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;                    /* gap-1 */
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

.site-nav__list > li { display: flex; }

.site-nav__list a,
.site-nav__trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  border: 0;
  background: none;
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--text-label);         /* text-sm */
  font-weight: 700;
  line-height: 1;              /* leading-none */
  text-transform: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition);
}

.site-nav__list a:hover,
.site-nav__trigger:hover { background: var(--color-nav-hover); }

.site-nav__chevron {
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.site-nav__chevron svg { display: block; width: 100%; height: 100%; }

.site-nav__group.is-open .site-nav__chevron { transform: rotate(180deg); }

/* --- dropdown submenu ---------------------------------------------------- */

.site-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: none;
}

.site-nav__submenu a {
  display: block;
  color: var(--color-primary);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

/* --- calls to action ------------------------------------------------------
   Flux renders these as h-14 (56px) buttons, 14px bold, rounded-lg, with a
   1px black/10 border and an inset white highlight. PAGAR takes the brand
   blue; SOLICITA AQUI takes --color-secondary (#ea6740). */

.nav-cta {
  display: grid;
  place-items: center;
  height: 56px;                /* h-14 */
  padding-inline: 1rem;        /* ps-4 pe-4 */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);   /* rounded-lg */
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  font-size: var(--text-label);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--transition);
}

.nav-cta--pay   { background: var(--color-primary); }
.nav-cta--pay:hover { background: var(--color-primary-600); }

/* The main site fills this with #ea6740, which is only 3.22:1 under white
   14px bold text. --color-accent-strong is the same hue darkened 18% and
   clears 4.59:1, so the button reads as the brand and the label is legible. */
.nav-cta--apply { background: var(--color-accent-strong); }
.nav-cta--apply:hover { background: var(--color-accent-dark); }

/* --- below xl: everything collapses into a full-width panel --------------- */

@media (max-width: 1279px) {
  .site-nav__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: var(--z-dropdown);
    padding: 0 clamp(1.25rem, 4vw, 2.5rem) 2.5rem;   /* pb-10 */
    background: var(--color-white);
    border-bottom-left-radius: 6px;                  /* rounded-b-md */
    border-bottom-right-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(156, 163, 175, 0.5),
                0 2px 4px -2px rgba(156, 163, 175, 0.5);
  }

  /* Collapsed by default; the toggle adds .is-open. Not gated on a transition,
     so the links still render if scripting never runs. */
  .site-nav:not(.is-open) .site-nav__panel { display: none; }

  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .site-nav__list > li {
    display: block;
    border-bottom: 1px solid var(--color-border);   /* row dividers */
  }

  .site-nav__list a,
  .site-nav__trigger {
    justify-content: space-between;
    width: 100%;
    height: 3rem;              /* h-12 */
    padding: 0;
    border-radius: 0;
  }

  .site-nav__list a:hover,
  .site-nav__trigger:hover,
  .site-nav__list a[aria-current='page'] { background: var(--color-nav-hover-soft); }

  .site-nav__list a[aria-current='page'] { color: var(--color-primary-600); }

  /* Chevron points right when closed, down when open — as in the mobile comp. */
  .site-nav__chevron { transform: rotate(-90deg); width: 14px; height: 14px; }
  .site-nav__group.is-open .site-nav__chevron { transform: rotate(0deg); }

  .site-nav__submenu { display: none; padding: 0 0 0.5rem 1rem; }
  .site-nav__group.is-open .site-nav__submenu { display: block; }
  .site-nav__submenu a { height: 2.75rem; display: flex; align-items: center; }

  .site-nav__ctas {
    display: flex;
    flex-direction: column;    /* stacked, per the mobile comp */
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .nav-cta { width: 100%; }
}

/* --- xl and up: inline row, hover dropdowns, CTAs on the right ------------ */

@media (min-width: 1280px) {
  .site-nav__toggle { display: none; }

  .site-nav {
    flex: 1;
    align-self: stretch;
    gap: 1.25rem;
  }

  .site-nav__panel {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 1.25rem;
    height: 100%;
  }

  .site-nav__list {
    flex: 1;
    height: 100%;
    flex-wrap: wrap;
    justify-content: space-around;   /* justify-around */
  }

  .site-nav__list > li { height: 100%; align-items: center; }

  .site-nav__list > li > a,
  .site-nav__trigger {
    height: 100%;
    padding-inline: 10px;      /* px-2.5 */
    border-radius: 0;          /* rounded-none at xl */
  }

  /* 2px bar under the active item, as on the main site. */
  .site-nav__list a[aria-current='page']::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 2.25rem;
    height: 2px;
    background: var(--color-primary-600);
  }

  .site-nav__group { position: relative; }

  .site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown);
    min-width: 200px;
    margin-top: -1.25rem;
    padding: 0.3125rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    /* visibility is NOT transitioned: it would interpolate and the panel would
       stay hidden for the duration of the transition. */
    transition: opacity var(--transition), transform var(--transition);
  }

  .site-nav__group:hover .site-nav__submenu,
  .site-nav__group:focus-within .site-nav__submenu,
  .site-nav__group.is-open .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .site-nav__submenu a {
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
  }

  .site-nav__submenu a:hover {
    background: var(--color-nav-hover);
    color: var(--color-primary-600);
  }

  .site-nav__ctas { display: flex; gap: 0.75rem; flex-shrink: 0; }

  .nav-cta--pay   { width: 96px; }    /* w-24 */
  .nav-cta--apply { width: 160px; }   /* w-40 */
}

/* ---- Featured post ------------------------------------------------------
   The signature move from the old theme: a full-bleed image with a white card
   pulled up over it. Kept, with the overlap made fluid so the card never
   collides with the image edge on small screens. */

.featured { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.featured__image {
  width: 100%;
  height: clamp(240px, 38vw, 500px);
  background: var(--color-primary-tint) center / cover no-repeat;
}

.featured__card {
  position: relative;
  max-width: var(--content-width);
  margin: clamp(-72px, -6vw, -48px) auto 0;
  padding: clamp(2rem, 5vw, 3.125rem);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-raised);
  text-align: center;
}

.featured__meta {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--color-muted);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.featured__title {
  margin: 0 0 0.75rem;
  color: var(--color-primary);
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.featured__title a { color: inherit; text-decoration: none; }
.featured__title a:hover { color: var(--color-primary-darker); }

.featured__excerpt {
  max-width: 62ch;
  margin: 0 auto 1.5rem;
  color: var(--color-text);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: 0.875rem 2.75rem;
  border: 1px solid var(--color-accent-strong);
  border-radius: 10px;
  background: var(--color-accent-strong);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

.btn:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0); }

/* ---- Article grid ------------------------------------------------------- */

.section-heading {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  color: var(--color-primary-darker);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.875rem, 3vw, 2.5rem) clamp(1.875rem, 3vw, 3.125rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card { display: flex; flex-direction: column; }

.card__image {
  aspect-ratio: 4 / 3;
  width: 100%;
  margin-bottom: 1rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-tint);
  object-fit: cover;
  transition: transform var(--transition);
}

.card:hover .card__image { transform: scale(1.02); }

.card__title {
  margin: 0 0 0.375rem;
  color: var(--color-primary);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
}

.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--color-primary-darker); }

.card__meta {
  margin: 0 0 0.5rem;
  color: var(--color-muted);
  font-size: var(--text-small);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.card__excerpt {
  margin: 0 0 1rem;
  color: var(--color-text);
  font-size: var(--text-secondary);
  line-height: 1.6;
  text-wrap: pretty;
}

.card__more {
  margin-top: auto;
  color: var(--color-accent-strong);
  font-size: var(--text-secondary);
  font-weight: 700;
  letter-spacing: 2.4px;      /* the source theme's read-more tracking */
  text-decoration: none;
  text-transform: uppercase;
}

.card__more:hover { color: var(--color-accent-dark); text-decoration: underline; }

/* Whole-card click target without nesting interactive elements */
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.card { position: relative; }

/* ---- Pagination --------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: clamp(2.5rem, 6vw, 3.75rem) 0 0;
  padding: 0;
  list-style: none;
}

.pagination a,
.pagination span {
  display: block;
  min-width: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: var(--text-secondary);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition);
}

.pagination a:hover { background: var(--color-primary-tint); border-color: var(--color-primary-tint); }

.pagination [aria-current='page'] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.pagination .disabled { color: #6b7280; }   /* 4.8:1 on white */

/* ---- Footer ------------------------------------------------------------- */

.site-footer {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  padding: clamp(2.5rem, 6vw, 3.75rem) 1.25rem 2.5rem;
  background: var(--color-primary);
  color: var(--color-white);
}

.site-footer__inner { max-width: var(--content-width); margin-inline: auto; }

.site-footer__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5625rem 1.875rem;
}

.site-footer h2 {
  margin: 0 0 1.25rem;
  color: var(--footer-heading);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 0.75rem; }

.site-footer a {
  color: var(--color-white);
  font-size: 1rem;
  text-decoration: none;
  transition: color var(--transition);
}

.site-footer a:hover { color: var(--color-accent-light); text-decoration: underline; }

.site-footer__social {
  display: flex;
  gap: 0.9375rem;
  justify-content: center;
  padding-top: 1.875rem;
}

.site-footer__social a { display: flex; transition: transform var(--transition); }
.site-footer__social a:hover { transform: scale(1.1); }
.site-footer__social img { width: 36px; height: 36px; }

.site-footer__disclaimer {
  max-width: 90ch;
  margin: 1.5625rem auto 0;
  color: var(--color-footer-link);               /* 8.0:1 on the primary blue */
  font-size: var(--text-small);
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
}

.site-footer__brand {
  margin-top: 1rem;
  color: var(--color-footer-link);
  font-size: var(--text-small);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---- Motion ------------------------------------------------------------- */

/* Cards fade up on load. Default state is visible: the animation only runs
   where it's supported, so a headless render or a hidden tab still ships the
   content rather than a blank grid. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) or (animation: fade 1s) {
    .article-grid > .card {
      animation: card-in 500ms var(--ease) backwards;
      animation-delay: calc(var(--i, 0) * 45ms);
    }
  }
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Taxonomy archives --------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--color-muted);
  font-size: var(--text-label);
}

.breadcrumb a { color: var(--color-primary); text-underline-offset: 2px; }
.breadcrumb a:hover { color: var(--color-accent-strong); }
.breadcrumb [aria-current='page'] { color: var(--color-text); }

.archive__header {
  margin-block: 0.75rem clamp(2rem, 5vw, 3rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

/* The one place a small tracked label is doing real work rather than decorating
   a section: it names which taxonomy the reader has landed in, and without it
   "Préstamos" alone does not say whether it is a category or a tag. */
.archive__kind {
  margin: 0 0 0.375rem;
  color: var(--color-muted);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.archive__title {
  margin: 0;
  color: var(--color-primary-darker);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.archive__count {
  margin: 0.5rem 0 0;
  color: var(--color-muted);
  font-size: var(--text-secondary);
}

/* ---- Utilities ----------------------------------------------------------- */

/* Reaches screen readers only. The badge reads as a bare place name otherwise
   ("Educación"), with nothing to say it is the category. */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}