/*
Theme Name:   Spencer Technologies UK — Brand Reskin
Theme URI:    https://spencertechnologies.co.uk/
Description:  Child theme of Porto that reskins Spencer Technologies UK to the 2026 brand system (Core Network Blue, Connection Blue, Roboto/Ubuntu/Source Serif 4). Interim skin while the US corporate site is rebuilt. Colour and type overrides only — no layout or content changes.
Author:       Spencer Technologies
Template:     porto
Version:      1.1.0
Text Domain:  spencer-uk-rebrand
*/

/* =====================================================================
   Spencer Technologies — Brand tokens
   Only the approved palette + type from the brand guideline are used.
   ===================================================================== */
:root {
	/* Primary */
	--st-core-blue:        #142641;  /* Core Network Blue */
	--st-connection-blue:  #3EE0F6;  /* Connection Blue   */
	--st-cloud-white:      #FCFCFC;  /* Cloud White       */
	/* Secondary */
	--st-circuit-green:    #34ED7B;
	--st-signal-blue:      #1DA0FB;
	/* Tertiary (accents only) */
	--st-beacon-yellow:    #FFCA24;
	--st-alert-orange:     #E36000;
	--st-fresh-green:      #E2F8E0;
	--st-sky-blue:         #F0FAFF;
	/* Derived tints for surfaces / hovers */
	--st-core-blue-90:     #1b3252;
	--st-core-blue-hover:  #0d1a2e;
	--st-connection-hover: #17c8e0;
	/* Type */
	--st-font-head:  "Roboto", Arial, sans-serif;
	--st-font-alt:   "Ubuntu", "Ubuntu Sans", Arial, sans-serif;
	--st-font-serif: "Source Serif 4", Georgia, serif;
	--st-font-body:  "Roboto", Arial, sans-serif;
}

/* =====================================================================
   Base type
   ===================================================================== */
body,
.porto-content,
p, li, span, td, div {
	font-family: var(--st-font-body);
	color: var(--st-core-blue);
}
body { background: var(--st-cloud-white); }

h1, h2, h3, h4, h5, h6,
.entry-title, .elementor-heading-title {
	font-family: var(--st-font-head);
	color: var(--st-core-blue);
	letter-spacing: -0.01em;
}

/* Eyebrows / small caps labels above headings */
.eyebrow, .elementor-widget-heading .eyebrow,
.subtitle, .section-subtitle {
	font-family: var(--st-font-alt);
	text-transform: uppercase;
	letter-spacing: 0.10em;
	font-weight: 500;
	color: var(--st-signal-blue);
}

/* Source Serif reserved for subheads per the type scale */
.subhead, h2.subhead, .lead-serif { font-family: var(--st-font-serif); }

a { color: var(--st-signal-blue); }
a:hover { color: var(--st-connection-hover); }

/* =====================================================================
   Header / primary navigation
   ===================================================================== */
#header,
.header-main,
.header-container,
.main-menu-wrap,
.header .header-main {
	background-color: var(--st-core-blue) !important;
	border-bottom: 3px solid var(--st-connection-blue);
}

#header a,
.main-menu > li > a,
.menu > li > a,
#header .menu li a {
	color: var(--st-cloud-white) !important;
	font-family: var(--st-font-alt);
	font-weight: 500;
	letter-spacing: 0.02em;
}
.main-menu > li > a:hover,
.main-menu > li.active > a,
#header .menu li a:hover {
	color: var(--st-connection-blue) !important;
}

/* Dropdown submenus */
.main-menu .sub-menu,
.dropdown-menu {
	background: var(--st-core-blue-90) !important;
	border-top: 2px solid var(--st-connection-blue);
}
.main-menu .sub-menu a,
.dropdown-menu a { color: var(--st-cloud-white) !important; }
.main-menu .sub-menu a:hover,
.dropdown-menu a:hover {
	background: var(--st-core-blue-hover) !important;
	color: var(--st-connection-blue) !important;
}

/* Top phone / sales strip */
.header-top, .top-bar {
	background: var(--st-core-blue-hover) !important;
	color: var(--st-cloud-white) !important;
}
.header-top a, .top-bar a { color: var(--st-connection-blue) !important; }

/* =====================================================================
   Buttons / calls to action
   ===================================================================== */
