/*
Theme Name: TRP Engineering and Consultants
Theme URI: https://trpengineering.in/
Author: TRP Engineering and Consultants
Description: Bespoke Elementor-ready theme for TRP Engineering and Consultants — Power System Study Specialist & Electrical Consultant. Converted from the supplied static build and re-skinned to the TRP brand guidelines (version 1.0, October 2026). Every section on every page is an Elementor widget.
Version: 2.0.6
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: trp
Tags: elementor, engineering, consulting
*/

/* -----------------------------------------------------------------------------
   This file is the theme header WordPress requires, plus the brand layer.

   The page CSS itself is in assets/css/ and is enqueued, not imported — an
   @import here would serialise the downloads behind this file.

   WHAT FOLLOWS AND WHY

   The static build ships a generic template skinned in Manrope with an orange
   accent of #FF9900. None of the eleven TRP brand colours appear in it, and it
   predates the brand book. Rather than hunt through 111 KB of custom.css, the
   re-skin works through the nine custom properties the template already defines
   in its own :root — so the brand lives in one block, and a future brand change
   is an edit to one file.

   Specificity: html:root beats the template's plain :root at equal origin, which
   is what lets this override assets/css/custom.css whatever the enqueue order
   turns out to be.
   -------------------------------------------------------------------------- */

html:root {

	/* ---- TRP brand palette, from the brand book ------------------------ */

	--trp-navy:          #22326D;  /* headers, footers, primary buttons, headings */
	--trp-orange:        #E8632A;  /* the spark: highlights, icons, rules         */
	--trp-navy-light:    #3B4FA0;  /* hover states, charts                        */
	--trp-navy-tint:     #E6E9F3;  /* info panels, spec boxes                     */
	--trp-orange-tint:   #FDEDE5;  /* callouts and notices                        */
	--trp-amber:         #FBB625;  /* bolt gradient end, highlights               */
	--trp-charcoal:      #231F20;  /* body text                                   */
	--trp-slate:         #5A6178;  /* captions, secondary text                    */
	--trp-cloud:         #F3F5FA;  /* section backgrounds, cards                  */
	--trp-orange-text:   #B4461A;  /* orange words and links                      */
	--trp-rule:          #D7DBE7;  /* thin rules                                  */
	--trp-white:         #FFFFFF;

	/* ---- The template's own tokens, repointed -------------------------- */

	/* Navy rather than near-black: the template uses --primary-color for
	   headings, dark bands and button fills, which is exactly the brand's
	   "structure" role for TRP Navy. */
	--primary-color:      var(--trp-navy);
	--secondary-color:    var(--trp-cloud);

	/* The brand assigns body copy to Charcoal and captions to Slate. The
	   template has one token for both, so it takes Charcoal — the more legible
	   of the two — and Slate is applied to captions in the overrides below. */
	--text-color:         var(--trp-charcoal);
	--accent-color:       var(--trp-orange);
	--white-color:        var(--trp-white);
	--divider-color:      var(--trp-rule);
	--dark-divider-color: #FFFFFF1A;
	--error-color:        rgb(230, 87, 87);

	/* ---- Typography ---------------------------------------------------- */

	/* Three typefaces, one hierarchy — Sora for headings, DM Sans for body,
	   JetBrains Mono for ratings and standards. */
	--default-font: "DM Sans", "Segoe UI", Arial, sans-serif;
	--heading-font: "Sora", "Segoe UI", Arial, sans-serif;
	--mono-font:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

	/* The template references --accent-font once (custom.css line 3617) and
	   never defines it, so that rule has been falling back to the browser
	   default since the build was made. Defined here rather than left broken. */
	--accent-font:  var(--heading-font);

	/* ---- Type scale, from the brand book ------------------------------- */
	/* size / line-height pairs, in px as the book specifies them. */

	--trp-hero-size:  56px;  --trp-hero-lh:  64px;
	--trp-h1-size:    40px;  --trp-h1-lh:    48px;
	--trp-h2-size:    28px;  --trp-h2-lh:    36px;
	--trp-h3-size:    20px;  --trp-h3-lh:    28px;
	--trp-body-size:  16px;  --trp-body-lh:  26px;
	--trp-label-size: 12px;  --trp-label-lh: 16px;
	--trp-data-size:  14px;  --trp-data-lh:  20px;
}

