/*
Theme Name: Tour de Force GP Child
Template: generatepress
Version: 1.1.0
Description: GeneratePress child theme generated by the Phasma migration rail from the source site's own stylesheets. Reproduces the global look; see the engagement's draft record for what was not carried.
*/

/* Design tokens — written by the Phasma migration rail from the signed design brief.
 *
 * PLATFORM-OWNED. Every value below was validated before it was written and none of it is
 * model output; the stylesheet under it refers to these by name. Polish the site here:
 * change a value once and every rule that uses it follows. Values the brief did not give
 * (or that it gave badly — see the draft record's `brief_unhonoured`) carry the neutral
 * default, so the site renders either way.
 */
:root {
	--phasma-color-primary: #172e55;
	--phasma-color-secondary: #0b1a2f;
	--phasma-color-background: #f5f7fa;
	--phasma-color-text: #0b1a2f;
	--phasma-color-muted: #878788;
	--phasma-color-accent: #4a4040;
	--phasma-color-on-primary: #ffffff;
	--phasma-color-on-secondary: #ffffff;
	--phasma-font-heading: DM Serif Display;
	--phasma-font-body: Inter;
	--phasma-size-body: 17px;
	--phasma-line-body: 1.7;
	--phasma-weight-body: 400;
	--phasma-family-body: Inter;
	--phasma-size-caption: 12px;
	--phasma-line-caption: 1.4;
	--phasma-weight-caption: 400;
	--phasma-family-caption: Inter;
	--phasma-size-h1: 52px;
	--phasma-line-h1: 1.15;
	--phasma-weight-h1: 400;
	--phasma-family-h1: DM Serif Display;
	--phasma-size-h2: 38px;
	--phasma-line-h2: 1.2;
	--phasma-weight-h2: 400;
	--phasma-family-h2: DM Serif Display;
	--phasma-size-h3: 28px;
	--phasma-line-h3: 1.25;
	--phasma-weight-h3: 400;
	--phasma-family-h3: DM Serif Display;
	--phasma-size-h4: 22px;
	--phasma-line-h4: 1.3;
	--phasma-weight-h4: 600;
	--phasma-family-h4: Inter;
	--phasma-size-label: 13px;
	--phasma-line-label: 1.4;
	--phasma-weight-label: 500;
	--phasma-family-label: Inter;
	--phasma-size-small: 15px;
	--phasma-line-small: 1.6;
	--phasma-weight-small: 400;
	--phasma-family-small: Inter;
	--phasma-container-max: 1200px;
	--phasma-grid-columns: 12;
	--phasma-space-1: 8px;
	--phasma-space-2: 16px;
	--phasma-space-3: 24px;
	--phasma-space-4: 40px;
	--phasma-space-5: 64px;
}

@media (max-width: 782px) {
	:root {
		--phasma-size-body: 16px;
		--phasma-size-h1: 44px;
		--phasma-size-h2: 33px;
		--phasma-size-h3: 25px;
	}
}

/* ============================================================
   Tour de Force — GeneratePress Child Theme
   Target design: DM Serif Display headings / Inter body
   Primary palette: navy #172e55, deep #0b1a2f, bg #f5f7fa
   ============================================================ */

/* ------------------------------------------------------------
   BASE — body, typography foundation
   ------------------------------------------------------------ */

body {
    font-family: var(--phasma-font-body), sans-serif;
    font-size: var(--phasma-size-body);
    font-weight: var(--phasma-weight-body);
    line-height: var(--phasma-line-body);
    color: var(--phasma-color-text);
    background-color: var(--phasma-color-background);
}

/* ------------------------------------------------------------
   HEADINGS
   ------------------------------------------------------------ */

h1,
.h1 {
    font-family: var(--phasma-family-h1), serif;
    font-size: var(--phasma-size-h1);
    font-weight: var(--phasma-weight-h1);
    line-height: var(--phasma-line-h1);
    color: var(--phasma-color-primary);
    margin-bottom: var(--phasma-space-3);
}

h2,
.h2 {
    font-family: var(--phasma-family-h2), serif;
    font-size: var(--phasma-size-h2);
    font-weight: var(--phasma-weight-h2);
    line-height: var(--phasma-line-h2);
    color: var(--phasma-color-primary);
    margin-bottom: var(--phasma-space-2);
}

h3,
.h3 {
    font-family: var(--phasma-family-h3), serif;
    font-size: var(--phasma-size-h3);
    font-weight: var(--phasma-weight-h3);
    line-height: var(--phasma-line-h3);
    color: var(--phasma-color-primary);
    margin-bottom: var(--phasma-space-2);
}