.btn, .button, button, input[type="submit"],
.elementor-button, .wp-block-button__link,
a.btn-primary, .btn-primary {
	background: var(--st-connection-blue) !important;
	border: 2px solid var(--st-connection-blue) !important;
	color: var(--st-core-blue) !important;
	font-family: var(--st-font-alt);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 6px;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover, .button:hover, button:hover,
.elementor-button:hover, .wp-block-button__link:hover,
a.btn-primary:hover, .btn-primary:hover {
	background: var(--st-connection-hover) !important;
	border-color: var(--st-connection-hover) !important;
	color: var(--st-core-blue) !important;
}

/* Secondary / outline button on dark panels */
.btn-outline, .btn-secondary, .elementor-button.btn-outline {
	background: transparent !important;
	border: 2px solid var(--st-connection-blue) !important;
	color: var(--st-connection-blue) !important;
}
.btn-outline:hover, .btn-secondary:hover {
	background: var(--st-connection-blue) !important;
	color: var(--st-core-blue) !important;
}

/* =====================================================================
   Sections / panels
   ===================================================================== */
/* Dark brand panels */
.bg-dark, .section-dark, .porto-ibanner.bg-dark,
.elementor-section.bg-core, .bg-primary {
	background-color: var(--st-core-blue) !important;
	color: var(--st-cloud-white) !important;
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark p,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark p {
	color: var(--st-cloud-white) !important;
}

/* Light tint panel */
.bg-light, .section-light, .bg-sky {
	background-color: var(--st-sky-blue) !important;
}

/* Accent divider / underline used under section titles */
.section-title:after,
.heading-line:after,
.elementor-heading-title.has-line:after {
	background: var(--st-connection-blue) !important;
}

/* =====================================================================
   Service / feature cards
   ===================================================================== */
.service-box, .feature-box, .icon-box, .porto-sicon-box,
.card, .elementor-icon-box-wrapper {
	background: var(--st-cloud-white);
	border: 1px solid rgba(20,38,65,0.10);
	border-radius: 10px;
	box-shadow: 0 6px 22px rgba(20,38,65,0.08);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-box:hover, .feature-box:hover, .icon-box:hover,
.porto-sicon-box:hover, .card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(20,38,65,0.16);
	border-color: var(--st-connection-blue);
}
.service-box .icon, .feature-box .icon,
.icon-box i, .porto-sicon-box .porto-icon,
.elementor-icon-box-icon i {
	color: var(--st-connection-blue) !important;
}

/* Card titles */
.service-box h3, .feature-box h3, .icon-box h4, .card h3 {
	font-family: var(--st-font-head);
	color: var(--st-core-blue);
}

/* =====================================================================
   Hero / slider text
   ===================================================================== */
.rev_slider .tp-caption,
.hero h1, .banner h1 {
	font-family: var(--st-font-head);
}
.hero, .rev_slider_wrapper .banner-overlay {
	background-color: var(--st-core-blue);
}

/* Emphasised words in hero copy (matches the italic accents on the live site) */
.hero em, .hero .accent, .banner .accent {
	color: var(--st-connection-blue);
	font-style: normal;
}

/* =====================================================================
   Footer
   ===================================================================== */
#footer, .footer, .footer-main {
	background-color: var(--st-core-blue) !important;
	color: var(--st-cloud-white) !important;
	border-top: 3px solid var(--st-connection-blue);
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5,
.footer h4, .footer .widget-title {
	color: var(--st-cloud-white) !important;
	font-family: var(--st-font-alt);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
#footer a, .footer a { color: rgba(252,252,252,0.82) !important; }
#footer a:hover, .footer a:hover { color: var(--st-connection-blue) !important; }

.footer-bottom, .copyright {
	background: transparent !important; /* blend into the single navy footer */
	color: rgba(252,252,252,0.7) !important;
}

/* Social icons */
.footer .social-icons a, #footer .social-icons a {
	color: var(--st-connection-blue) !important;
}

/* =====================================================================
   Forms (contact page)
   ===================================================================== */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], textarea, select, .wpcf7 input, .wpcf7 textarea {
	border: 1px solid rgba(20,38,65,0.25);
	border-radius: 6px;
	font-family: var(--st-font-body);
	color: var(--st-core-blue);
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--st-connection-blue);
	box-shadow: 0 0 0 3px rgba(62,224,246,0.25);
}

/* =====================================================================
   Misc brand touches
   ===================================================================== */
::selection { background: var(--st-connection-blue); color: var(--st-core-blue); }
blockquote { border-left: 4px solid var(--st-connection-blue); }
hr { border-top: 1px solid rgba(20,38,65,0.12); }

/* Scrollbar (WebKit) */
::-webkit-scrollbar-thumb { background: var(--st-core-blue); }
::-webkit-scrollbar-track { background: var(--st-sky-blue); }

