/*
Theme Name: Península San Pedro — JVPSP
Theme URI: https://www.famethemes.com/themes/onepress/
Description: Child theme de OnePress con el design system de la Junta Vecinal Península San Pedro: paleta monocroma con bloques de color derivados del isotipo, Inter + JetBrains Mono self-hosted, CTA en pill, ritmo de sección de 96px. Superficie trabajada: comunicados / noticias.
Author: Junta Vecinal Península San Pedro
Template: onepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jvpsp-onepress-child
*/

/* ==========================================================================
   1. TOKENS — copiados de los archivos fuente del design system.
      No editar acá: editar en el design system y volver a generar.
   ========================================================================== */

/* --- tokens/fonts.css --- */
/* Webfonts — self-hosted variable fonts, both open source.
   Inter: variable, axes opsz 14..32 + wght 100..900 (SIL OFL).
   JetBrains Mono: variable, axis wght 100..800 (SIL OFL, licence in assets/fonts/).
   Supplied as .ttf; convert to .woff2 for production — same files, ~60% smaller. */
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-Variable.ttf") format("truetype-variations"),url("assets/fonts/Inter-Variable.ttf") format("truetype");font-weight:100 900;font-stretch:100%;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/JetBrainsMono-Variable.ttf") format("truetype-variations"),url("assets/fonts/JetBrainsMono-Variable.ttf") format("truetype");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/JetBrainsMono-Italic-Variable.ttf") format("truetype-variations"),url("assets/fonts/JetBrainsMono-Italic-Variable.ttf") format("truetype");font-weight:100 800;font-style:italic;font-display:swap}
:root{font-optical-sizing:auto}

/* --- tokens/colors.css --- */
/* Colors — a monochrome editorial core interrupted by oversized color blocks.
   The block family is derived from the brand mark: soft tints of its lake blue
   and forest green, plus the two sail hues and one deep lake-night ground. */
:root{
  /* ---- base: mono core ---- */
  --color-primary:#000000;
  --color-on-primary:#ffffff;
  --color-ink:#000000;
  --color-canvas:#ffffff;
  --color-inverse-canvas:#000000;
  --color-inverse-ink:#ffffff;

  /* ---- base: neutrals ---- */
  --color-surface-soft:#f7f7f5;
  --color-hairline:#e6e6e6;
  --color-hairline-soft:#f1f1f1;

  /* ---- base: color blocks (section grounds, derived from the mark) ---- */
  --block-lago:#cfe1fa;    /* tint of the mark's blue #3a82ef — lake + sky */
  --block-monte:#d3e7cd;   /* tint of the mark's green #0a760a — the land band */
  --block-vela:#f6edc3;    /* tint of the yellow sail #ecd731 */
  --block-proa:#f4d5cf;    /* tint of the red sail #da1d12 */
  --block-noche:#13294a;   /* deep lake at dusk — the one dark ground */

  /* ---- base: accent + semantic ---- */
  --accent-magenta:#ff3d8b;
  --semantic-success:#1ea64a;
  --overlay-scrim:#000000;

  /* ---- semantic aliases: text ---- */
  --text-body:var(--color-ink);
  --text-heading:var(--color-ink);
  --text-caption:var(--color-ink);
  --text-inverse:var(--color-inverse-ink);
  --text-link:var(--color-ink);
  --text-on-block:var(--color-ink);
  --text-on-block-dark:var(--color-inverse-ink);

  /* ---- semantic aliases: surface ---- */
  --surface-page:var(--color-canvas);
  --surface-card:var(--color-canvas);
  --surface-tile:var(--color-surface-soft);
  --surface-inverse:var(--color-inverse-canvas);
  --surface-icon-button:var(--color-surface-soft);
  --surface-icon-button-inverse:rgba(255,255,255,0.16);

  /* ---- semantic aliases: border + scrim ---- */
  --border-hairline:var(--color-hairline);
  --border-hairline-soft:var(--color-hairline-soft);
  --scrim-modal:rgba(0,0,0,0.6);
  --scrim-photo:rgba(19,41,74,0.45); /* over photography, when type must sit on it */

  /* ---- semantic aliases: interactive ---- */
  --action-primary-bg:var(--color-primary);
  --action-primary-fg:var(--color-on-primary);
  --action-secondary-bg:var(--color-canvas);
  --action-secondary-fg:var(--color-ink);
  --action-promo-bg:var(--accent-magenta);
  --action-promo-fg:var(--color-on-primary);
  --action-hover-tint:var(--color-surface-soft);
  --focus-ring:var(--color-ink);
}

