/* ==========================================================================
   Adhoc Technology Solutions — site-wide visual refresh
   --------------------------------------------------------------------------
   Loaded LAST (after bootstrap.min.css, carousel.css, font-awesome, the
   Slick carousel CSS, and rss-ticker.css) so it can safely restyle all of
   them without fighting specificity. Nothing here changes page structure —
   it only restyles the existing Bootstrap "Freelancer" template markup:
   rounder corners and soft shadows on every image/card/frame, a calmer
   modern type scale, alternating panel backgrounds so long content sections
   don't read as one unbroken wall of text, restyled section headers,
   "card" treatment for the Services Offered icons, a refreshed hero
   carousel with a legible caption panel, and a very faint, fixed logo
   watermark behind the whole page.

   The one exception is index.html / index_Fr.html themselves, which each
   got three small, purely mechanical additions to support this file:
     1) <link href="css/site-redesign.css"> at the end of <head>
     2) <script src="js/read-more.js"></script> near the other scripts
     3) a handful of long paragraphs wrapped in <div class="js-readmore">
        so the "Read more" collapsing behavior (see the READ MORE section
        below, and js/read-more.js) has something to act on, plus the
        Google Map <iframe> wrapped in <div class="map-frame"> so its
        corners can be rounded (an <iframe> can't clip its own corners).
   No other HTML changed — every color, spacing, shape and font here comes
   from ordinary CSS selectors matching the template's existing classes.

   --------------------------------------------------------------------------
   QUICK REFERENCE — every setting in this file, in one place
   --------------------------------------------------------------------------
   Design tokens (all on :root, edit these first for any color/shape change):
     --adhoc-ink              Primary dark color (navbar, dark panels, footer).
     --adhoc-ink-soft         Slightly lighter dark, used for gradients/hover.
     --adhoc-paper            Main light page background.
     --adhoc-paper-alt        Slightly tinted background for alternating
                               featurette panels (see FEATURETTE PANELS).
     --adhoc-accent           The red accent color — buttons, links, section
                               underlines, icon badges, RSS ribbon (that last
                               one is actually set in css/rss-ticker.css, but
                               uses the same #d7263d red on purpose).
     --adhoc-accent-dark      Darker red, for hover states.
     --adhoc-ink-text         Body text color on light backgrounds.
     --adhoc-muted-text       Secondary/muted text color.
     --adhoc-radius           Standard corner rounding for images/cards.
     --adhoc-radius-sm        Smaller rounding, used for form fields.
     --adhoc-radius-lg        Larger rounding for the hero and big panels.
     --adhoc-radius-pill      Fully-rounded (pill) corners for buttons/badges.
     --adhoc-shadow           Standard soft drop shadow for raised elements.
     --adhoc-shadow-lg        Bigger shadow for hero/hover-lift states.
     --adhoc-watermark-size   Width of the faint background logo mark.
     --adhoc-watermark-opacity Opacity of the faint background logo mark
                               (0 = invisible, 1 = fully opaque — default is
                               intentionally very low, ~0.05, so it reads as
                               texture, not a duplicate logo fighting for
                               attention).

   Sections further down (search for the ALL-CAPS heading comments):
     BACKGROUND WATERMARK   the fixed, low-opacity images/logo-watermark.png
     NAVBAR                 nav link hover states, spacing
     HERO CAROUSEL          gradient overlay + caption card + rounded corners
     SECTION HEADERS        the centered heading + accent underline style
     ABOUT PANEL            the intro section's card treatment
     FEATURETTE PANELS      alternating background on the 5 Solutions rows
     ROUNDED IMAGES         corner rounding + shadow for all content images
     SERVICES CARDS         icon badges + card treatment for Services Offered
     PARTNER LOGOS          thumbnail rounding + grayscale/hover-color effect
     CONTACT & FORM         map frame, form field, button styling
     COOKIE BANNER          rounding to match the rest of the page
     FOOTER                 spacing, divider, link styling
     READ MORE              the collapsible-paragraph component (also needs
                            js/read-more.js — see that file's own reference
                            comment for its settings)
     RESPONSIVE TWEAKS      small adjustments below ~600px
   ========================================================================== */