/* =====================================================================
   Site-specific overrides — verified live on spencertechnologies.co.uk
   -------------------------------------------------------------------
   The footer colour is driven by Elementor's global "primary" colour
   (var(--e-global-color-primary), currently a bright blue) applied to
   specific footer elements. Generic footer rules are outranked, so we
   match Elementor's own selector weight to force Core Network Blue.
   The header phone widget is a Porto icon box with a white background.
   NOTE: element IDs (c7d5ace / ccbfd89 / aa6e929) belong to the current
   footer template (post 1860). If the footer is rebuilt in Elementor,
   these IDs may change and need updating.
   ===================================================================== */

/* Footer sections -> Core Network Blue */
.elementor-1860 .elementor-element.elementor-element-c7d5ace,
.elementor-1860 .elementor-element.elementor-element-ccbfd89,
.elementor-element.elementor-element-c7d5ace.footer-top,
.elementor-element.elementor-element-ccbfd89.footer-bottom-section {
	background-color: #142641 !important;
	background-image: none !important;
}

/* Thin footer divider bar -> Connection Blue accent */
.elementor-1860 .elementor-element.elementor-element-aa6e929 {
	background-color: #3EE0F6 !important;
}

/* Header phone widget: remove the white box, brand the number */
#header .porto-sicon-box,
.header-main .porto-sicon-box {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}
#header .porto-sicon-box *,
.header-main .porto-sicon-box * { color: #FCFCFC !important; }
#header .porto-sicon-box a[href^="tel"],
.header-main .porto-sicon-box a[href^="tel"] {
	color: #3EE0F6 !important;
	font-weight: 700 !important;
}

/* =====================================================================
   Round 2 — site-wide brand fixes (verified live)
   ===================================================================== */

/* Porto primary colour -> Core Network Blue. This drives the bright-blue
   page-header / breadcrumb banner that appears on every inner page, plus
   other Porto primary-coloured elements. One variable fixes them all. */
:root {
	--porto-primary-color: #142641 !important;
	--skin-primary-color: #142641 !important;
}

/* Keep the page-header title + breadcrumb legible on the new navy banner */
.page-top,
.page-top .page-title,
.page-top h1 { color: #FCFCFC !important; }
.page-top .breadcrumb,
.page-top .breadcrumb a,
.page-top .breadcrumb li,
.page-top .breadcrumb .active { color: rgba(252, 252, 252, 0.8) !important; }

/* Homepage hero: the bright blue is baked into the background image
   (it-bg-full.jpg). A "luminosity" blend re-tints it to brand navy while
   keeping the photo's brightness — a navy duotone, NOT a dark overlay. */
.elementor-element-cecbab7 {
	background-color: #1b3252 !important;
	background-blend-mode: luminosity !important;
}

/* CTA band ("Let's talk about your business IT services needs") was
   off-brand near-black (#212529). Recolour to Core Network Blue. Lives in
   Elementor block 2025; match Elementor's selector weight to win. */
.elementor-2025 .elementor-element.elementor-element-b7895e8,
.elementor-element.elementor-element-b7895e8 {
	background-color: #142641 !important;
}

/* Stats / counter bar (About Us) was off-brand near-black (#212529) ->
   Core Network Blue. */
.elementor-19 .elementor-element.elementor-element-9d04979,
.elementor-element.elementor-element-9d04979 {
	background-color: #142641 !important;
}

/* Contact page dark panel: was near-black with a white info card whose
   white title/navy phone number were invisible. Navy panel, transparent
   cards, white text, cyan links. */
.elementor-element.elementor-element-34dd719 { background-color: #142641 !important; }
.elementor-element-34dd719 .porto-sicon-box {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}
.elementor-element-34dd719,
.elementor-element-34dd719 * { color: #FCFCFC !important; }
.elementor-element-34dd719 a { color: #3EE0F6 !important; }

/* Service-card photos: force equal height so the four boxes (Cloud /
   Financed / Managed / Professional) line up. */
img[src*="working-from-a-desk"],
img[src*="Financial-Services"],
img[src*="it-generic"],
img[src*="Professional-Services"] {
	height: 220px !important;
	width: 100% !important;
	object-fit: cover !important;
}

/* Porto outline buttons -> solid Connection Blue with navy text, so CTAs
   like "GET STARTED NOW" on the dark CTA band are clearly visible. */
a.btn.btn-borders,
.elementor-button.btn-borders,
a.btn.btn-secondary {
	background-color: #3EE0F6 !important;
	border-color: #3EE0F6 !important;
	color: #142641 !important;
}
a.btn.btn-borders *,
.elementor-button.btn-borders *,
a.btn.btn-secondary * { color: #142641 !important; fill: #142641 !important; }

/* Footer "Our Address" column: two lines (Europa Link, Tinsley) were
   left-aligned while the rest were centred, giving a messy zig-zag.
   Force the whole address column to centre for a clean stack. */
.elementor-element-4710d86 .elementor-heading-title { text-align: center !important; }

/* Yellow accent -> brand Beacon Yellow (#FFCA24). The site used a lime
   yellow (#fbe91b) held in three "secondary" colour variables. */
:root,
.elementor-kit-2932 {
	--e-global-color-secondary: #FFCA24 !important;
	--porto-secondary-color: #FFCA24 !important;
	--bs-secondary: #FFCA24 !important;
}

/* Homepage service cards used a deliberate "overlapping cards" transform
   that staggered the four images by ~20px and read as misaligned. Remove
   the transforms so they form a clean, aligned 2x2 grid. */
.elementor .custom-overlapping-cards .elementor-widget-image-box img,
.elementor .custom-overlapping-cards .elementor-widget-image img {
	transform: none !important;
}

/* The service cards use a fadeInUp entrance animation that starts them
   invisible and reveals on scroll. If that reveal doesn't fire (cache,
   Edge/Safari quirks), the labels stay hidden. Force them always visible. */
.custom-overlapping-cards .elementor-widget,
.custom-overlapping-cards .elementor-element,
.custom-overlapping-cards .elementor-invisible {
	opacity: 1 !important;
	visibility: visible !important;
	animation: none !important;
	transform: none !important;
}

/* Service-card titles were white (originally meant to overlay a photo) and
   became invisible on the white card. Force them to Core Network Blue. */
.custom-overlapping-cards .elementor-image-box-title,
.custom-overlapping-cards h4.elementor-image-box-title { color: #142641 !important; }
.custom-overlapping-cards .elementor-image-box-description { color: #41506A !important; }

/* =====================================================================
   Site-wide blue-section sweep (crawled all 76 pages)
   -------------------------------------------------------------------
   23 Elementor sections across the site hardcode the old blue (#0053CE)
   into their own per-post CSS. There is no shared class or global colour
   behind them, so each element ID is overridden to Core Network Blue.
   The element-id class is doubled to out-specify Elementor's per-post
   rule, and transition is disabled to prevent a blue->navy flash.
   NOTE: these IDs belong to specific sections; if a section is rebuilt
   in Elementor its ID changes and the new ID must be added here.
   ===================================================================== */
body .elementor .elementor-element.elementor-element-f8f6e68.elementor-element-f8f6e68,
body .elementor .elementor-element.elementor-element-1263b62.elementor-element-1263b62,
body .elementor .elementor-element.elementor-element-8e04611.elementor-element-8e04611,
body .elementor .elementor-element.elementor-element-4d0ce35.elementor-element-4d0ce35,
body .elementor .elementor-element.elementor-element-269dcbc.elementor-element-269dcbc,
body .elementor .elementor-element.elementor-element-f0578f3.elementor-element-f0578f3,
body .elementor .elementor-element.elementor-element-24ffd0e.elementor-element-24ffd0e,
body .elementor .elementor-element.elementor-element-c1259f8.elementor-element-c1259f8,
body .elementor .elementor-element.elementor-element-298aece.elementor-element-298aece,
body .elementor .elementor-element.elementor-element-ab6f6f5.elementor-element-ab6f6f5,
body .elementor .elementor-element.elementor-element-11defe6.elementor-element-11defe6,
body .elementor .elementor-element.elementor-element-68ea19a.elementor-element-68ea19a,
body .elementor .elementor-element.elementor-element-3e28ce8.elementor-element-3e28ce8,
body .elementor .elementor-element.elementor-element-43ea35f.elementor-element-43ea35f,
body .elementor .elementor-element.elementor-element-aa4d255.elementor-element-aa4d255,
body .elementor .elementor-element.elementor-element-f153928.elementor-element-f153928,
body .elementor .elementor-element.elementor-element-c19708e.elementor-element-c19708e,
body .elementor .elementor-element.elementor-element-5c5f592.elementor-element-5c5f592,
body .elementor .elementor-element.elementor-element-b9f4097.elementor-element-b9f4097,
body .elementor .elementor-element.elementor-element-10b6ede.elementor-element-10b6ede,
body .elementor .elementor-element.elementor-element-1096df7.elementor-element-1096df7,
body .elementor .elementor-element.elementor-element-04b6aa0.elementor-element-04b6aa0,
body .elementor .elementor-element.elementor-element-85685c3.elementor-element-85685c3 {
	background-color: #142641 !important;
	transition: none !important;
}