/* RUFCOM interface system. Brand manual v1.3, 20 October 2026.
   This file owns shared typography, controls, cards and page rhythm.
   Page-specific files own diagrams, photographs and tool layouts. */

/* Atoms: brand tokens and a single responsive type/spacing scale. */
:root {
  --color-primary: #fff3cf;
  --color-action-border: #b26f00;
  --color-primary-hover: #b26f00;
  --color-accent: #fd9e01;
  --color-accent-support: #cc8a00;
  --color-secondary: #082330;
  --color-background: #f7f3e8;
  --color-surface: #ffffff;
  --color-text: #26211b;
  --color-text-muted: #6f6558;
  --color-border: #d8cdb9;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-small: .875rem;
  --text-body: 1rem;
  --text-lead: 1rem;
  --text-card: 1.125rem;
  --text-section: clamp(1.375rem, 1.15rem + .8vw, 1.625rem);
  --text-page: clamp(1.375rem, 1.15rem + .8vw, 1.625rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --card-padding: var(--space-4);
  --section-spacing: var(--space-5);
  --radius-control: .5rem;
  --radius-card: .75rem;
  --width-page: 70rem;
  --width-reading: 55rem;
  --bg: var(--color-background);
  --surface: var(--color-surface);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-accent-support);
  --accent-strong: var(--color-primary-hover);
  --line: var(--color-border);
  --max: var(--width-page);
  --ruf-navy: var(--color-secondary);
}
body main :is(h1, .article-title) {

  margin: 0 0 var(--space-4);  max-width: 28ch;
}
body main h2,
body main :is(.section, .article-body, .section-heading, .feature-copy, .final-cta, .library-topic, .library-start) h2 {

  margin: var(--space-5) 0 var(--space-3);
}
body main .article-lead {     color:var(--color-text); }
body main .article-body > p {   color: var(--ink); }
body main :is(.article-byline, .source-note, figcaption) {   color: var(--muted); }
body main .eyebrow {      color:var(--color-text-muted); }
body main :is(.article-body, .ui-callout) a:not(.btn):not(.rf-button) {
  color: var(--color-secondary); text-decoration: underline; text-underline-offset: .2em;
}
body :is(main, .site-header, .compact-footer, .analytics-choice) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--color-secondary); outline-offset: 3px;
}


/* Brand motif: the same contours across editorial, library and utility templates.
   Keep the middle clear; opaque cards and diagrams retain clean surfaces. */
body main.guide-library, body main.container, body main > .outdoor-hero {
  position: relative; isolation: isolate;
}
body :is(.hero, .article-hero)::before,
body main > .section::before,
body main.guide-library::before,
body main.container::before,
body main > .outdoor-hero::before,
body.home-page main > .section:nth-of-type(odd)::before,
body.home-page main.container.section::before {
  content: ""; display: block; position: absolute; inset: 0;
  width: auto; height: auto; z-index: 0; pointer-events: none;
  background: url("../images/topographic.svg?v=2") repeat center top / 900px auto;
  mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 68%, #000);
  opacity: .16;
}
body main.guide-library > *, body main.container > *, body main > .outdoor-hero > * {
  position: relative; z-index: 1;
}
/* A contained utility page already has a motif; avoid a second overlapping layer. */
body main.container > .section::before,
body.home-page main.container > .section:nth-of-type(odd)::before { background-image: none; }
/* Legacy home rules hid odd sections with !important; keep their contours. */
body.home-page main > .section:nth-of-type(odd)::before,
body.home-page main.container.section::before { display: block !important; }
@media (max-width: 600px) {
  body :is(.hero, .article-hero)::before,
  body main > .section::before,
  body main.guide-library::before,
  body main.container::before,
  body main > .outdoor-hero::before,
  body.home-page main > .section:nth-of-type(odd)::before,
  body.home-page main.container.section::before {
    background-size: 620px auto; opacity: .12;
  }
}

/* Atoms: primary, secondary and text actions use the same dimensions. */
body .btn, body .rf-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; max-width: 100%; padding: .625rem 1rem; border: 1px solid var(--color-action-border);
  border-radius: var(--radius-control); background: var(--color-primary); color: var(--ink);
   text-align: center; white-space: normal;
  text-decoration: none; overflow-wrap: anywhere; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