h4,
.h4 {
    font-family: var(--phasma-family-h4), sans-serif;
    font-size: var(--phasma-size-h4);
    font-weight: var(--phasma-weight-h4);
    line-height: var(--phasma-line-h4);
    color: var(--phasma-color-primary);
    margin-bottom: var(--phasma-space-1);
}

h5,
h6,
.h5,
.h6 {
    font-family: var(--phasma-family-body), sans-serif;
    font-size: var(--phasma-size-small);
    font-weight: var(--phasma-weight-h4);
    line-height: var(--phasma-line-small);
    color: var(--phasma-color-primary);
    margin-bottom: var(--phasma-space-1);
}

/* ------------------------------------------------------------
   BODY TYPE ROLES — small, label, caption
   ------------------------------------------------------------ */

small,
.small {
    font-family: var(--phasma-family-small), sans-serif;
    font-size: var(--phasma-size-small);
    font-weight: var(--phasma-weight-small);
    line-height: var(--phasma-line-small);
}

.label,
label {
    font-family: var(--phasma-family-label), sans-serif;
    font-size: var(--phasma-size-label);
    font-weight: var(--phasma-weight-label);
    line-height: var(--phasma-line-label);
}

figcaption,
caption,
.caption {
    font-family: var(--phasma-family-caption), sans-serif;
    font-size: var(--phasma-size-caption);
    font-weight: var(--phasma-weight-caption);
    line-height: var(--phasma-line-caption);
    color: var(--phasma-color-muted);
}

/* ------------------------------------------------------------
   LINKS
   ------------------------------------------------------------ */

a {
    color: var(--phasma-color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--phasma-color-accent);
    text-decoration: underline;
}

/* ------------------------------------------------------------
   LAYOUT — container, page wrapper
   ------------------------------------------------------------ */

.inside-container,
.container,
.grid-container {
    max-width: var(--phasma-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--phasma-space-3);
    padding-right: var(--phasma-space-3);
}

/* Section backgrounds are allowed to be edge-to-edge;
   inner content is constrained above. */
.site-main {
    background-color: var(--phasma-color-background);
}

/* ------------------------------------------------------------
   HEADER LAYOUT — colours are the platform's; layout only
   ------------------------------------------------------------ */

.site-header {
    padding-top: var(--phasma-space-2);
    padding-bottom: var(--phasma-space-2);
}

.site-header .inside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--phasma-space-3);
}

.site-title {
    font-family: var(--phasma-family-h3), serif;
    font-size: var(--phasma-size-h3);
    font-weight: var(--phasma-weight-h3);
    line-height: var(--phasma-line-h3);
    margin: 0;
}

.site-description {
    font-family: var(--phasma-family-small), sans-serif;
    font-size: var(--phasma-size-small);
    font-weight: var(--phasma-weight-small);
    line-height: var(--phasma-line-small);
    margin: 0;
}

/* Primary nav spacing */
.main-navigation ul {
    margin: 0;
    padding: 0;
}

.main-navigation ul li a {
    font-family: var(--phasma-family-label), sans-serif;
    font-size: var(--phasma-size-label);
    font-weight: var(--phasma-weight-label);
    line-height: var(--phasma-line-label);
    padding: var(--phasma-space-1) var(--phasma-space-2);
    display: block;
}

/* ------------------------------------------------------------
   FOOTER LAYOUT
   ------------------------------------------------------------ */

.site-footer {
    background-color: var(--phasma-color-secondary);
    color: var(--phasma-color-on-secondary);
    padding-top: var(--phasma-space-5);
    padding-bottom: var(--phasma-space-4);
}

.site-footer a {
    color: var(--phasma-color-on-secondary);
    opacity: 0.85;
}

.site-footer a:hover {
    color: var(--phasma-color-on-secondary);
    opacity: 1;
    text-decoration: underline;
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(var(--phasma-grid-columns), 1fr);
    gap: var(--phasma-space-4);
}

.footer-widget-1,
.footer-widget-2,
.footer-widget-3,
.footer-widget-4 {
    grid-column: span 3;
}

/* Copyright bar */
.copyright-bar {
    background-color: var(--phasma-color-secondary);
    color: var(--phasma-color-on-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--phasma-space-2);
    padding-bottom: var(--phasma-space-2);
    font-size: var(--phasma-size-caption);
    line-height: var(--phasma-line-caption);
}

