/* ==========================================================================
   Peter Martin child template — custom CSS
   Supplements less/theme.petermartin.less. Keep rules minimal here;
   prefer LESS variables in theme.petermartin.less.
   ========================================================================== */

/* Web fonts. Production self-hosts these under the parent yootheme/fonts/;
   this @import is the portable fallback (Google Fonts). */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root {
    --color-primary:      #22578d;
    --color-secondary:    #0e3a64;  /* dark surfaces (sections/offcanvas) */
    --color-secondary-btn:#c33214;  /* secondary BUTTON = brand orange */
    --color-3:            #13243a;
    --color-4:            #eef3f8;
    --color-5:            #5b6b7b;
    --color-6:            #1b2733;
    --color-accent:       #f03c1f;  /* graphic/large-display orange */
    --color-accent-strong:#c33214;  /* accessible orange — links/CTAs/hover */
    --color-topic-joomla: #22578d;
    --color-topic-linux:  #236b43;
    --color-topic-other:  #f03c1f;
    --color-bg:           #ffffff;
    --color-text:         #1b2733;
    --color-muted:        #5b6b7b;
    --color-border:       #5b6b7b;
}

/* Skip-link target — keep main landmark scroll-margin so anchor lands cleanly
   (WCAG 2.4.11 Focus Not Obscured). */
#main, main {
    scroll-margin-top: 96px;
}

/* Brand wordmark accent: the ".nl" of the logo uses the orange. If the logo
   is rendered as live text anywhere, this keeps it on-brand. */
.pm-accent { color: var(--color-accent); }

/* Favicon: upload assets/favicon.svg (+ apple-touch-icon.png 180×180) via
   YOOtheme → Customizer → Settings → Favicon / Touch Icon. The mark is the
   outlined `pm` that matches the primary wordmark (logo I). */