body :is(.btn-primary, .rf-button--primary) {
  background: var(--color-primary); border-color: var(--color-action-border); color: var(--ink);
}
body :is(.btn-primary, .rf-button--primary):hover {
  background: var(--color-primary); border-color: var(--color-secondary); color: var(--ink); transform: none;
}
body :is(.btn-secondary, .rf-button--secondary) {
  background: var(--color-primary); border-color: var(--color-action-border); color: var(--ink);
}
body :is(.btn-secondary, .rf-button--secondary):hover {
  background: var(--color-primary); border-color: var(--color-secondary); color: var(--ink); transform: none;
}
body .rf-button--text {
  padding-inline: 0; border-color: transparent; background: transparent;
  text-decoration: underline; text-underline-offset: .2em;
}
body :is(.btn, .rf-button):disabled { cursor: default; opacity: .65; }
body .hero-actions .btn { padding: .625rem 1rem; }
body :is(.license-search, .repeater-search) :is(input, select) {
  min-height: 48px; padding: .625rem .875rem; border: 1px solid #817461;
  border-radius: var(--radius-control); background: var(--surface); color: var(--ink);
}
body .license-search .rf-button { padding: .625rem 1rem; }
body .license-search .rf-button--primary { background: var(--color-primary); color: var(--ink); border: 1px solid var(--color-action-border); }
body .license-search .rf-button--secondary { background: var(--color-primary); color: var(--ink); border: 1px solid var(--color-action-border); }
body .license-search .rf-button--primary:hover { border-color: var(--color-secondary); }
body .license-search th { background: var(--bg); color: var(--ink); }
body .license-search :is(th, td) { border-color: var(--line); }
body .license-search [role="search"] { align-items: end; }

/* Molecules: a compact information card, separate from a section heading. */
body main .ui-callout {
  margin: var(--space-4) 0; padding: var(--card-padding);
  border: 1px solid var(--line); border-left: 4px solid var(--color-accent-support);
  border-radius: var(--radius-card); background: var(--surface); color: var(--ink);
  box-shadow: none;
}
body main .ui-callout :is(h2, h3) {
  margin: 0 0 var(--space-2);
   color: var(--color-secondary);
}
body main .ui-callout > strong {
  display: block; margin-bottom: var(--space-2);
    color: var(--color-secondary);
}
body main .ui-callout strong { color: inherit;    }
body main .ui-callout > strong { color: var(--color-secondary);  }
body main .ui-callout :is(p, li) { color: var(--ink);    }
body main .ui-callout p { margin: 0; }
body main .ui-callout p + p { margin-top: var(--space-3); }
body main .ui-callout .path-line { color: var(--color-secondary);   margin-top: var(--space-3); }
body main .ui-callout .rf-button { margin-top: var(--space-4); }
body main .ui-callout .btn { color: var(--ink); }
body main .ui-callout .btn-primary { color: var(--ink); }

/* Molecules: shared card hierarchy without changing specialised diagrams. */
body main :is(.card, .equipment-card, .topic-card, .antenna-card, .category-card, .library-card, .download-card) {
  border-radius: var(--radius-card); padding: var(--card-padding); box-shadow: none;
}
body main :is(.card, .equipment-card, .topic-card, .antenna-card, .category-card, .library-card, .download-card, .guide-step, .license-step, .hero-panel) :is(h2, h3) {
     margin: 0 0 var(--space-3);
}
body main .download-card .btn { margin-top: var(--space-4); }
body main .q-card h2 {  margin: 0 0 var(--space-2); }
body main .repeater-card h3 {   margin: 0 0 var(--space-2); }

