/*
Theme Name: Service Carte Grise Internet
Description: Thème enfant GeneratePress de servicecartegriseinternet.fr, guide indépendant de la carte grise, style « Cerfa » : papier, encre, bleu cerfa, surligneur ; Public Sans et IBM Plex Mono hébergées ; styles de blocs du contrat de classes (is-style-scgi-certificat, -taxes, -section, -kicker, -officiel, -fiche). Présentation seulement, socle Fox embarqué (fox-socle/).
Author: Fox
Template: generatepress
Version: 1.0.2
Fox Socle: 1.3.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: servicecartegriseinternet-theme
*/

/*
 * « Cerfa » : the administrative form. Colours come from the GeneratePress
 * palette (inc/site.php): var(--contrast) ink, var(--accent) cerfa blue,
 * var(--base) pale blue, var(--base-2) paper, var(--contrast-3) rule,
 * var(--highlight) highlighter (always under ink text). Mobile first; no text
 * under 12px; light only (the socle ships no night palette).
 *
 * Class contract (theme <-> content), see inc/presentation.php:
 *   is-style-scgi-certificat  Fox Blocks link-cards  certificate grid
 *   is-style-scgi-taxes       core table / Fox comparison-table  Y.1 ... Y.6
 *   is-style-scgi-section     core group   numbered section (auto « § n »)
 *   is-style-scgi-kicker      core paragraph  mono kicker
 *   is-style-scgi-officiel    Fox Blocks expert-tip  official procedure box
 *   is-style-scgi-fiche       core group   fiche of a field or a prefecture
 *   mark                      highlighter
 */