:root {
	--adhoc-ink: #1b1e24;
	--adhoc-ink-soft: #2a2e37;
	--adhoc-paper: #f8f8f9;
	--adhoc-paper-alt: #eef0f3;
	--adhoc-accent: #d7263d;
	--adhoc-accent-dark: #a81f30;
	--adhoc-ink-text: #2b2e33;
	--adhoc-muted-text: #6b7280;
	--adhoc-radius: 16px;
	--adhoc-radius-sm: 10px;
	--adhoc-radius-lg: 22px;
	--adhoc-radius-pill: 999px;
	--adhoc-shadow: 0 10px 26px -14px rgba(20, 22, 30, 0.35);
	--adhoc-shadow-lg: 0 24px 48px -20px rgba(20, 22, 30, 0.45);
	--adhoc-watermark-size: 640px;
	--adhoc-watermark-opacity: 0.05;

	--adhoc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   BASE TYPOGRAPHY
   ========================================================================== */
body {
	font-family: var(--adhoc-font);
	color: var(--adhoc-ink-text);
	background: var(--adhoc-paper);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .navbar-brand, .featurette-heading {
	font-family: var(--adhoc-font);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--adhoc-ink);
}

p {
	max-width: 72ch; /* comfortable reading measure — long paragraphs stop
	                     stretching edge-to-edge on wide screens */
}
p.lead {
	max-width: 76ch;
	color: var(--adhoc-ink-text);
}

a {
	color: var(--adhoc-accent-dark);
}
a:hover, a:focus {
	color: var(--adhoc-accent);
}

/* ==========================================================================
   BACKGROUND WATERMARK
   --------------------------------------------------------------------------
   A single large, very faint copy of the circuit-mark from your logo,
   fixed behind the whole page. --adhoc-watermark-size controls how big it
   is; --adhoc-watermark-opacity controls how visible it is — raise it a
   little (e.g. 0.08–0.1) if you want it more noticeable, or set it to 0 to
   turn the watermark off entirely without removing this block.
   ========================================================================== */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url("../images/logo-watermark.png");
	background-repeat: no-repeat;
	background-position: center 15%;
	background-size: var(--adhoc-watermark-size) auto;
	opacity: var(--adhoc-watermark-opacity);
	pointer-events: none;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar-wrapper .navbar {
	border: 0;
	box-shadow: var(--adhoc-shadow);
}
.navbar-inverse {
	background: var(--adhoc-ink);
}
.navbar-nav > li > a {
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var(--adhoc-radius-pill);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
	background-color: var(--adhoc-accent);
	color: #fff;
}
.dropdown-menu {
	border-radius: var(--adhoc-radius);
	overflow: hidden;
	border: 0;
	box-shadow: var(--adhoc-shadow);
}

/* ==========================================================================
   HERO CAROUSEL
   ========================================================================== */
#myCarousel {
	overflow: hidden;
	border-radius: 0 0 var(--adhoc-radius-lg) var(--adhoc-radius-lg);
	box-shadow: var(--adhoc-shadow-lg);
}
#myCarousel .item::after {
	/* Dark gradient so white caption text stays legible over any photo. */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(10, 11, 14, 0.75) 0%,
		rgba(10, 11, 14, 0.15) 45%,
		rgba(10, 11, 14, 0) 70%
	);
	pointer-events: none;
}
.carousel-caption {
	right: 8%;
	left: 8%;
	bottom: 12%;
	text-shadow: none;
}
.carousel-caption h1 {
	color: #fff;
	font-size: 2.4rem;
	margin-bottom: 10px;
}
.carousel-caption p {
	color: #e7e8ea;
	font-size: 1.15rem;
	max-width: 60ch;
	margin: 0 auto;
}
.carousel-indicators li {
	border-color: rgba(255, 255, 255, 0.6);
}
.carousel-indicators .active {
	background-color: var(--adhoc-accent);
	border-color: var(--adhoc-accent);
}
.carousel-control .glyphicon {
	background: rgba(15, 16, 20, 0.45);
	border-radius: 50%;
	padding: 14px;
	width: 52px;
	height: 52px;
	top: 50%;
	margin-top: -26px;
}