/* Organisms and templates: reading width and a regular section rhythm. */
body main .article-body { max-width: var(--width-reading); }
body main > .section, body main .scenic-section { padding-block: var(--section-spacing); }
body main > .article-hero { padding-block: var(--space-4) var(--space-2); }
body main > .article-hero + .section { padding-top: var(--space-2); }
body main :is(.section-heading, .feature-copy, .final-cta, .library-topic, .library-start) > h2,
body main .article-body > h2:first-child { margin-top: 0; }
body main .resource-section { padding-top: var(--space-4); }
body main .resource-grid {
  max-width: var(--width-reading); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);
}
body main .resource-grid > .ui-callout { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
body main .resource-grid .rf-button { margin-top: auto; align-self: flex-start; }
body main .resource-grid .ui-callout > p { margin-bottom: var(--space-4); }
body main :is(.library-grid, .download-grid, .cards) { gap: var(--space-3); align-items:start; }
body main .library-intro { padding-block: var(--space-4); }
body main .first-contact { margin-block: var(--space-5); }
body main .license-heading img { width: 44px; height: 44px; }
body .site-header .brand-logo { width: 180px; height: auto; }
body .compact-footer .footer-brand { width: 140px; height: auto; }
body .adventure-band .btn-secondary { color: var(--ink); }

@media (max-width: 700px) {
  :root { --card-padding:var(--space-3); --section-spacing:var(--space-4); }
  body main > .section, body main .scenic-section { padding-block: var(--section-spacing); }
  body main > .article-hero { padding-top: var(--space-4); }
  body main .resource-grid { grid-template-columns: minmax(0, 1fr); }
  body main :is(.ui-callout, .card, .library-card, .download-card) { padding: var(--card-padding); }
  body main .library-intro { padding-top: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body :is(.btn, .rf-button) { transition: none; }
}

/* Resource identity links: reusable icon and destination label. */
body main .rf-resource-link { display:flex; align-items:center; gap:var(--space-3); min-height:56px; margin-block:var(--space-2); }
body main .rf-resource-icon { flex:0 0 44px; width:44px; height:44px; object-fit:contain; }

/* Icon heading molecule: consistent title + decorative icon. */
body main .rf-icon-heading { display:flex; align-items:flex-start; gap:var(--space-2); }
body main .rf-heading-icon { flex:0 0 24px; width:24px; height:24px; object-fit:contain; }


/* Home section spacing: related resources retain a clear separation. */
body.home-page #links { margin-top:var(--space-6); }

/* Resource list row rhythm */
body.home-page #links .rf-resource-link { padding-block:var(--space-2); margin:0; }

body.home-page #links .card > .source-note { margin-top:var(--space-4);  color:var(--color-text-muted); }

/* Shared text roles for tool templates */
body main :is(.repeater-search,.license-search) label {
     color:var(--color-text);
}
body main :is(#repeater-help,.repeater-zone-note,.repeater-share-status,.simplex-source,.repeater-settings summary span) {
     color:var(--color-text-muted);
}
body main .repeater-text-button {     color:var(--color-secondary); }


/* Shared surfaces belong to components, independent of their page template. */
body.rf-site main :is(.card,.library-card,.category-card,.equipment-card,.antenna-card,.topic-card,.download-card,.link-card,.connector-card,.experience-card,.case-material-card,.plan-card,.pattern-card,.q-card,.adventure-card,.repeater-card) {
 background:var(--color-surface); color:var(--color-text); border:1px solid var(--color-border); border-radius:var(--radius-card); box-shadow:none; padding:var(--card-padding);
}
body.rf-site main :is(.card,.library-card,.equipment-card,.topic-card,.download-card,.antenna-card,.category-card,.link-card) { padding:var(--card-padding); }
body.rf-site main :is(.notice-box,.article-callout,.simple-path,.adventure-note,.ui-callout) {
 border:1px solid var(--color-border); border-left:4px solid var(--color-accent-support); border-radius:var(--radius-card); background:var(--color-surface); color:var(--color-text); box-shadow:none; padding:var(--card-padding);
}
body.rf-site main :is(.library-card,.download-card,.topic-card) { display:flex; flex-direction:column; align-items:flex-start; }
body.rf-site main :is(.library-card,.download-card,.topic-card) > :is(.btn,.rf-button,.library-read) { margin-top:auto; }
@media(max-width:700px) {
 body.rf-site main :is(.card,.library-card,.equipment-card,.topic-card,.download-card,.antenna-card,.category-card,.link-card,.notice-box,.article-callout,.simple-path,.adventure-note,.ui-callout) { padding:var(--card-padding); }
}

/* Compact resource molecule: the title is the single primary link. */
body.rf-site main .resource-card { padding:var(--card-padding); min-height:0; height:auto; display:block; }
body.rf-site main .resource-card > h3 { margin:0 0 var(--space-1); }
body.rf-site main .resource-card > h3 a { display:flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:3px; }
body.rf-site main .resource-card > p { margin:0; }
body.rf-site main .resource-card > .rf-icon-heading { display:flex; align-items:center; gap:var(--space-2); }
body.rf-site main .resource-card > .rf-icon-heading a { flex:1; }
body.rf-site main .related-guide { padding:var(--card-padding); box-shadow:none; border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-surface); }
body.rf-site main .related-guide > :is(h3,p) { margin:0 0 var(--space-2); }
body.rf-site main .related-guide-grid { gap:var(--space-3); align-items:start; margin-top:var(--space-3); }
body.rf-site main .resource-grid { align-items:start; gap:var(--space-3); }
body.rf-site main .resource-grid .ui-callout > p { margin-bottom:var(--space-2); }
body.rf-site main .section-heading { margin-bottom:var(--space-3); }
body.rf-site main .section-heading > :last-child { margin-bottom:0; }

/* Editorial entry and library use the same small section rhythm. */
body.rf-site main .article-hero p { margin-block:var(--space-2); }
body.rf-site main:has(.article-body) > .article-hero > .container:not(.article-hero-grid),
body.rf-site main:has(.article-body) > .guide-wayfinding { max-width:var(--width-reading); }
body.rf-site main .guide-wayfinding { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4); padding-block:var(--space-2); }
body.rf-site main .guide-wayfinding > a { margin:0; padding-block:var(--space-2); }
body.rf-site main .guide-index { flex:0 1 auto; max-width:100%; border:0; background:transparent; }
body.rf-site main .guide-index summary { min-height:44px; padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-control); background:var(--color-surface); }
body.rf-site main .guide-index[open] { flex-basis:100%; }
body.rf-site main .guide-index nav { padding:var(--space-2) var(--space-3); }
body.rf-site main .library-intro > h1 { margin:0 0 var(--space-2); }
body.rf-site main .library-intro > p { margin:0 0 var(--space-2); }
body.rf-site main .library-categories { margin-top:var(--space-3); gap:var(--space-2); }
body.rf-site main .library-categories a { min-height:44px; padding:var(--space-2) var(--space-3); }
body.rf-site main .library-topic { padding-block:var(--space-3); }
body.rf-site main .library-topic > h2 { margin:0 0 var(--space-2); }
body.rf-site main .library-start { padding:var(--space-3) var(--space-4); margin-block:var(--space-2); }
body.rf-site main .library-start > p { margin:0; }
body.rf-site main .download-grid { margin:var(--space-3) 0; }
body.rf-site main .download-card { display:block; }
body.rf-site main .download-card > p { margin:0 0 var(--space-2); }
body.rf-site main .download-card > h3 { margin-bottom:var(--space-2); }
body.rf-site main .download-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
body.rf-site main .download-actions > :is(.btn,.rf-button) { display:inline-flex; width:auto; margin:0; }
body.rf-site main .download-card details { margin-top:var(--space-2); padding-top:0; }
body.rf-site main .download-card summary { padding-block:var(--space-2); }
body.rf-site main .download-help { padding:0; margin-block:var(--space-2); background:transparent; }
body.rf-site main .download-help > summary { min-height:44px; padding-block:var(--space-2); cursor:pointer; }
body.rf-site main .article-body > .tool-warning:first-child { margin-top:0; }
body.rf-site main .article-body > :is(.tool-warning,.tool-callout,.simple-definition) { margin-block:var(--space-4); padding:var(--card-padding); }
body.rf-site main .article-body > figure { margin-block:var(--space-4); }

