/* ==========================================================================
   NelsonelTech additions on top of the HostMe theme.

   Deliberately minimal: the HostMe look is the reference, so this file only
   styles things the theme has no equivalent for (Django messages, form
   errors, the captcha widget, the WhatsApp button). It must not restyle
   anything the theme already handles.
   ========================================================================== */

/* --- Django messages framework ------------------------------------------ */
.dj-messages {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 1080;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dj-messages .alert {
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

@media (max-width: 575px) {
	.dj-messages {
		top: 12px;
		right: 12px;
		left: 12px;
		max-width: none;
	}
}

/* --- Form validation errors --------------------------------------------- */
.field-error {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #FF715E;
}

/* --- Captcha widget ------------------------------------------------------ */
.captcha-block {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.captcha-block img { border-radius: 8px; }

.captcha-block input[type="text"] {
	flex: 1 1 180px;
	min-width: 160px;
}

/* --- Images coming from the database ------------------------------------- */
/* Keeps uploaded images inside the slots the theme's own images occupy. */
.db-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Legal pages (privacy / terms) — no HostMe equivalent ---------------- */
.legal-content {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 40px;
}

.legal-content h4 {
	margin-top: 32px;
	margin-bottom: 16px;
}

.legal-content h4:first-of-type { margin-top: 0; }

@media (max-width: 575px) {
	.legal-content { padding: 24px; }
}

/* --- Blog image slots ---------------------------------------------------
   The theme sets only `width: 100%` on blog images and relies on every
   source file already having the same aspect ratio. Uploaded images are
   arbitrary sizes, which would give cards different heights and break the
   grid. These rules pin each slot to the ratio the theme's own artwork uses
   and crop to fill, so the images shipped with the template and anything
   uploaded later render identically.

   Measured from the theme's files:
     blog cards      448x278  -> 1.61  (16/10)
     sidebar thumbs  140x100  -> 1.40  (7/5)
     detail hero     952x410  -> 2.32  (32/14)
   ------------------------------------------------------------------------ */

/* Card images — blog listing, related posts, home page */
.blog-sec .blog-card .card-img {
	display: block;
	aspect-ratio: 16 / 10;
}

.blog-sec .blog-card .card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sidebar "Recent Articles" thumbnails */
.blog-detail-sec .sidebar .recent-blog .recent-img {
	display: block;
	aspect-ratio: 7 / 5;
}

.blog-detail-sec .sidebar .recent-blog .recent-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Lead image on a single post */
.blog-hero-img {
	aspect-ratio: 32 / 14;
	object-fit: cover;
}

/* --- Equal-height feature cards ----------------------------------------
   The theme's .hosting-block has no height, so each card shrinks to its own
   content and a row ends up ragged whenever one card's text wraps to an
   extra line. Bootstrap already stretches the column; this makes the card
   fill it, so every card in a row matches the tallest — at any width and
   whatever copy goes in later.
   ---------------------------------------------------------------------- */
.about-sec .hosting-block {
	height: 100%;
}

/* --- Product detail: text wraps the image, then runs full width ---------
   A two-column grid forced the whole description into half the page, so a
   long product write-up left a tall empty gap beside it. Floating the image
   instead lets the copy sit alongside it and then reflow to the full
   container width once it clears the bottom of the image.
   ---------------------------------------------------------------------- */
.about-sec .product-about::after {
	content: "";
	display: block;
	clear: both;
}

.about-sec .product-about__media {
	float: right;
	width: 48%;
	margin: 0 0 40px 48px;
}

/* Below the theme's lg breakpoint the float is dropped so the image simply
   stacks above the text, as the original two-column layout did. */
@media (max-width: 991px) {
	.about-sec .product-about__media {
		float: none;
		width: 100%;
		margin: 0 0 32px 0;
	}
}

/* The description is long-form prose here, so give it room to breathe. */
.about-sec .product-about .rich-content h2,
.about-sec .product-about .rich-content h3,
.about-sec .product-about .rich-content h4 {
	margin-top: 32px;
	margin-bottom: 16px;
}

.about-sec .product-about .rich-content p {
	margin-bottom: 16px;
}

/* Heading sits above the floated image and owns the full width, so a long
   product name can't half-wrap around the image and strand its first word. */
.about-sec .product-about > h2 {
	clear: both;
}

/* --- Service cards ("What We Offer") ------------------------------------
   The theme sets only a `transition` on these images — no width, height or
   object-fit — because its own artwork is already the right size and shape
   (img-1..4 are ~382x388, i.e. square; img-5 is 1332x582). An uploaded image
   therefore renders at its natural size, overflowing the card and colliding
   with the row beneath, and cards end up ragged because .service-card has no
   height either.

   These rules pin each image slot to the ratio the theme's artwork uses and
   make every card in a row match the tallest.
   ---------------------------------------------------------------------- */
/* Equal heights without a percentage height: making the Bootstrap column a
   flex container lets the card stretch to the row's height via the default
   align-items:stretch. A `height:100%` here resolves against a column whose
   own height depends on this card, which browsers can settle at the content
   height — leaving text spilling past the card border and colliding with the
   row below. overflow:hidden is a belt-and-braces guard on that. */
.hosting-service .row > [class*="col-"] {
	display: flex;
	align-items: stretch;
}

.hosting-service .service-card {
	width: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* The image must not be squashed by the flex layout — it keeps the ratio set
   below and the content takes the remaining space. */
.hosting-service .service-card .card-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Push the button to the bottom of the card. Without this, a title that wraps
   to two lines drops its button lower than its neighbours', which is what
   makes an otherwise equal-height row still look ragged. */
.hosting-service .service-card .card-content .card-btn {
	margin-top: auto;
	align-self: flex-start;
}

.hosting-service .service-card .card-img {
	width: 100%;
	flex: 0 0 auto;
	/* `height: auto` is load-bearing: these images also carry .db-img, which
	   sets height:100%. On a blog card that's correct (the <a> wrapper owns
	   the ratio and the image fills it) but here .card-img IS the image, so
	   a percentage height overrides the aspect-ratio below and the image
	   stretches to the card instead of being cropped to shape. */
	height: auto;
	display: block;
	object-fit: cover;
	border-radius: clamp(8px, 0.625vw, 24px);
}

/* Cards 1-4 — same 16:10 slot the blog cards use, so the two card styles
   sit at a matching height rather than the square the theme's artwork implies. */
.hosting-service .service-card .card-img.mb-32 {
	aspect-ratio: 16 / 10;
}

/* The wide 5th card — theme artwork 1332x582 (~2.29:1) */
.hosting-service .service-card .card-img:not(.mb-32) {
	aspect-ratio: 32 / 14;
}

/* Keep the blurb to a consistent number of lines so titles of differing
   length don't stagger the buttons across a row. */
.hosting-service .service-card .card-content > p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Logo: one consistent size everywhere -------------------------------
   HostMe ships two logo files — a small logo.webp (142x42) for the header
   and a larger footer-logo.webp (341x108) — so it sizes each slot by width
   independently: ~110px in the header, ~178px in the footer, ~160px in the
   mobile drawer. We use a single file in all three, which therefore rendered
   at three different sizes.

   Sizing by HEIGHT instead of width makes the logo visually identical in
   every slot and keeps working if the logo file is ever swapped for one with
   a different aspect ratio. 2.2vw lands at ~38px on a desktop viewport, which
   matches the height HostMe's own header logo renders at.
   ---------------------------------------------------------------------- */
.header .main-menu .navigation .header-logo,
.stricky-header .sticky-header__content .navigation .header-logo,
footer .footer-logo img,
.mobile-nav__wrapper .mobile-nav__content .logo-box img {
	width: auto;
	height: clamp(32px, 2.2vw, 46px);
	max-width: 100%;
	object-fit: contain;
}

/* --- Hero: "Your Business" pill ------------------------------------------
   The theme pins this pill with position:absolute and a hard-coded
   right:86.766px, tuned to HostMe's exact headline ("…Solutions for").
   Any other wording lands the pill on top of the preceding word — here it
   covered "for". Returning it to the normal text flow lets it sit after the
   last word whatever the headline says; the rotation, background and
   gradient text are kept. Same specificity as the theme's media-query
   overrides and loaded later, so this wins at every breakpoint.
   ---------------------------------------------------------------------- */
.hero-banner .hero-content h1 .business {
	position: relative;
	right: auto;
	bottom: auto;
	vertical-align: middle;
	margin-left: clamp(4px, 0.4vw, 10px);
}

/* --- Partner logo strip ---------------------------------------------------
   The theme has no rules for .brand-image because HostMe's own logos are all
   identical 268x100 grey marks. Uploaded partner logos come in every size and
   often carry their own background box, so the strip looked ragged.

   Each logo now sits in an identical tile: same height, same light
   background, same rounded corners, with the logo contained and centred.
   Logos are shown slightly desaturated so the strip reads as one set, and
   return to full colour on hover. mix-blend-mode:multiply lets white or light
   backgrounds baked into a logo file dissolve into the tile.
   ---------------------------------------------------------------------- */
.brand-sec .brand-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(72px, 5.8vw, 110px);
	padding: clamp(10px, 0.8vw, 18px) clamp(16px, 1.4vw, 28px);
	/* transparent side borders make the gap between tiles; the background
	   stops at the padding edge so it doesn't fill that gap */
	border-left: clamp(6px, 0.5vw, 12px) solid transparent;
	border-right: clamp(6px, 0.5vw, 12px) solid transparent;
	/* A faint wash of the theme's gold -> cyan gradient (#fddc8b -> #28d0e8,
	   the same pair used on the site's buttons) over a light base: gold at the
	   top-left, cyan at the bottom-right, neutral through the middle so logos
	   still sit on a clean background. */
	background:
		linear-gradient(135deg,
			rgba(253, 220, 139, 0.22) 0%,
			rgba(253, 220, 139, 0) 45%,
			rgba(40, 208, 232, 0) 55%,
			rgba(40, 208, 232, 0.22) 100%),
		#f7f7f7;
	background-clip: padding-box;
	border-radius: clamp(12px, 1vw, 20px);
	isolation: isolate;
	box-sizing: border-box;
}

.brand-sec .brand-image a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.brand-sec .brand-image img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	/* Muted rather than greyscale: every logo keeps its own colours, but at a
	   softened, even saturation so no single brand shouts over the others. */
	filter: saturate(0.6) contrast(1.02);
	mix-blend-mode: multiply;
	opacity: 0.9;
	transition: filter 0.4s ease, opacity 0.4s ease;
}

.brand-sec .brand-image:hover img {
	filter: none;
	opacity: 1;
}

/* --- Header WhatsApp button ---------------------------------------------
   Keeps the theme's .cus-btn2 pill exactly as it was for the "Get a Quote"
   button - same padding, radius and translucent fill - and only swaps the
   arrow for a WhatsApp mark. It carries the pulse the floating button used to
   have, but in the theme's cyan (#28d0e8) rather than WhatsApp green, so it
   draws the eye while still belonging to the header.
   ---------------------------------------------------------------------- */
/* The pulse the floating button used to have, recoloured from WhatsApp green
   to the theme's cyan so it draws the eye without clashing with the header. */
.cus-btn2.wa-btn {
	animation: wa-pulse-glow 2.4s ease-in-out infinite;
	transition: transform 0.3s ease;
}

.cus-btn2.wa-btn:hover {
	animation: none;
	transform: scale(1.04);
}

@keyframes wa-pulse-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(40, 208, 232, 0.55); }
	50%      { box-shadow: 0 0 0 14px rgba(40, 208, 232, 0); }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
	.cus-btn2.wa-btn {
		animation: none;
	}
}

/* The theme slides a gradient panel (.cus-btn2::before) across the button on
   hover and keeps .text and svg above it with z-index:4. The icon is an <i>,
   so it needs the same treatment or the panel hides it. On hover it turns
   dark like the label, since the panel it sits on is light. */
.cus-btn2.wa-btn .fa-whatsapp {
	position: relative;
	z-index: 4;
	font-size: clamp(18px, 1.15vw, 26px);
	line-height: 1;
	color: #28d0e8;
	transition: color 0.5s ease-in-out;
}

.cus-btn2.wa-btn:hover .fa-whatsapp {
	color: #0c0c0d;
}