/*
Theme Name: r.angle
Theme URI: https://www.rangle.de/
Description: Individuelles WordPress-Theme für r.angle / H.S.S. News.
Author: Rico Meier / r.angle
Author URI: https://www.rangle.de/
Version: 1.0
Text Domain: rangle
*/

/* =========================================================
VARIABLES
========================================================= */

:root {
--bg: #0f0f0f;
--card-bg: #1a1a1a;
--text: #f2f2f2;
--gray: #888;
--border: #333;
--accent: rgb(213, 76, 100);

```
--content-width: 1100px;
--wide-width: 1340px;

--space-xs: 10px;
--space-sm: 20px;
--space-md: 30px;
--space-lg: 50px;
--space-xl: 70px;
--space-xxl: 100px;
```

}

/* =========================================================
RESET / BASE
========================================================= */

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
padding: 0;

```
background: var(--bg);
color: var(--text);

font-family: "Montserrat", Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;

-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
```

}

/* =========================================================
TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;

```
color: var(--text);

font-family: "Playfair Display", Georgia, serif;
font-weight: 500;
line-height: 1.15;
```

}

h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
}

h2 {
font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
font-size: 1.4rem;
}

p {
margin-top: 0;
margin-bottom: 1.2rem;
}

strong {
font-weight: 600;
}

small {
font-size: 0.875rem;
}

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

/* =========================================================
LINKS
========================================================= */

a {
color: var(--text);
text-decoration: none;
transition:
color 0.2s ease,
border-color 0.2s ease,
background-color 0.2s ease;
}

a:hover,
a:focus {
color: var(--accent);
}

a:focus-visible {
outline: 1px solid var(--accent);
outline-offset: 3px;
}

/* =========================================================
WORDPRESS GLOBAL LAYOUT
========================================================= */

.wp-site-blocks {
min-height: 100vh;
}

.wp-block-group,
.wp-block-columns,
.wp-block-cover,
.wp-block-media-text {
box-sizing: border-box;
}

.wp-block-group.alignfull {
width: 100%;
}

.wp-block-group.alignwide {
max-width: var(--wide-width);
margin-left: auto;
margin-right: auto;
}

.wp-block-post-content {
max-width: var(--content-width);
margin-left: auto;
margin-right: auto;
}

/* =========================================================
HEADER
========================================================= */

.site-header,
.wp-block-template-part:first-child {
background: var(--bg);
}

header.wp-block-template-part {
border-bottom: 1px solid var(--border);
}

.wp-block-site-title {
margin: 0;
}

.wp-block-site-title a {
color: var(--text);
font-family: "Montserrat", Arial, sans-serif;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.5px;
text-transform: none;
}

.wp-block-site-title a:hover {
color: var(--accent);
}

/* =========================================================
NAVIGATION
========================================================= */

.wp-block-navigation {
font-family: "Montserrat", Arial, sans-serif;
}

.wp-block-navigation-item__content {
color: var(--text);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.2px;
}

.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus {
color: var(--accent);
}

.wp-block-navigation__responsive-container {
background: var(--bg) !important;
color: var(--text);
}

/* =========================================================
HERO / INTRO
============