/* --- tokens/brand.css --- */
/* Brand mark palette — sampled from assets/logo-jvpsp.png
   (Junta Vecinal Península San Pedro · BRC). The mark ships at 85% saturation,
   the chosen variant; assets/logo-jvpsp-100.png keeps the as-supplied values. */
:root{
  --logo-blue:#3a82ef;    /* lake + sky, the mark's dominant field */
  --logo-green:#0a760a;   /* the land band */
  --logo-red:#da1d12;     /* red sail */
  --logo-yellow:#ecd731;  /* yellow sail */
  --logo-ink:#000000;     /* outline + circular lettering */
  --logo-sail:#ffffff;    /* sails, masts, transparent background */

  /* semantic aliases */
  --brand-water:var(--logo-blue);
  --brand-land:var(--logo-green);
  --brand-sail-red:var(--logo-red);
  --brand-sail-yellow:var(--logo-yellow);
  --brand-outline:var(--logo-ink);

  /* mark sizing */
  --logo-size-nav:40px;
  --logo-size-footer:64px;
  --logo-size-hero:120px;
  --logo-clearspace:0.25; /* @kind other */ /* × mark diameter, on all four sides */
}

/* --- tokens/typography.css --- */
/* Typography — one variable sans flexing across fine weight increments,
   plus a mono reserved for taxonomy (eyebrows, captions). */
:root{
  --font-sans:"Inter","Inter Fallback","SF Pro Display",system-ui,helvetica,sans-serif;
  --font-mono:"JetBrains Mono","JetBrains Mono Fallback","SF Mono",menlo,monospace;

  /* weight axis — use only these stops */
  --weight-body:320;
  --weight-body-sm:330;
  --weight-display:340;
  --weight-medium:450;
  --weight-link:480;
  --weight-headline:540;
  --weight-bold:700;

  /* role: size / line-height / letter-spacing */
  --size-display-xl:86px;   --lh-display-xl:1.00;  /* @kind other */  --tracking-display-xl:-1.72px;
  --size-display-lg:64px;   --lh-display-lg:1.10;  /* @kind other */  --tracking-display-lg:-0.96px;
  --size-headline:26px;     --lh-headline:1.35;    /* @kind other */  --tracking-headline:-0.26px;
  --size-subhead:26px;      --lh-subhead:1.35;     /* @kind other */  --tracking-subhead:-0.26px;
  --size-card-title:24px;   --lh-card-title:1.45;  /* @kind other */  --tracking-card-title:0px;
  --size-body-lg:20px;      --lh-body-lg:1.40;     /* @kind other */  --tracking-body-lg:-0.14px;
  --size-body:18px;         --lh-body:1.45;        /* @kind other */  --tracking-body:-0.26px;
  --size-body-sm:16px;      --lh-body-sm:1.45;     /* @kind other */  --tracking-body-sm:-0.14px;
  --size-link:20px;         --lh-link:1.40;        /* @kind other */  --tracking-link:-0.10px;
  --size-button:20px;       --lh-button:1.40;      /* @kind other */  --tracking-button:-0.10px;
  --size-eyebrow:18px;      --lh-eyebrow:1.30;     /* @kind other */  --tracking-eyebrow:0.54px;
  --size-caption:12px;      --lh-caption:1.00;     /* @kind other */  --tracking-caption:0.60px;

  /* role shorthands for the `font` property */
  --type-display-xl:var(--weight-display) var(--size-display-xl)/var(--lh-display-xl) var(--font-sans);
  --type-display-lg:var(--weight-display) var(--size-display-lg)/var(--lh-display-lg) var(--font-sans);
  --type-headline:var(--weight-headline) var(--size-headline)/var(--lh-headline) var(--font-sans);
  --type-subhead:var(--weight-display) var(--size-subhead)/var(--lh-subhead) var(--font-sans);
  --type-card-title:var(--weight-bold) var(--size-card-title)/var(--lh-card-title) var(--font-sans);
  --type-body-lg:var(--weight-body-sm) var(--size-body-lg)/var(--lh-body-lg) var(--font-sans);
  --type-body:var(--weight-body) var(--size-body)/var(--lh-body) var(--font-sans);
  --type-body-sm:var(--weight-body-sm) var(--size-body-sm)/var(--lh-body-sm) var(--font-sans);
  --type-link:var(--weight-link) var(--size-link)/var(--lh-link) var(--font-sans);
  --type-button:var(--weight-link) var(--size-button)/var(--lh-button) var(--font-sans);
  --type-eyebrow:400 var(--size-eyebrow)/var(--lh-eyebrow) var(--font-mono);
  --type-caption:400 var(--size-caption)/var(--lh-caption) var(--font-mono);
}