/* Editorial heroes share the light reading surface of the approved home. */
body.rf-site main .adventure-band { background:var(--color-background); color:var(--color-text); }

/* Typography contract — Manual de marca Rufcom v1.1.
   Roles describe function; inline fragments inherit the component's size. */
body.rf-site { font:400 var(--text-body)/1.6 var(--font-ui); color:var(--color-text); background:var(--color-background); }
body.rf-site :is(main,.site-header,.compact-footer,.analytics-choice) { font:inherit; }
body.rf-site [data-rf-role] { font-family:var(--font-ui); text-transform:none; letter-spacing:0; }
body.rf-site :is([data-rf-role="page-title"],[data-rf-role="section-title"]) {
 font-size:var(--text-section); font-weight:700; line-height:1.3; letter-spacing:-.015em; color:var(--color-text);
}
body.rf-site [data-rf-role="card-title"] {
 font-size:var(--text-card); font-weight:700; line-height:1.35; color:var(--color-secondary);
}
body.rf-site [data-rf-role="page-title"] { max-width:40ch; margin:0 0 var(--space-2); }
body.rf-site [data-rf-role="section-title"] { margin:var(--space-5) 0 var(--space-3); }
body.rf-site [data-rf-role="card-title"] { margin:0 0 var(--space-3); }
body.rf-site :is([data-rf-role="body"],[data-rf-role="control"]) {
 font-size:var(--text-body); font-weight:400; line-height:1.6; color:var(--color-text);
}
body.rf-site [data-rf-role="note"] {
 font-size:var(--text-small); font-weight:400; line-height:1.55; color:var(--color-text-muted);
}
body.rf-site [data-rf-role="eyebrow"] {
 font-size:var(--text-small); font-weight:600; line-height:1.5; letter-spacing:.03em; color:var(--color-text-muted); margin:0 0 var(--space-3);
}
body.rf-site :is(a,span,small,strong,em,b,i,code,summary,dt,dd,td,th):not([data-rf-role]) {
 font-family:inherit; font-size:inherit;
}
body.rf-site :is(strong,b) { font-weight:700; }
body.rf-site main :is(a,[data-rf-role="card-title"] a):not(.btn):not(.rf-button):not(.library-categories a):not(.read-guide) { color:var(--color-secondary); }
body.rf-site main :is([data-rf-role="note"],[data-rf-role="eyebrow"]) a:not(.btn):not(.rf-button) { color:inherit; font-weight:inherit; }
body.rf-site main :is(.article-lead,.hero-copy) { color:var(--color-text); font-weight:400; }
body.rf-site main :is(label,button,input,select,textarea),
body.rf-site :is(.btn,.rf-button,.read-guide) { font-family:var(--font-ui); font-size:var(--text-body); line-height:1.4; }
body.rf-site :is(label,button,.btn,.rf-button,.read-guide) { font-weight:600; }
body.rf-site button[data-rf-role="control"] { line-height:1.4; }
body.rf-site main summary[data-rf-role="control"] { font-weight:600; color:var(--color-secondary); }
body.rf-site main :is(dt,dd,td,th,caption) { font-size:var(--text-body); line-height:1.6; color:var(--color-text); }
body.rf-site main :is(dt,dd,td,caption) { font-weight:400; }
body.rf-site main th { font-weight:600; }
body.rf-site :is(.btn-primary,.rf-button--primary) { color:var(--color-text); }
body.rf-site :is(.btn-secondary,.rf-button--secondary) { color:var(--color-text); }
body.rf-site .rf-button--text { color:var(--color-secondary); }
body.rf-site main :is(.repeater-zone,.repeater-region-count,.repeater-settings summary span) {
 font-size:var(--text-small); font-weight:400; line-height:1.55; color:var(--color-text-muted);
}
body.rf-site .site-header #mainNav :is(a,summary) {
 font-family:var(--font-ui); font-size:var(--text-body); font-weight:400; line-height:1.6; color:var(--color-secondary);
}
body.rf-site .site-header #mainNav :is(a:hover,a[aria-current="page"],details[open]>summary) { color:var(--color-secondary); background:var(--color-background); }
body.rf-site .site-header #mainNav summary::after { font:inherit; }
body.rf-site .compact-footer :is(a,.analytics-settings) {
 font-family:var(--font-ui); font-size:var(--text-body); font-weight:400; line-height:1.6; color:var(--color-secondary);
}
body.rf-site .compact-footer [data-rf-role="note"] { font-size:var(--text-small); }
body.rf-site .analytics-choice { background:var(--color-surface); color:var(--color-text); border-color:var(--color-border); }
body.rf-site .analytics-choice p { color:var(--color-text); font:400 var(--text-body)/1.6 var(--font-ui); }
body.rf-site .analytics-choice a { color:var(--color-secondary); }
body.rf-site .analytics-choice button { font:600 var(--text-body)/1.4 var(--font-ui); background:var(--color-primary); color:var(--color-text); border-color:var(--color-action-border); }
body.rf-site .analytics-choice button:hover { background:var(--color-primary); color:var(--color-text); border-color:var(--color-secondary); }
body.rf-site .compact-footer .footer-email { overflow-wrap:anywhere; }