/* -----------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

body {
	font-family: var(--default-font);
	font-size: var(--trp-body-size);
	line-height: var(--trp-body-lh);
	color: var(--trp-charcoal);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--heading-font);
	/* The book specifies SemiBold 600 and Bold 700 for headings; 600 is the
	   default and 700 is reserved for the hero and section titles. */
	font-weight: 600;
	color: var(--trp-navy);
}

h1 { font-size: var(--trp-h1-size); line-height: var(--trp-h1-lh); font-weight: 700; }
h2 { font-size: var(--trp-h2-size); line-height: var(--trp-h2-lh); }
h3 { font-size: var(--trp-h3-size); line-height: var(--trp-h3-lh); }

/* Captions and secondary text take Slate, per the brand's split between
   Charcoal for body and Slate for captions. */
figcaption,
.wp-caption-text,
.trp-caption,
.post-meta,
small {
	color: var(--trp-slate);
}

/* Ratings, standards and technical values are set in JetBrains Mono — "132 kV",
   "IEC 60909", "Zone 1". Units are written with a space, which is a content
   rule rather than a CSS one; see the widget descriptions. */
.trp-data,
.trp-spec dd,
.trp-spec-value {
	font-family: var(--mono-font);
	font-size: var(--trp-data-size);
	line-height: var(--trp-data-lh);
	font-variant-numeric: tabular-nums;
}

.trp-label {
	font-family: var(--heading-font);
	font-size: var(--trp-label-size);
	line-height: var(--trp-label-lh);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--trp-orange-text);
}

/* -----------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

a { color: var(--trp-orange-text); }
a:hover,
a:focus-visible { color: var(--trp-navy-light); }

/* A visible focus ring. The template removes outlines in several places, which
   leaves the site unusable by keyboard — this puts one back, and the brand's
   orange is the accent the book reserves for exactly this kind of signal. */
:focus-visible {
	outline: 2px solid var(--trp-orange);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Brand surfaces
   -------------------------------------------------------------------------- */

/* 60 / 30 / 10 — white and light neutrals, TRP Navy, then orange as the accent
   only. The helpers below are what the widgets' Background control sets, so a
   page built in Elementor cannot drift from the ratio by accident. */

.trp-bg-white  { background-color: var(--trp-white); }
.trp-bg-cloud  { background-color: var(--trp-cloud); }
.trp-bg-navy   { background-color: var(--trp-navy); color: var(--trp-white); }
.trp-bg-tint   { background-color: var(--trp-navy-tint); }

.trp-bg-navy h1, .trp-bg-navy h2, .trp-bg-navy h3,
.trp-bg-navy h4, .trp-bg-navy h5, .trp-bg-navy h6 { color: var(--trp-white); }
.trp-bg-navy a { color: var(--trp-amber); }

/* The orange accent rule the book lists in its graphic language. Kept to a
   hairline: it marks a section, it is not a divider. */
.trp-accent-rule {
	width: 56px;
	height: 3px;
	background-color: var(--trp-orange);
	border: 0;
	margin: 0 0 20px;
}

.trp-bg-navy .trp-accent-rule { background-color: var(--trp-amber); }

/* Specification panel — "Cloud card · spec block" in the book. */
.trp-spec {
	background-color: var(--trp-cloud);
	border-left: 3px solid var(--trp-orange);
	padding: 20px 24px;
	margin: 0;
}

.trp-spec dt {
	font-family: var(--heading-font);
	font-size: var(--trp-label-size);
	line-height: var(--trp-label-lh);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--trp-slate);
}

.trp-spec dd {
	margin: 2px 0 14px;
	color: var(--trp-navy);
}

.trp-spec dd:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   Editor affordances
   -------------------------------------------------------------------------- */

/* An empty widget is invisible on the canvas, which makes it impossible to
   select and delete. Elementor adds .elementor-editor-active to the body, so
   this only ever shows while editing. */
.elementor-editor-active .trp-widget:empty::before {
	content: "TRP widget — add content in the panel";
	display: block;
	padding: 24px;
	border: 1px dashed var(--trp-rule);
	color: var(--trp-slate);
	font-family: var(--default-font);
	text-align: center;
}