/* --- tokens/spacing.css --- */
/* Spacing — 8px base unit, with a 96px section rhythm that holds across routes. */
:root{
  --space-hair:1px;
  --space-xxs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-xxl:48px;
  --space-section:96px;

  /* semantic aliases */
  --pad-block-section:var(--space-xxl);
  --pad-card:var(--space-lg);
  --pad-tile:var(--space-md);
  --pad-input:var(--space-sm) 14px;
  --pad-button:10px 20px;
  --gap-section:var(--space-section);

  /* container */
  --container-max:1280px;
  --gutter-desktop:var(--space-xxl);
  --gutter-mobile:var(--space-lg);
  --nav-height:56px;
  --marquee-height:36px;
}

/* --- tokens/radius.css --- */
/* Radius — pill for every text CTA, circle for every icon button. No squared actions. */
:root{
  --radius-xs:2px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:24px;
  --radius-xl:32px;
  --radius-pill:50px;
  --radius-full:9999px;

  /* semantic aliases */
  --radius-button:var(--radius-pill);
  --radius-icon-button:var(--radius-full);
  --radius-input:var(--radius-md);
  --radius-image:var(--radius-md);
  --radius-tile:var(--radius-md);
  --radius-card:var(--radius-lg);
  --radius-block:var(--radius-lg);
  --radius-panel:var(--radius-xl);
}

/* --- tokens/elevation.css --- */
/* Elevation — shadow-light by design; color blocks do the work of elevation.
   Level 3 (modal) is an implementation choice: the source documents only
   "stronger shadow + scrim". */
:root{
  --shadow-0:none;
  --shadow-1:none;                              /* level 1 is a hairline border, not a shadow */
  --shadow-soft:0 4px 16px rgba(0,0,0,0.06);    /* floating tiles, dropdowns */
  --shadow-modal:0 24px 64px rgba(0,0,0,0.24);  /* lightbox over --scrim-modal */

  --border-width-hairline:1px;
  --border-hairline-1:var(--border-width-hairline) solid var(--color-hairline);
  --border-hairline-2:var(--border-width-hairline) solid var(--color-hairline-soft);
}

/* --- tokens/motion.css --- */
/* Motion — INFERRED, not documented in the source material (the source captures
   static states only). Values chosen to match the system's restraint: short,
   no bounce, no long easing curves. Confirm against the live site before relying on them. */
:root{
  --duration-fast:120ms;   /* @kind other */
  --duration-base:200ms;   /* @kind other */
  --duration-slow:360ms;   /* @kind other */
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.4,0,0.2,1);     /* @kind other */
  --press-scale:0.97;      /* @kind other */
  --marquee-duration:32s;  /* @kind other */
}

/* ==========================================================================
   2. OVERRIDES — capa OnePress. Fuente: wordpress/onepress-child.css
   ========================================================================== */