/* ==========================================================================
   SECTION HEADERS
   --------------------------------------------------------------------------
   Replaces Bootstrap's plain full-width underline with a centered heading
   and a short accent-colored bar beneath it.
   ========================================================================== */
h2.page-header {
	border-bottom: 0;
	text-align: center;
	margin: 64px 0 40px;
	padding-bottom: 0;
	font-size: 2rem;
}
h2.page-header::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: var(--adhoc-accent);
	border-radius: var(--adhoc-radius-pill);
	margin: 16px auto 0;
}

/* ==========================================================================
   ABOUT PANEL
   --------------------------------------------------------------------------
   Targets the .about-panel class added to the About section's <div
   class="container"> in the HTML (a plain sibling/structural selector here
   would also catch the Contact and Partners sections' own <div
   class="container">, which is why this needed an explicit class instead).
   ========================================================================== */
.about-panel {
	background: #fff;
	border-radius: var(--adhoc-radius-lg);
	box-shadow: var(--adhoc-shadow);
	padding: 36px 40px;
}

/* ==========================================================================
   FEATURETTE PANELS (the 5 Solutions & Expertise sub-sections)
   --------------------------------------------------------------------------
   Alternating tinted background so five long text blocks in a row read as
   distinct panels instead of one continuous wall of text. The alternation
   uses an explicit .featurette-tint class on rows 1/3/5 in the HTML rather
   than :nth-of-type — :nth-of-type(odd/even) counts ALL sibling <div>s at
   that level (ticker container, About panel, Services/Partners rows, etc.
   are all <div>s at the same nesting level too), not just these five, so it
   would not reliably land on just this section's rows. The divider <hr
   class="featurette-divider"> between them is hidden in favor of the
   panels' own spacing.
   ========================================================================== */
.row.featurette {
	border-radius: var(--adhoc-radius-lg);
	padding: 32px 32px;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 28px;
	background: #fff;
	box-shadow: var(--adhoc-shadow);
}
.row.featurette.featurette-tint {
	background: var(--adhoc-paper-alt);
	box-shadow: none;
}
hr.featurette-divider {
	display: none;
}
.featurette-heading {
	color: var(--adhoc-accent-dark);
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
}
.featurette-heading + h2 {
	margin-top: 0;
	font-size: 1.6rem;
}

/* ==========================================================================
   ROUNDED IMAGES
   --------------------------------------------------------------------------
   Every content image (carousel slides excluded — those are covered by
   #myCarousel above) gets the same soft rounding and shadow, so nothing on
   the page still has a sharp rectangular corner.
   ========================================================================== */
.featurette-image {
	border-radius: var(--adhoc-radius);
	box-shadow: var(--adhoc-shadow);
	margin-bottom: 16px;
}

/* ==========================================================================
   SERVICES CARDS (the 6 "Services Offered" tiles)
   --------------------------------------------------------------------------
   Targets .services-row / .service-card, added explicitly in the HTML to
   the Services Offered <div class="row"> and its six column <div>s — see
   the note on the ABOUT PANEL above for why an explicit class is used
   instead of a structural selector here too.
   ========================================================================== */
.services-row .service-card {
	background: #fff;
	border-radius: var(--adhoc-radius);
	box-shadow: var(--adhoc-shadow);
	padding: 32px 24px;
	margin-bottom: 24px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.services-row .service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--adhoc-shadow-lg);
}
.services-row .service-card .glyphicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	font-size: 2.2rem !important;
	color: var(--adhoc-accent);
	background: rgba(215, 38, 61, 0.1);
	border-radius: 50%;
	margin-bottom: 18px;
}
.services-row .service-card h3 {
	margin-top: 0;
	font-size: 1.2rem;
}

/* ==========================================================================
   PARTNER LOGOS
   ========================================================================== */
.thumbnail {
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--adhoc-radius);
	box-shadow: var(--adhoc-shadow);
	padding: 18px;
	background: #fff;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.thumbnail:hover {
	transform: translateY(-3px);
	box-shadow: var(--adhoc-shadow-lg);
}
.thumbnail img {
	filter: grayscale(55%);
	opacity: 0.85;
	transition: filter 0.18s ease, opacity 0.18s ease;
}
.thumbnail:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ==========================================================================
   CONTACT & FORM
   ========================================================================== */
