/* ============================================================================
   360 GEOMATICS hybrid palette: CLASSIC
   ----------------------------------------------------------------------------
   The refreshed layout with the ORIGINAL site's row colouring, built to the
   client's 2026-07-23 notes on allnew vs. the live site:

     • top utility bar  → charcoal, as on the original (Daylight had it light)
     • identity row     → white
     • HOME / ABOUT nav → white, dark ink; the CICES mark then reads correctly
     • "In an industry where…" strip → back to the original's transparency so
       the photograph shows through
     • footer / QR titles → the original's bright, tighter titles
     • hero photograph  → keeps colour but much less darkening, so detail (the
       sub-station structures) survives; the caption keeps its own scrim so the
       overlaid text still stands out

   Like the other hybrids this is an override layer on css/theme-refresh.css and
   must load AFTER it. Everything the client said they preferred about the new
   design — larger type, the standout section icons, the service squares, the
   bigger Client Login — comes from the base and is deliberately untouched.
   ========================================================================== */

:root {
	--bg-deep: #14181c;      /* charcoal utility bar + footer (original ≈ #000) */
	--bg-main: #eef1f3;      /* page canvas */
	--bg-section: #ffffff;   /* identity / logo row */
	--bg-panel: #ffffff;     /* content surfaces */
	--bg-panel-2: #eef2f4;
	--bg-panel-hover: #e3e9ec;
	--text-main: #1c262c;
	--text-soft: #3e4a52;
	--text-muted: #66727a;
	--line-soft: rgba(33,53,64,.12);
	--line-medium: rgba(33,53,64,.22);
	--shadow-panel: 0 18px 42px -25px rgba(24,44,58,.4);

	/* The original site's accent is the brand red, not the teal the Daylight
	   palette used — the client asked for the original colouring. */
	--hybrid-accent: #c12929;
	--hybrid-accent-strong: #8f1c20;
	--hybrid-wash: #fbeaea;

	--hybrid-nav: #ffffff;   /* white menu band, as on the original */
	--hybrid-nav-2: #ffffff; /* dropdown panels */
	--hybrid-nav-ink: #17202a;
}

/* Light page canvas and readable copy. */
body,
body.home,
body:not(.home),
body.home .body,
body:not(.home) #main-container,
body:not(.home) #main-container > .content,
body.home #main-container,
body.home #main-container .content,
.g360-news-main { background: var(--bg-main); color: var(--text-soft); }

h1, h2, h3, h4, h5, h6,
body.home .content h2,
body.home .content h3,
body.home .content h2.accent-color,
body.home .col-md-8 > h3,
body:not(.home) .editablediv h1,
body:not(.home) .editablediv h2,
body:not(.home) .editablediv h3,
body:not(.home) .editablediv h4,
body:not(.home) .editablediv h5,
.g360-news-intro h2,
.g360-article h2,
.g360-news-empty h2,
.g360-news-empty h3 { color: var(--text-main) !important; }

body.home .introarea,
body.home .introarea p,
body.home .editablediv,
body.home .editablediv p,
body:not(.home) .editablediv,
body:not(.home) .apagecontentdiv,
.g360-news-intro p,
.g360-news-card p,
.g360-article p { color: var(--text-soft); }

body.home .introarea a,
body.home .editablediv a,
body:not(.home) .editablediv a,
body:not(.home) .apagecontentdiv a,
.g360-news-intro a,
.g360-article a,
.g360-news-read { color: var(--hybrid-accent-strong); }

/* Content surfaces. */
body.home .featured-block,
body.home .featured-block-content,
body.home .featured-block-more,
body.home .shadow-block,
body:not(.home) .featured-block,
body:not(.home) .panel,
body:not(.home) .accordion-group,
body:not(.home) .widget.fancy_block,
body:not(.home) .shadow-block.contact-info-block,
body:not(.home) .quoteblock,
.g360-news-card,
.g360-source-card,
.g360-news-empty,
.g360-why,
.g360-related-services,
.modal-content,
.well {
	background: var(--bg-panel) !important;
	border-color: var(--line-soft);
	color: var(--text-soft);
	box-shadow: var(--shadow-panel);
}
body.home .featured-block-more,
.panel-footer { background: var(--bg-panel-2) !important; }
body.home .featured-block-info p,
body.home .shadow-block .editablediv,
body.home .shadow-block .editablediv p { color: var(--text-soft); }