/* ---- layer 1+2: the variables OnePress itself consumes ---- */
:root{--wp--preset--font-family--body:var(--font-sans);--wp--preset--font-family--heading:var(--font-sans);--wp--preset--font-family--open-sans:var(--font-sans);--wp--preset--font-family--raleway:var(--font-sans);--wp--preset--font-family--monospace:var(--font-mono);--wp--preset--color--primary:var(--color-primary);--wp--preset--color--secondary:var(--color-ink);--wp--preset--color--heading:var(--text-heading);--wp--preset--color--body-text:var(--text-body);--wp--preset--color--border:var(--color-hairline);--wp--preset--color--light:var(--color-surface-soft);--wp--style--global--content-size:var(--container-max);--wp--style--global--wide-size:var(--container-max)}

/* ---- global type + ground ---- */
body{font:var(--type-body);letter-spacing:var(--tracking-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);color:var(--text-heading);text-wrap:pretty}
h1{font:var(--type-display-lg);letter-spacing:var(--tracking-display-lg)}
h2{font:var(--type-headline);letter-spacing:var(--tracking-headline)}
h3{font:var(--type-subhead);letter-spacing:var(--tracking-subhead)}
h4,h5,h6{font:var(--type-body-lg);letter-spacing:var(--tracking-body-lg);text-transform:none}
a{color:var(--text-link);text-decoration:none}
a:hover,a:focus{color:var(--text-link);opacity:.6}
::selection{background:var(--block-vela);color:var(--color-ink)}