.map-frame {
	border-radius: var(--adhoc-radius-lg);
	overflow: hidden;
	box-shadow: var(--adhoc-shadow);
	line-height: 0; /* removes the few stray pixels an inline iframe adds
	                   beneath itself inside a block wrapper */
}
.map-frame iframe {
	display: block;
	width: 100%;
}

.form-control {
	border-radius: var(--adhoc-radius-sm);
	border: 1px solid #d7d9de;
	box-shadow: none;
	padding: 10px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
	border-color: var(--adhoc-accent);
	box-shadow: 0 0 0 3px rgba(215, 38, 61, 0.15);
}
.btn-primary {
	background: var(--adhoc-accent);
	border-color: var(--adhoc-accent);
	border-radius: var(--adhoc-radius-pill);
	padding: 10px 28px;
	font-weight: 600;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover,
.btn-primary:focus {
	background: var(--adhoc-accent-dark);
	border-color: var(--adhoc-accent-dark);
	transform: translateY(-1px);
}

/* ==========================================================================
   COOKIE BANNER
   --------------------------------------------------------------------------
   The banner's colors/layout are set inline in the HTML (kept there so it
   still works even if this stylesheet fails to load); this just rounds its
   top corners to match the rest of the page.
   ========================================================================== */
#cookieConsent {
	border-radius: var(--adhoc-radius) var(--adhoc-radius) 0 0 !important;
}
#cookieConsent button {
	border-radius: var(--adhoc-radius-pill) !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 24px;
	margin-top: 24px;
	color: var(--adhoc-muted-text);
}
footer a {
	color: var(--adhoc-ink-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
footer a:hover {
	color: var(--adhoc-accent-dark);
	border-bottom-color: currentColor;
}

/* ==========================================================================
   READ MORE
   --------------------------------------------------------------------------
   Collapses a long block of text down to --adhoc-readmore-collapsed-height
   with a soft fade at the cut line, plus a "Read more" / "Read less" toggle
   button that js/read-more.js inserts automatically. If a paragraph is
   already shorter than the collapsed height, the script leaves it fully
   visible and never adds a button — this only ever kicks in when there's
   actually more to hide.
   ========================================================================== */
:root {
	--adhoc-readmore-collapsed-height: 190px;
}
.js-readmore {
	position: relative;
	overflow: hidden;
	max-height: var(--adhoc-readmore-collapsed-height);
	transition: max-height 0.3s ease;
}
.js-readmore.js-readmore--expanded {
	max-height: none;
}
.js-readmore.js-readmore--clamped::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 56px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--adhoc-readmore-fade-color, #fff));
	pointer-events: none;
}
.js-readmore.js-readmore--expanded.js-readmore--clamped::after {
	opacity: 0;
}
.readmore-toggle {
	display: inline-block;
	margin: 10px 0 20px;
	padding: 6px 18px;
	border-radius: var(--adhoc-radius-pill);
	border: 1px solid var(--adhoc-accent);
	background: transparent;
	color: var(--adhoc-accent-dark);
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.readmore-toggle:hover,
.readmore-toggle:focus {
	background: var(--adhoc-accent);
	color: #fff;
}
/* The tinted featurette panels (see FEATURETTE PANELS above) have a
   non-white background, so their fade-out needs to match it instead of
   fading to white. */
.row.featurette.featurette-tint .js-readmore.js-readmore--clamped::after {
	--adhoc-readmore-fade-color: var(--adhoc-paper-alt);
}

/* ==========================================================================
   RESPONSIVE TWEAKS
   ========================================================================== */
@media (max-width: 767px) {
	h2.page-header {
		font-size: 1.6rem;
		margin: 40px 0 28px;
	}
	.carousel-caption h1 {
		font-size: 1.5rem;
	}
	.carousel-caption p {
		font-size: 0.95rem;
	}
	a[name="about"] ~ div.container {
		padding: 24px 20px;
	}
	.row.featurette {
		padding: 24px 18px;
	}
	:root {
		--adhoc-watermark-size: 380px;
	}
}