body.home hr,
body.home hr.fw { background: linear-gradient(90deg, transparent, rgba(33,53,64,.32), transparent) !important; }

/* Keep photographic and emphasis strips dark. */
body.home .hero-slider,
body.home .notice-bar,
body.home .parallax1.parallax-light { background-color: #17202a; }
body.home .hero-area h1,
body.home .hero-area h2,
body.home .hero-area h3,
body.home .parallax1 h2,
body.home .parallax1 h4,
body.home .parallax1 .editablediv,
body.home .parallax1 .editablediv p,
body.home .accli .short p span,
body.home .accli i.serviceaccordicon,
body.home .homesidebitdiv h3,
body.home .parallax2 h3,
body:not(.home) .page-header h1,
body:not(.home) .bottommessage h1,
body:not(.home) .bottommessage h2,
body:not(.home) .bottommessage h3,
body:not(.home) .bottommessage h4 { color: #fff !important; }
body.home .hero-area .flex-caption-text p,
body.home .notice-bar .slides li p,
body.home .notice-bar .flexslider a { color: #cdd6db; }
body.home .notice-bar .flexslider .meta-data { color: #94a1a8; }
body.home .hero-area .btn-ghost.btn-light,
body.home .hero-area .btn-default.btn-light { color: #fff !important; border-color: rgba(255,255,255,.34); }

/* Forms, tables and FAQ panels. */
body.home .meeting-form .form-control,
body.home .meeting-form input.form-control,
body.home .meeting-form select.form-control,
body.home .meeting-form .bootstrap-select > .btn,
body.home .meeting-form button.selectpicker,
body:not(.home) .form-control {
	background: #ffffff !important;
	border-color: #c6d0d5 !important;
	color: var(--text-main) !important;
}
body.home .meeting-form .form-control:focus,
body:not(.home) .form-control:focus { background: #fff !important; border-color: var(--hybrid-accent) !important; box-shadow: 0 0 0 3px rgba(193,41,41,.16) !important; }
body.home .meeting-form .form-control::placeholder,
body:not(.home) .form-control::placeholder { color: #6a757c; }
body:not(.home) select.form-control option,
body.home .meeting-form .bootstrap-select .dropdown-menu { background: var(--bg-panel); color: var(--text-main); }
body.home .meeting-form .bootstrap-select .dropdown-menu li a { color: var(--text-soft); }

body:not(.home) .table,
body:not(.home) .editablediv table,
body:not(.home) .apagecontentdiv table { background: var(--bg-panel); color: var(--text-soft); }
body:not(.home) .table > thead > tr > th,
body:not(.home) .editablediv th,
body:not(.home) .apagecontentdiv th { background: var(--bg-panel-2); color: var(--text-main); }
body:not(.home) .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(33,53,64,.04); }

body.home #toggleArea .accordion-group,
body:not(.home) .faq-list .accordion-group { background: linear-gradient(145deg, #ffffff, #eef2f4); border-color: var(--line-soft); box-shadow: var(--shadow-panel); }
body.home #toggleArea .accordion-toggle,
body:not(.home) .faq-list .accordion-toggle,
body.home #toggleArea .accordion-toggle h4,
body:not(.home) .faq-list .faqquestion { color: var(--text-main) !important; }
body.home #toggleArea .accordion-toggle:hover,
body:not(.home) .faq-list .accordion-toggle:hover { background: var(--hybrid-wash); color: var(--text-main); }
body.home #toggleArea .accordion-inner,
body:not(.home) .faq-list .accordion-inner { background: #f2f6f7 !important; border-color: var(--line-soft); color: var(--text-soft); }
body.home #toggleArea blockquote,
body:not(.home) .faq-list blockquote,
body:not(.home) .faq-list .accordion-inner p { color: var(--text-soft); }
body:not(.home) .faq-list .accordion-inner.faqanswer::after { background: rgba(193,41,41,.28); }

/* Inner navigation and news presentation. */
body:not(.home) .pages-sub-menu li,
body:not(.home) .pages-sub-menu li a { background: var(--bg-panel) !important; color: var(--text-soft); }
body:not(.home) .pages-sub-menu li:hover a,
body:not(.home) .pages-sub-menu li.active a { background: var(--hybrid-wash) !important; color: var(--hybrid-accent-strong); }
body:not(.home) .pages-sub-menu li.active a { box-shadow: inset 3px 0 0 var(--hybrid-accent); }

.g360-news-card,
.g360-source-card,
.g360-news-empty,
.g360-why,
.g360-related-services { background: linear-gradient(145deg, #ffffff, #eef3f4) !important; }
.g360-news-card h3 a,
.g360-service-name,
.g360-news-type { color: var(--text-main) !important; }
.g360-news-meta,
.g360-news-source,
.g360-news-original { color: var(--text-muted); }
.g360-news-tag { background: #fbeaea; border-color: #e5bcbc; color: #8f1c20; }
.g360-news-tag--more,
.g360-pagination span,
.g360-copy-link,
.g360-service-card { background: var(--bg-panel-2); border-color: var(--line-soft); color: var(--text-soft); }
.g360-service-card:hover { background: var(--hybrid-wash); }

/* ==========================================================================
   CHARCOAL TOP UTILITY BAR  (client: "top band charcoal grey … like the old
   page"). The Daylight palette lifted this into daylight; the original site
   runs it near-black, so it comes back down here.
   ========================================================================== */
.topbar {
	background: var(--bg-deep) !important;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar p,
.topbar p span { color: #b9c1c8 !important; }
.topbar .social-icons li a { color: #b9c1c8; }
.topbar .social-icons li a:hover { color: #fff; }

/* Both chips sit on charcoal here, so the base theme's light-on-dark
   treatment is already correct — only the outline needs re-stating against
   the new bar colour. */
.topbar .social-icons .tooltipsterlogin {
	border-color: rgba(255,255,255,.28) !important;
	color: #e8edf1 !important;
}
.topbar .social-icons .tooltipsterlogin:hover {
	background: var(--brand-red) !important;
	border-color: var(--brand-red) !important;
	color: #fff !important;
}

/* ==========================================================================
   WHITE IDENTITY ROW
   ========================================================================== */
.site-header { background: var(--bg-section) !important; border-bottom: 1px solid var(--line-soft); }

/* Dark-ink logo now that the row is white. */
.site-header .site-logo img.default-logo,
.site-header .site-logo img.retina-logo { content: url(../siteimages/logo.png?v=4); }

.header-style3 #info-content > li { color: var(--text-soft); }
.header-style3 #info-content > li .ititle { color: var(--text-muted); }
.header-style3 #info-content > li i,
.header-style3 #info-content > li .hi-icon { color: var(--brand-red); }
#info-content li div.ititle span.acontactdetail_header,
#info-content .acontactdetail_header a,
#info-content a { color: var(--text-main); }
#info-content li:hover div.ititle span.acontactdetail_header,
#info-content li.hovered div.ititle span.acontactdetail_header { color: var(--hybrid-accent-strong); }

/* ==========================================================================
   WHITE PRIMARY NAVIGATION  (client: "the home / about row white, the ICES
   logo then has the correct colour and looks sharper")
   ========================================================================== */
.header-style3 .main-navigation,
.header-style3 .is-sticky .main-navigation {
	background: var(--hybrid-nav) !important;
	background-image: none !important;
	border-top: 1px solid var(--line-soft);
	border-bottom: 2px solid var(--brand-red);
	box-shadow: 0 2px 10px rgba(24,44,58,.14);
}
/* The base sheet carries a late `.dd-menu > li > a { color: black }` that ties
   with an unqualified selector here, so these are qualified with .header-style3
   to settle it outright rather than by source order. */
.header-style3 .dd-menu > li > a { color: var(--hybrid-nav-ink) !important; }
.header-style3 .dd-menu > li > a:hover,
.header-style3 .dd-menu > li.active > a,
.header-style3 .dd-menu > li:hover > a { color: var(--brand-red) !important; }
.header-style3 .dd-menu > li i.menuicons { color: #8b969d; }
.header-style3 .dd-menu > li:hover i.menuicons,
.header-style3 .dd-menu > li.active i.menuicons { color: var(--brand-red); }

/* The CICES mark is dark artwork — on white it needs no softening. */
.main-navigation .social-icons-colored img { opacity: 1; }

/* Dropdowns follow the white band. */
.header-style3 .dd-menu > li ul,
.dd-menu > li ul.menusubpages {
	background: var(--hybrid-nav-2) !important;
	border: 1px solid var(--line-soft);
	border-top: 2px solid var(--brand-red);
	box-shadow: var(--shadow-panel);
}
.dd-menu .menusubpages li a,
.dd-menu > li ul li a { color: var(--text-main) !important; }
.dd-menu .menusubpages li a:hover,
.dd-menu > li ul li a:hover { background: var(--hybrid-wash) !important; color: var(--hybrid-accent-strong) !important; }
.dd-menu .menusubpages li a i { color: var(--brand-red); }

/* Mobile chips sit on the white identity row → keep them dark. */
#menu-toggle,
#mobile-client-login {
	background: var(--bg-deep) !important;
	border: 1px solid var(--line-medium) !important;
	color: #fff !important;
}
#menu-toggle.opened { background: var(--brand-red) !important; border-color: var(--brand-red) !important; }

/* ==========================================================================
   HERO PHOTOGRAPH  (client: colour is good but "just a bit dark" — detail in
   the sub-station image is lost; the overlaid text should keep standing out)

   So: drop the warm red glow and most of the darkening from the photo itself,
   lift it slightly, and move the readability burden onto a scrim behind the
   caption only. Net effect — the image reads like the original's clear
   version, in colour, while the text keeps the panel it gained.
   ========================================================================== */
body.home .sliderbgimagediv,
body.home .sliderbgimagediv.isgrey {
	filter: saturate(1.04) contrast(1.06) brightness(1.10) !important;
}
body.home .sliderbgimagediv:after,
body.home li.righttext .sliderbgimagediv:after {
	background:
		linear-gradient(to top, rgba(6,9,12,.52) 0%, rgba(6,9,12,.14) 34%, transparent 58%);
	box-shadow: inset 0 0 160px 24px rgba(0,0,0,.22);
}

/* Caption scrim — a soft panel behind the text only, fading out toward the
   image. Mirrors the base theme's mobile treatment, softer, at every width. */
@media (min-width: 768px) {
	body.home .hero-slider .flex-caption { position: relative; }
	body.home .hero-slider .flex-caption::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(100deg, rgba(6,9,12,.78) 0%, rgba(6,9,12,.62) 34%, rgba(6,9,12,.22) 60%, rgba(6,9,12,0) 82%);
	}
	body.home .hero-slider li.righttext .flex-caption::before {
		background: linear-gradient(260deg, rgba(6,9,12,.78) 0%, rgba(6,9,12,.62) 34%, rgba(6,9,12,.22) 60%, rgba(6,9,12,0) 82%);
	}
	body.home .hero-slider .flex-caption-table,
	body.home .hero-slider .flex-caption-cell { position: relative; z-index: 2; }
}

/* ==========================================================================
   "IN AN INDUSTRY WHERE…" STRIP  (client: more transparent on the original,
   so the photograph behind shows through)

   The base theme replaced the flat red wash with a near-opaque three-stop
   gradient. Put the original back: flat brand red at .8.
   ========================================================================== */
body.home .parallax2 .overlay-accent {
	background: var(--brand-red) !important;
	opacity: .8;
}

/* ==========================================================================
   FOOTER  (client: "the bottom bit with the QR code the titles stand out much
   better in the old"). The original runs pure-white, tightly-spaced titles on
   near-black; the base theme softened both. Restore the original's weight.
   ========================================================================== */
.site-footer { background: var(--bg-deep); border-color: rgba(255,255,255,.08); color: #9aa5ac; }
/* The footer titles are <h4>, so this palette's own `h1–h6 { … !important }`
   above was dragging them to dark ink on the dark footer — that is exactly the
   washed-out look the client compared unfavourably with the original. Beat it
   with !important and hand the titles back to the original's white. */
.site-footer .widgettitle,
.site-footer .footer_widget h4.widgettitle {
	color: #fff !important;
	font-weight: 700;
}
.site-footer .widget_links a,
.site-footer .footer_widget a,
.site-footer .footer-menu a { color: #b4bec5; }
.site-footer .widget_links a:hover,
.site-footer .footer_widget a:hover,
.site-footer .footer-menu a:hover { color: #fff; }
.site-footer .grid-item-meta,
.site-footer .footer-row3 p { color: #828e96; }
.site-footer .g360-qr-title { color: #fff !important; }

/* ==========================================================================
   HOVER / LINK CONTRAST FIXES on the lighter surfaces
   ========================================================================== */
body.home .btn-cta-quote:hover { background: var(--brand-red) !important; color: #fff !important; border-color: var(--brand-red) !important; }
body.home .accordion-heading:hover h4.aquestion,
body.home .accordion-heading.active h4.aquestion { color: var(--text-main) !important; }
.g360-news-original:hover,
.g360-news-original:focus { color: var(--hybrid-accent-strong) !important; }

/* ==========================================================================
   PORTAL FILE MANAGER — hand these surfaces back to the component, exactly as
   the other light palettes do. css/portal-file-manager.css ships a deliberate
   dark palette; the global h1–h6 rule and `body:not(.home) .table` above would
   otherwise repaint it dark-on-dark.
   ========================================================================== */
.portal-fm-modal-panel h1,
.portal-fm-modal-panel h2,
.portal-fm-modal-panel h3,
.portal-fm-modal-panel h4,
.portal-fm-modal-panel h5,
.portal-fm-modal-panel h6,
.portal-fm-modal-head h4 { color: #f4f6f8 !important; }
body:not(.home) .table.portal-fm-list { background: #fff; color: #2e3640; }
body:not(.home) .table.portal-fm-list > thead > tr > th { background: #f7f9fb; color: #66717d; }
body:not(.home) .table.portal-fm-list > tbody > tr > td { border-color: #e6eaef; }

/* ==========================================================================
   CMS EDITOR SURFACE
   theme-refresh.css paints the Froala editing area dark, which was right when
   the public page was dark. This palette's pages are light, so the editor has
   to be light too or the admin is typing against a preview that lies. Matches
   the treatment in css/site-fixes.css.
   ========================================================================== */
.fr-box.fr-basic .fr-wrapper,
.fr-box.fr-basic .fr-element {
	background: #fff;
	color: var(--text-soft);
	border-color: #d5dae0;
}
.fr-box.fr-basic .fr-wrapper { border: 1px solid #d5dae0; box-shadow: none; }
.fr-box.fr-basic .fr-element:focus { box-shadow: inset 0 0 0 1px var(--brand-red); }
.fr-box .fr-element a { color: var(--hybrid-accent-strong); }
.fr-box .fr-element h1,
.fr-box .fr-element h2,
.fr-box .fr-element h3,
.fr-box .fr-element h4,
.fr-box .fr-element h5,
.fr-box .fr-element h6 { color: var(--text-main); }
.fr-box .fr-element table td,
.fr-box .fr-element table th { border-color: #d5dae0; }

/* The AI assistant is intentionally excluded from this light palette. */
#g360-chat-launch,
#g360-chat-box,
#g360-bot-nudge { color-scheme: dark; }

/* Keep Log Out visible: the refresh layer otherwise places it beneath Preview. */
#adminbutton {
	top: 0;
	right: 0;
	bottom: auto;
	left: auto;
	border-top: 0;
	border-right: 0;
	border-bottom: 2px solid rgba(255,255,255,.45);
	border-left: 2px solid rgba(255,255,255,.45);
	border-radius: 0 0 0 100%;
	z-index: 9999999;
}
#adminbutton a { padding: 0 0 20px 20px; }