/* ---- container + section rhythm (intermediate scope) ---- */
#content-inside.container,.container{max-width:var(--container-max);padding-left:var(--gutter-desktop);padding-right:var(--gutter-desktop)}
.site-content{padding-top:var(--space-section);padding-bottom:var(--space-section)}
.breadcrumbs,.onepress-breadcrumb{font:var(--type-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;padding-top:var(--space-xl);border:0}

/* ---- buttons: every text CTA is a pill, sentence case ---- */
.btn,.button,button,input[type=submit],.wp-block-button__link{font:var(--type-button);letter-spacing:var(--tracking-button);text-transform:none;border:0;border-radius:var(--radius-button);padding:var(--pad-button);transition:opacity .16s ease-out,transform .16s ease-out,background .16s ease-out}
.btn:not([class*=-outline]),.button,button,input[type=submit],.wp-block-button__link,.btn-theme-primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.btn:not([class*=-outline]):hover,.button:hover,button:hover,input[type=submit]:hover,.wp-block-button__link:hover,.btn-theme-primary:hover{opacity:.86;color:var(--action-primary-fg)}
.btn[class*=-outline],.btn.btn-secondary-outline,.btn.btn-theme-primary-outline{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor;opacity:1}
.btn[class*=-outline]:hover,.btn.btn-secondary-outline:hover,.btn.btn-theme-primary-outline:hover{background:var(--color-canvas);color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-canvas);opacity:1}
.btn:active,.button:active,button:active{transform:scale(.97)}
.btn:focus-visible,.button:focus-visible,button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---- comunicados: the post list ---- */
.blog .list-article,.archive .list-article,.section-news .list-article,.page-template-template-blog .section-news .list-article{border-top:1px solid var(--color-hairline);border-bottom:0;padding:var(--space-xl) 0}
.blog .list-article:last-of-type,.archive .list-article:last-of-type{border-bottom:1px solid var(--color-hairline)}
.blog .site-main .list-article:first-of-type,.archive .site-main .list-article:first-child{border-top:0;padding-top:0}
.list-article-thumb{float:none;margin:0 0 var(--space-md);width:100%;display:block}
.list-article-thumb img{width:100%;height:auto;display:block;border-radius:var(--radius-image);aspect-ratio:21/9;object-fit:cover}
.list-article-thumb a img{transition:opacity .16s ease-out}
.list-article-thumb a img:hover{opacity:.8}
.list-article-content{float:none;overflow:visible!important}
.list-article-meta{font:var(--type-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;font-weight:400;color:var(--text-caption);margin-bottom:var(--space-sm)}
.list-article-meta a{color:inherit}
.list-article .entry-header{margin:0}
.list-article .entry-title{font:var(--type-headline);letter-spacing:var(--tracking-headline);margin:0 0 var(--space-sm);max-width:22ch}
.list-article .entry-excerpt{font:var(--type-body);letter-spacing:var(--tracking-body);max-width:64ch}
.list-article .entry-excerpt p{margin:0}

/* ---- comunicados: grid layout ---- */
.blog-posts-layout--grid .list-article,.blog-entry--grid .list-article{gap:var(--space-lg);border-top:0!important;border-bottom:0!important;padding:0;background:var(--surface-tile);border-radius:var(--radius-tile);padding:var(--pad-tile)}
.blog-posts-layout--grid .list-article-thumb img,.section-news--layout-grid .list-article-thumb img{aspect-ratio:4/3;border-radius:var(--radius-image)}
.blog-posts-layout--grid .list-article .entry-title,.section-news--layout-grid .list-article .entry-title{font:var(--type-body-lg);letter-spacing:var(--tracking-body-lg);font-weight:var(--weight-headline)}
.blog-posts-loop__row{row-gap:var(--space-lg)}

/* ---- comunicados: single ---- */
.single .entry-title{font:var(--type-display-lg);letter-spacing:var(--tracking-display-lg);max-width:20ch}
.single .entry-content{font:var(--type-body);letter-spacing:var(--tracking-body);max-width:68ch}
.single .entry-content p{margin:0 0 var(--space-lg)}
.entry-meta,.entry-footer{font:var(--type-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;color:var(--text-caption)}
.single .post-thumbnail img{border-radius:var(--radius-image)}

/* ---- the dark news section becomes the noche block ---- */
.section-news.section-inverse{background:var(--block-noche);color:var(--text-on-block-dark);border-radius:var(--radius-block);padding:var(--pad-block-section)}
.section-news.section-inverse h1,.section-news.section-inverse h2,.section-news.section-inverse h3,.section-news.section-inverse a,.section-news.section-inverse .list-article-meta{color:var(--text-on-block-dark)}
.section-news.section-inverse .list-article{border-top:1px solid rgba(255,255,255,.2)}

/* ---- navigation between post pages ---- */
.posts-navigation .nav-links a,.post-navigation .nav-links a{font:var(--type-button);letter-spacing:var(--tracking-button);border-radius:var(--radius-button);padding:var(--pad-button);display:inline-block;box-shadow:inset 0 0 0 1px var(--color-hairline)}
.posts-navigation .nav-links a:hover,.post-navigation .nav-links a:hover{background:var(--action-hover-tint);opacity:1}

/* ---- sidebar widgets ---- */
.widget-area .widget{margin-bottom:var(--space-xl)}
.widget-area .widget-title{font:var(--type-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;margin:0 0 var(--space-sm)}
.widget-area ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-xs)}
.widget-area li{font:var(--type-body-sm);letter-spacing:var(--tracking-body-sm)}

/* ---- forms ---- */
input[type=text],input[type=email],input[type=search],input[type=url],input[type=tel],textarea,select{font:var(--type-body-sm);letter-spacing:var(--tracking-body-sm);color:var(--text-body);background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--radius-input);padding:var(--pad-input);box-shadow:none}
input:focus,textarea:focus,select:focus{outline:2px solid var(--focus-ring);outline-offset:2px;border-color:var(--color-hairline)}

/* ---- mobile: blocks bleed, display type drops ---- */
@media (max-width:768px){#content-inside.container,.container{padding-left:var(--gutter-mobile);padding-right:var(--gutter-mobile)}.site-content{padding-top:var(--space-xxl);padding-bottom:var(--space-xxl)}.section-news.section-inverse{border-radius:0;margin-left:calc(-1 * var(--gutter-mobile));margin-right:calc(-1 * var(--gutter-mobile));padding:var(--space-lg)}}
@media (max-width:560px){h1,.single .entry-title{font-size:48px;letter-spacing:-0.72px}.btn,.button,.wp-block-button__link{width:100%;text-align:center}}