/* ------------------------------------------------------------
   BUTTONS — primary & CTA
   ------------------------------------------------------------ */

/* Primary button: filled with primary colour, white text */
.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
    display: inline-block;
    font-family: var(--phasma-family-label), sans-serif;
    font-size: var(--phasma-size-label);
    font-weight: var(--phasma-weight-h4);
    line-height: 1;
    color: var(--phasma-color-on-primary);
    background-color: var(--phasma-color-primary);
    border: 2px solid var(--phasma-color-primary);
    border-radius: 4px;
    padding: var(--phasma-space-2) var(--phasma-space-3);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
    background-color: var(--phasma-color-accent);
    border-color: var(--phasma-color-accent);
    color: var(--phasma-color-on-primary);
    text-decoration: none;
}

/* Request Quote CTA — white on dark backgrounds */
.cta-dark .button,
.hero .button,
.section-dark .button,
[class*="dark-bg"] .button {
    color: var(--phasma-color-on-primary);
    background-color: transparent;
    border-color: var(--phasma-color-on-primary);
}

.cta-dark .button:hover,
.hero .button:hover,
.section-dark .button:hover,
[class*="dark-bg"] .button:hover {
    background-color: var(--phasma-color-on-primary);
    color: var(--phasma-color-primary);
}

/* Request Quote CTA — accent-filled on light backgrounds */
.cta-light .button,
.section-light .button {
    background-color: var(--phasma-color-accent);
    border-color: var(--phasma-color-accent);
    color: var(--phasma-color-on-secondary);
}

.cta-light .button:hover,
.section-light .button:hover {
    background-color: var(--phasma-color-primary);
    border-color: var(--phasma-color-primary);
    color: var(--phasma-color-on-primary);
}

/* ------------------------------------------------------------
   FORMS
   ------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
    font-family: var(--phasma-family-body), sans-serif;
    font-size: var(--phasma-size-body);
    line-height: var(--phasma-line-body);
    color: var(--phasma-color-text);
    background-color: var(--phasma-color-on-primary);
    border: 1px solid var(--phasma-color-muted);
    border-radius: 4px;
    padding: var(--phasma-space-1) var(--phasma-space-2);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--phasma-color-primary);
    outline: none;
}

label {
    display: block;
    margin-bottom: var(--phasma-space-1);
    color: var(--phasma-color-text);
}

/* ------------------------------------------------------------
   CONTENT — prose, lists, blockquote, hr
   ------------------------------------------------------------ */

p {
    margin-top: 0;
    margin-bottom: var(--phasma-space-2);
}

ul,
ol {
    margin-bottom: var(--phasma-space-2);
    padding-left: var(--phasma-space-3);
}

li {
    margin-bottom: var(--phasma-space-1);
    line-height: var(--phasma-line-body);
}

blockquote {
    border-left: 4px solid var(--phasma-color-primary);
    margin-left: 0;
    padding-left: var(--phasma-space-3);
    color: var(--phasma-color-muted);
    font-style: italic;
}

hr {
    border: none;
    border-top: 1px solid var(--phasma-color-muted);
    margin: var(--phasma-space-4) 0;
    opacity: 0.3;
}

