/**
 * Academia SSDN — site header + footer ([ssdn_cabecera], [ssdn_pie])
 * ====================================================================
 * Public pages and the homepage. Loaded on every page (see
 * inc/site/render.php); every rule is scoped to .ssdn-site-head or
 * .ssdn-site-foot. Values: "Academy - Type & Color Spec.md" → Site header
 * and footer; tokens from academy-tokens.css.
 *
 * `body .ssdn-site-*` resets beat the Elementor kit's
 * `.elementor-kit-N a / p` rules (0,1,1); classed rules (0,2,0) beat those.
 */

.ssdn-site-head,
.ssdn-site-foot {
  --site-wrap: 1180px;
  --site-gutter: var(--gutter-desktop);
  -webkit-text-size-adjust: 100%;
}

.ssdn-site-head *, .ssdn-site-head *::before, .ssdn-site-head *::after,
.ssdn-site-foot *, .ssdn-site-foot *::before, .ssdn-site-foot *::after { box-sizing: border-box; }

body .ssdn-site-head a,
body .ssdn-site-foot a { color: inherit; }
.ssdn-site-head :focus-visible,
.ssdn-site-foot :focus-visible { outline: 2px solid var(--ssdn-orange); outline-offset: 3px; border-radius: 4px; }

.ssdn-site-head .ssdn-site-wrap,
.ssdn-site-foot .ssdn-site-wrap { max-width: var(--site-wrap); margin: 0 auto; padding: 0 var(--site-gutter); }

/* Header: logo, then Entrar + Crear cuenta, or Ir a mi dashboard -------- */
.ssdn-site-head { background: var(--ssdn-navy); color: var(--text-1-dark); }
.ssdn-site-head .ssdn-site-head__bar { display: flex; align-items: center; gap: 22px; height: 76px; }
.ssdn-site-head .ssdn-site-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.ssdn-site-head .ssdn-site-brand__mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--ssdn-orange); color: var(--ssdn-navy);
  display: grid; place-items: center;
  font: 700 13px/1 var(--font-display); letter-spacing: -.5px;
}
/* The logo: SS mark + stacked wordmark, same as the dashboard rail. */
.ssdn-site-head .ssdn-site-brand__wordmark { display: flex; flex-direction: column; }
.ssdn-site-head .ssdn-site-brand__name { font: 700 13px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--text-1-dark); }
.ssdn-site-head .ssdn-site-brand__tagline { font: 500 10px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(121, 183, 205, .85); }
.ssdn-site-head .ssdn-site-head__actions { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.ssdn-site-head .ssdn-site-head__signin { font: var(--t-item); text-decoration: none; }
.ssdn-site-head .ssdn-site-head__signin:hover { text-decoration: underline; text-underline-offset: 4px; }
/* .ssdn-btn--ghost comes from academy-tokens.css; restated so the kit's
   link colour can't win. */
.ssdn-site-head .ssdn-btn { font: var(--t-button); border-radius: var(--r-btn); text-decoration: none; transition: background-color .15s, border-color .15s; }
.ssdn-site-head .ssdn-btn--ghost { color: var(--text-1-dark); }
.ssdn-site-head .ssdn-btn--ghost:hover { background: var(--surface-dark); border-color: var(--text-2-dark); }
.ssdn-site-head .ssdn-site-head__btn { padding: 12px 18px; }
/* Dashboard link: long label on desktop, short one on phones (below). */
.ssdn-site-head .ssdn-site-head__corto { display: none; }

/* Footer ---------------------------------------------------------------- */
.ssdn-site-foot { background: var(--ssdn-navy-deep); border-top: 1px solid var(--border-dark); }
.ssdn-site-foot .ssdn-site-foot__bar { display: flex; justify-content: space-between; gap: 22px; padding-top: 26px; padding-bottom: 34px; font: var(--t-meta); color: var(--text-3-dark); }
.ssdn-site-foot nav { display: flex; gap: 22px; }
.ssdn-site-foot a { text-decoration: none; }
.ssdn-site-foot a:hover { color: var(--text-1-dark); }

/* Brand tokens win over the ssdn-crm plugin ------------------------------
   The CRM app's main.css loads after academy-tokens.css and redefines
   --ssdn-navy / --ssdn-orange on :root with its own values. html:root
   outranks plain :root, so the spec values hold on every page.
   Keep these in sync with academy-tokens.css. */
html:root {
  --ssdn-navy:   #112241;
  --ssdn-orange: #F05A2D;
}

/* Footer pinned to the bottom of short pages ---------------------------
   The body becomes a full-height column and the Theme Builder footer takes
   the leftover space above it. The admin bar height is subtracted so
   logged-in users don't get a stray scrollbar. */
body {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}
body > .elementor-location-footer { margin-top: auto; }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .ssdn-site-head, .ssdn-site-foot { --site-gutter: 34px; }
}

@media (max-width: 720px) {
  .ssdn-site-head, .ssdn-site-foot { --site-gutter: var(--gutter-mobile); }
  .ssdn-site-head .ssdn-site-head__bar { height: 64px; gap: 16px; }
  .ssdn-site-head .ssdn-site-head__actions { gap: 16px; }
  .ssdn-site-head .ssdn-site-head__btn { padding: 12px 14px; }
  .ssdn-site-foot .ssdn-site-foot__bar { flex-direction: column; }

  /* Phones (mockup 3h-a): the full logo + Entrar only. Crear cuenta drops;
     the homepage's own buttons cover sign-up. Entrar becomes a ghost button
     with a 44px tap target. */
  .ssdn-site-head .ssdn-site-head__crear { display: none; }
  .ssdn-site-head .ssdn-site-head__signin {
    display: inline-flex; align-items: center; height: 44px; padding: 0 14px; box-sizing: border-box;
    border: 1.5px solid rgba(209, 221, 220, .35); border-radius: var(--r-btn);
    font: 600 14px/1 var(--font-ui); color: var(--text-1-dark); white-space: nowrap;
    transition: background-color .15s, border-color .15s;
  }
  .ssdn-site-head .ssdn-site-head__signin:hover { text-decoration: none; background: var(--surface-dark); border-color: var(--text-2-dark); }

  /* Logged in (mockup 3h-c): "Mi dashboard" fits beside the full logo at 360px. */
  .ssdn-site-head .ssdn-site-head__largo { display: none; }
  .ssdn-site-head .ssdn-site-head__corto { display: inline; }
  .ssdn-site-head .ssdn-site-head__btn { white-space: nowrap; }
}