/*
 * Mountain Diary — the page itself (Site\Frame\SiteStyles): type, links in running text, text
 * selection, keyboard focus and the page title, in design D "Denik". Colours, families and
 * radius come from the design tokens; this file writes no colour values. The page background and
 * the body text need no rule here: the theme paints them from its own variables, which the
 * tokens point at ours, and the body, menus and form controls get the UI family the same way.
 */

/* 1. Type */

/* Headings down to h4 are set in the serif; h5 and h6 stay in the UI family
   as small labels. The body selector in front lifts the rule just above the
   bare h1-h6 rules of the theme and of WordPress, without !important, so a
   snippet can still give a heading of its own another family. */
body :is(h1, h2, h3, h4) {
    font-family: var(--md-font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Captions under pictures in running text. The theme paints them with
   --color-theme-grey, which in its own palette is a background tint, so they
   read at 1.3:1; the muted text colour reads in both modes. The body selector
   in front outranks the theme's .entry-content figcaption, which loads later. */
body .entry-content figcaption {
    color: var(--md-text-muted);
}

/* 2. Links in running text */

/* A plain link in a paragraph, list or table of an article or a comment gets
   the accent colour and an underline, so it does not rely on colour alone.
   Links with a class are components (cards, buttons, tags) and keep their own
   look. The theme colours every link in .entry-content through a selector of
   five classes (bx-tokens-applied.css), so the colour needs !important; the
   rule is narrow enough to touch nothing else. */
:is(.entry-content, .comment-content) :is(p, li, dd, td, blockquote, figcaption) a:not([class]) {
    color: var(--md-accent-text) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

:is(.entry-content, .comment-content) :is(p, li, dd, td, blockquote, figcaption) a:not([class]):hover {
    text-decoration-thickness: 2px;
}

/* 3. Text selection and keyboard focus */

::selection {
    background-color: var(--md-accent-soft);
    color: var(--md-text);
}

/* Only keyboard focus draws the ring; components may draw their own. */
:focus-visible {
    outline: 2px solid var(--md-focus);
    outline-offset: 2px;
}

/* 4. Page title */

/* The theme's title band under the header is switched off (MD – Page titles).
   Text pages show their title as the headline of the article instead; its
   family and weight come from section 1. */
body .md-page-title {
    margin: 40px 0 24px;
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1.1;
}