/* Code */
code,
pre {
    font-family: "Courier New", Courier, monospace;
    font-size: var(--phasma-size-small);
    background-color: var(--phasma-color-background);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

code {
    padding: 2px 6px;
}

pre {
    padding: var(--phasma-space-2);
    overflow-x: auto;
}

/* ------------------------------------------------------------
   IMAGES & MEDIA
   ------------------------------------------------------------ */

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

figure {
    margin: 0 0 var(--phasma-space-2);
}

/* ------------------------------------------------------------
   POSTS & ARCHIVE
   ------------------------------------------------------------ */

.entry-header {
    margin-bottom: var(--phasma-space-3);
}

.entry-title {
    font-family: var(--phasma-family-h2), serif;
    font-size: var(--phasma-size-h2);
    font-weight: var(--phasma-weight-h2);
    line-height: var(--phasma-line-h2);
    color: var(--phasma-color-primary);
    margin-bottom: var(--phasma-space-1);
}

.entry-title a {
    color: var(--phasma-color-primary);
    text-decoration: none;
}

.entry-title a:hover {
    color: var(--phasma-color-accent);
}

.entry-meta,
.entry-footer {
    font-family: var(--phasma-family-label), sans-serif;
    font-size: var(--phasma-size-label);
    font-weight: var(--phasma-weight-label);
    line-height: var(--phasma-line-label);
    color: var(--phasma-color-muted);
}

.entry-content {
    color: var(--phasma-color-text);
}

/* Section / full-bleed backgrounds must NOT be constrained:
   inner containers carry their own max-width. */
.entry-content .inner-container {
    max-width: var(--phasma-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--phasma-space-3);
    padding-right: var(--phasma-space-3);
}

/* Post cards in archive */
.post-card {
    background-color: var(--phasma-color-on-primary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.post-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------------
   PAGINATION
   ------------------------------------------------------------ */

.pagination,
.nav-links {
    display: flex;
    gap: var(--phasma-space-1);
    align-items: center;
    justify-content: center;
    margin: var(--phasma-space-4) 0;
    font-family: var(--phasma-family-label), sans-serif;
    font-size: var(--phasma-size-label);
}

.page-numbers,
.page-numbers a {
    color: var(--phasma-color-primary);
    padding: var(--phasma-space-1) var(--phasma-space-2);
    border: 1px solid var(--phasma-color-primary);
    border-radius: 3px;
    text-decoration: none;
}

.page-numbers.current,
.page-numbers:hover {
    background-color: var(--phasma-color-primary);
    color: var(--phasma-color-on-primary);
}

/* ------------------------------------------------------------
   WIDGETS
   ------------------------------------------------------------ */

.widget {
    margin-bottom: var(--phasma-space-4);
}

.widget-title {
    font-family: var(--phasma-family-h4), sans-serif;
    font-size: var(--phasma-size-h4);
    font-weight: var(--phasma-weight-h4);
    line-height: var(--phasma-line-h4);
    color: var(--phasma-color-primary);
    margin-bottom: var(--phasma-space-2);
    padding-bottom: var(--phasma-space-1);
    border-bottom: 2px solid var(--phasma-color-primary);
}

/* ------------------------------------------------------------
   UTILITY — muted text, section spacing
   ------------------------------------------------------------ */

.text-muted,
.muted {
    color: var(--phasma-color-muted);
}

.section {
    padding-top: var(--phasma-space-5);
    padding-bottom: var(--phasma-space-5);
}

.section-sm {
    padding-top: var(--phasma-space-4);
    padding-bottom: var(--phasma-space-4);
}

/* Dark sections — primary/secondary fills */
.section-primary {
    background-color: var(--phasma-color-primary);
    color: var(--phasma-color-on-primary);
}

.section-primary h1,
.section-primary h2,
.section-primary h3,
.section-primary h4,
.section-primary a {
    color: var(--phasma-color-on-primary);
}

.section-secondary {
    background-color: var(--phasma-color-secondary);
    color: var(--phasma-color-on-secondary);
}

.section-secondary h1,
.section-secondary h2,
.section-secondary h3,
.section-secondary h4,
.section-secondary a {
    color: var(--phasma-color-on-secondary);
}

/* ------------------------------------------------------------
   RESPONSIVE — mobile-friendly structure
   (Type size ramp is handled by the platform's token overrides)
   ------------------------------------------------------------ */

@media (max-width: 768px) {
    .footer-widgets {
        grid-template-columns: 1fr 1fr;
    }

    .footer-widget-1,
    .footer-widget-2,
    .footer-widget-3,
    .footer-widget-4 {
        grid-column: span 6;
    }
}

@media (max-width: 480px) {
    .footer-widgets {
        grid-template-columns: 1fr;
    }

    .footer-widget-1,
    .footer-widget-2,
    .footer-widget-3,
    .footer-widget-4 {
        grid-column: span 12;
    }

    .site-header .inside-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--phasma-space-2);
    }
}

/* Header — PLATFORM-OWNED (layout.header = primary). The colours come from the tokens above; the model's stylesheet may not set them. */
.site-header,
.main-navigation,
.main-navigation ul ul {
	background-color: var(--phasma-color-primary);
}
.site-header .main-title a,
.site-header .main-title a:hover,
.site-header .site-description,
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: var(--phasma-color-on-primary);
}
@media (min-width: 769px) {
	.site-header .inside-header {
		flex-wrap: wrap;
		row-gap: 12px;
	}
	.site-header .inside-header > .main-navigation {
		flex-shrink: 0;
		max-width: 100%;
	}
	.main-navigation .main-nav ul li a {
		padding-left: 14px;
		padding-right: 14px;
	}
}
.site-header .header-image {
	max-height: 64px;
	width: auto;
}
.site-header .site-logo .header-image {
	background-color: var(--phasma-color-background);
	padding: 6px 10px;
	border-radius: 4px;
}