:root {
	--scgi-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--scgi-sans: "Public Sans", system-ui, sans-serif;
	--scgi-hl: var(--highlight, #FFE36E);
	color-scheme: light;
}

/* Base */
body {
	font-family: var(--scgi-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .entry-title, .main-title {
	font-family: var(--scgi-sans);
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--contrast);
}
h1, .entry-title { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem); line-height: 1.1; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.85rem); line-height: 1.18; }
h3 { font-size: 1.2rem; line-height: 1.25; }
.entry-content > p, .entry-content > ul, .entry-content > ol { max-width: 72ch; }
.entry-content a:not([class]) { text-decoration-thickness: 1px; text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
code, kbd, samp, .scgi-code {
	font-family: var(--scgi-mono);
	font-weight: 500;
	font-size: .9em;
}
:not(pre) > code {
	padding: .05em .35em;
	background: var(--base);
	color: var(--contrast);
	border-radius: 0;
}

/* Highlighter. Plain <mark>, and the core highlight format whose inline
   style is a transparent background. */
mark,
mark.has-inline-color[style*="rgba(0, 0, 0, 0)"],
mark.has-inline-color[style*="rgba(0,0,0,0)"] {
	background-color: var(--scgi-hl) !important;
	color: var(--contrast);
	padding: 0 .2em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Header: logo (or site name), 2px ink rule. */
.site-header .site-logo img, .site-header .header-image { height: 48px; width: auto; max-width: min(100%, 300px); }
@media (max-width: 768px) { .site-header .site-logo img, .site-header .header-image { height: 40px; } }
.site-header { border-bottom: 2px solid var(--contrast); }
.inside-header { padding-top: 12px; padding-bottom: 12px; }
.main-title { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.main-title a { color: var(--contrast); text-decoration: none; }
.scgi-tag {
	display: inline-block;
	margin-left: .5em;
	padding: 1px 6px;
	border: 1.5px solid var(--contrast);
	font: 500 12px/1.4 var(--scgi-mono);
	letter-spacing: .03em;
	text-transform: uppercase;
	vertical-align: .15em;
	white-space: nowrap;
}
.main-navigation .main-nav ul li a { font-size: .95rem; font-weight: 600; }
.main-navigation .main-nav > ul > li > a { box-shadow: inset 0 -2px 0 transparent; }
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li[class*="current"] > a { box-shadow: inset 0 -2px 0 var(--accent); }
.menu-toggle { font-weight: 600; }

/* Content frame: paper, no card. */
.one-container .site-content, .separate-containers .inside-article { padding: 24px 16px; }
.entry-header { margin-bottom: 1.25rem; }
.entry-meta { font: 500 12px/1.5 var(--scgi-mono); color: var(--contrast-2); }

/* Footer: rule on top, mono small print. */
.site-info { border-top: 2px solid var(--contrast); font: 500 12.5px/1.6 var(--scgi-mono); text-align: left; }
.site-info .inside-site-info { display: block; }
.scgi-foot-menu { margin-bottom: .6em; }
.scgi-foot-links { display: flex; flex-wrap: wrap; gap: .4em 1.5em; margin: 0; padding: 0; list-style: none; }
.scgi-foot-links a { color: var(--contrast); text-decoration: underline; text-underline-offset: 2px; }
.scgi-foot-links a:hover { color: var(--accent); }
.scgi-foot-line { display: block; color: var(--contrast); }
.scgi-foot-end { display: block; margin-top: .35em; }
.footer-widgets { border-top: 1px solid var(--contrast-3); }

/* Kicker: small mono line in capitals. */
.is-style-scgi-kicker,
p.is-style-scgi-kicker {
	margin: 0 0 .5rem;
	font: 500 12px/1.5 var(--scgi-mono);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--accent);
}
.is-style-scgi-kicker + h1, .is-style-scgi-kicker + h2, .is-style-scgi-kicker + h3 { margin-top: 0; }

/* Numbered section: ink rule on top, « § n » kicker counted by the theme. */
.entry-content, .site-main { counter-reset: scgi-section; }
.is-style-scgi-section {
	counter-increment: scgi-section;
	border-top: 2px solid var(--contrast);
	padding-top: 1rem;
	margin-top: 2rem;
}
/* GeneratePress pads the inner container of every group (30-40px): not here. */
.site-main .is-style-scgi-section > .wp-block-group__inner-container,
.site-main .is-style-scgi-fiche > .wp-block-group__inner-container { padding: 0; }
.is-style-scgi-section::before {
	content: "\00A7\00A0" counter(scgi-section);
	display: block;
	margin-bottom: .4rem;
	font: 500 12px/1.5 var(--scgi-mono);
	letter-spacing: .04em;
	color: var(--accent);
}
.is-style-scgi-section > :first-child,
.is-style-scgi-section > .wp-block-group__inner-container > :first-child { margin-top: 0; }
.wp-block-columns > .wp-block-column > .is-style-scgi-section { margin-top: 0; height: 100%; }
.is-style-scgi-section a:not([class]) { font-weight: 600; }

/* Fiche of a field or a prefecture: highlighter edge, code in a badge. */
.is-style-scgi-fiche {
	background: var(--base-3);
	border: 1px solid var(--contrast-3);
	border-left: 6px solid var(--scgi-hl);
	padding: 1rem 1rem 1rem 1.1rem;
	margin: 1.5rem 0;
}
.is-style-scgi-fiche > :first-child,
.is-style-scgi-fiche > .wp-block-group__inner-container > :first-child { margin-top: 0; }
.is-style-scgi-fiche > :last-child,
.is-style-scgi-fiche > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.is-style-scgi-fiche code {
	display: inline-block;
	padding: 1px 7px;
	background: var(--scgi-hl);
	border: 1.5px solid var(--contrast);
	color: var(--contrast);
	font-size: .85em;
	line-height: 1.35;
	vertical-align: .08em;
}

/* Official procedure box (Fox Blocks expert-tip). */
.fxb-expert-tip.is-style-scgi-officiel {
	background: var(--base);
	border: 1.5px solid var(--accent);
	border-left-width: 6px;
	border-radius: 0;
	color: var(--contrast);
	padding: 1rem;
	gap: .75rem;
}
.fxb-expert-tip.is-style-scgi-officiel::before { display: none; }
.is-style-scgi-officiel .fxb-expert-tip__icon { color: var(--accent); }
.is-style-scgi-officiel .fxb-expert-tip__title { font-family: var(--scgi-sans); font-weight: 800; color: var(--contrast); }
.is-style-scgi-officiel .fxb-expert-tip__content { font-size: 1rem; }
.is-style-scgi-officiel a { color: var(--accent); font-weight: 600; }

/* Taxes Y.1 ... Y.6: core table (figure.wp-block-table) or Fox comparison-table.
   First cell = code (mono blue), last cell = amount (right), last row = total. */
.is-style-scgi-taxes { margin: 1.5rem 0; }
.is-style-scgi-taxes table {
	width: 100%;
	border-collapse: collapse;
	background: var(--base-3);
	border: 1.5px solid var(--contrast-3);
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
}
.is-style-scgi-taxes th, .is-style-scgi-taxes td,
.is-style-scgi-taxes .fxb-cell {
	padding: .55rem .6rem;
	border: 0;
	border-bottom: 1px solid var(--contrast-3);
	text-align: left;
	vertical-align: top;
	background: transparent;
	color: var(--contrast);
}
.is-style-scgi-taxes thead th, .is-style-scgi-taxes thead td {
	font: 500 12px/1.4 var(--scgi-mono);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--contrast-2);
	border-bottom: 1.5px solid var(--contrast);
}
.is-style-scgi-taxes tr > :first-child {
	font-family: var(--scgi-mono);
	font-weight: 500;
	color: var(--accent);
	white-space: nowrap;
	width: 1%;
}
.is-style-scgi-taxes tr > :last-child:not(:first-child) { text-align: right; white-space: nowrap; }
.is-style-scgi-taxes tbody tr:last-child > *,
.is-style-scgi-taxes tfoot tr > * {
	background: var(--base);
	font-weight: 700;
	border-top: 1.5px solid var(--contrast);
	border-bottom: 0;
}
.is-style-scgi-taxes tbody tr:last-child > :first-child,
.is-style-scgi-taxes tfoot tr > :first-child { color: var(--contrast); }
.is-style-scgi-taxes figcaption, .is-style-scgi-taxes .wp-element-caption {
	font: 500 12px/1.5 var(--scgi-mono);
	color: var(--contrast-2);
	text-align: left;
}
.is-style-scgi-taxes .fxb-cell--winner::before { display: none; }

/* Certificate grid (Fox Blocks link-cards): one card = one cell, title = the
   code (« P.6 »), description = the example value. Highlighter on hover and
   keyboard focus. The whole cell is the link. */
.fxb-link-cards.is-style-scgi-certificat { margin: 1.5rem 0; }
.is-style-scgi-certificat .fxb-link-cards__heading {
	display: block;
	margin: 0 0 .5rem;
	font: 500 12px/1.5 var(--scgi-mono);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--accent);
}
.is-style-scgi-certificat .fxb-link-cards__list,
.is-style-scgi-certificat.fxb-link-cards--grid .fxb-link-cards__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3px;
	padding: 8px;
	background: var(--base-3);
	border: 1.5px solid var(--contrast-3);
}
.is-style-scgi-certificat .fxb-link-cards__list > li { min-width: 0; }
.is-style-scgi-certificat .fxb-lcard {
	position: relative;
	height: 100%;
	background: var(--base-3);
	border: 1px solid var(--contrast-3);
	border-radius: 0;
	box-shadow: none;
	transform: none;
	transition: background-color .12s ease, border-color .12s ease;
}
.is-style-scgi-certificat .fxb-lcard__media-link,
.is-style-scgi-certificat .fxb-lcard__media,
.is-style-scgi-certificat .fxb-lcard__cat,
.is-style-scgi-certificat .fxb-lcard__meta,
.is-style-scgi-certificat .fxb-lcard__cta { display: none; }
.is-style-scgi-certificat .fxb-lcard__body { gap: 2px; padding: 6px 8px 7px; }
.is-style-scgi-certificat .fxb-lcard__title-link { position: static; text-decoration: none; }
.is-style-scgi-certificat .fxb-lcard__title-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.is-style-scgi-certificat .fxb-lcard__title {
	font: 500 12px/1.35 var(--scgi-mono);
	color: var(--accent);
}
.is-style-scgi-certificat .fxb-lcard__excerpt {
	font: 500 13px/1.4 var(--scgi-mono);
	color: var(--contrast);
	overflow-wrap: anywhere;
}
.is-style-scgi-certificat .fxb-lcard__excerpt p { margin: 0; }
.is-style-scgi-certificat .fxb-lcard:hover,
.is-style-scgi-certificat .fxb-lcard:focus-within {
	background: var(--scgi-hl);
	border-color: var(--scgi-hl);
	box-shadow: none;
	transform: none;
}
.is-style-scgi-certificat .fxb-lcard:hover .fxb-lcard__title,
.is-style-scgi-certificat .fxb-lcard:focus-within .fxb-lcard__title { color: var(--contrast); }
.is-style-scgi-certificat .fxb-lcard:focus-within { outline: 2px solid var(--contrast); outline-offset: 1px; z-index: 2; }
.is-style-scgi-certificat .fxb-lcard__title-link:focus-visible { outline: 0; }

/* Larger screens */
@media (min-width: 600px) {
	.is-style-scgi-certificat .fxb-link-cards__list,
	.is-style-scgi-certificat.fxb-link-cards--grid .fxb-link-cards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px; }
	.is-style-scgi-fiche { padding: 1.25rem 1.5rem; }
	.is-style-scgi-officiel.fxb-expert-tip { padding: 1.1rem 1.25rem; }
	.is-style-scgi-taxes th, .is-style-scgi-taxes td, .is-style-scgi-taxes .fxb-cell { padding: .6rem .85rem; }
}
@media (min-width: 769px) {
	.one-container .site-content, .separate-containers .inside-article { padding: 32px 24px 40px; }
	.inside-header { padding-top: 14px; padding-bottom: 14px; }
	.main-title { font-size: 1.1rem; }
}
@media (min-width: 960px) {
	.is-style-scgi-certificat .fxb-link-cards__list,
	.is-style-scgi-certificat.fxb-link-cards--grid .fxb-link-cards__list { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.is-style-scgi-certificat .fxb-lcard { transition: none; }
}
@media print {
	.site-header, .site-info { border-color: #000; }
	mark { background: none !important; text-decoration: underline; }
}
