/* ==========================================================================
   Client overrides — Julian Davidson Pest Management
   --------------------------------------------------------------------------
   Hand-edited, per-client CSS. Loaded LAST (after the template's built-in
   styles), so anything here wins the cascade. This file is NEVER touched by a
   template re-sync or a Console build — it's yours to edit freely.

   Use it for client-specific look-and-feel: logo size, colours, spacing, etc.

   Note: CSS can only *style* elements that already exist. To add new markup
   (e.g. brand letters either side of the logo), edit this client's build.js /
   template.html — then style it here.
   ========================================================================== */


/* --- your overrides below --- */


/* Example — nudge the logo size:
.logo .logo-mark { height: 34px; }
*/
.logo .logo-mark { height: 54px; }

.logo-outline {
	border-radius: 50% 50%; 
	background-color: white; 
	display:flex; 
	flex-direction:row; 
	align-items: center; 
	justify-content: center; 
	border: 1px solid var(--accent);
	box-shadow: 0 0 10px var(--accent), 0 0 15px var(--accent);
}
/* Example — style brand letters you add around the logo in build.js
   (give your spans a class, then target it here):
.logo .flank {
  color: var(--accent);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
}
*/
.logo .flank {
  color: var(--accent);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  position: relative;
  text-shadow: -0.5px -0.5px 1px black;
}

.logo .flank-left {
	left: 5%;
}

.logo .flank-right {
	left: -5%;
}

.logo .nw { color: white; font-weight: bold;  white-space: nowrap; }     /* each phrase never breaks mid-word */
.logo .biz-sub { color: grey; }     /* "Pest Management" in light grey */

/* Mobile: name sits beside the logo as a stack — "Pest Management" directly under "Julian Davidson" */
@media (max-width: 540px) {
  .logo .lname {
    order: 1;                 /* keep the name on the logo row (not full-width row 2) */
    flex-basis: auto;
    display: flex;            /* stack the two phrases */
    flex-direction: column;
    line-height: 1.15;
  }
}