/* =============================================================================
   18-callouts.css
   Callout band component. Global.

   Split out of style.css, which had grown to 3,647 lines. Loaded via
   wp_enqueue_style() in inc/enqueue.php - the load ORDER there matches the
   numeric filename order, and matches the order these rules appeared in the
   original file, so the cascade is unchanged.
   ============================================================================= */
/* ==========================================================================
   || CALLOUTS ||
   A full-width highlighted band: label, heading, copy, and a button on the
   right. Add one colour class and everything inside picks it up.

     <div class="callout callout_purple">
       <div class="callout_inner">
         <span class="callout_label">Every week, no booking needed</span>
         <h2>Never miss a job</h2>
         <p>...</p>
       </div>
       <div class="callout_action">
         <a class="purple_black_btn" href="#">Sign up</a>
       </div>
     </div>

   Colour:  callout_purple  callout_blue  callout_orange  callout_yellow
            callout_grey    (default if none given)
   Style:   (default = soft: beige panel, coloured border and label)
            callout_solid   filled with the colour, white text
            callout_edge    no border, thick coloured bar down the left only

   How it works: each colour class sets two custom properties, and every rule
   below reads from those. Adding a fifth colour is two lines, not ten.
     --callout-colour  the brand hex, used for borders and fills
     --callout-ink     a darkened version, used for text on the beige panel
                       (raw teal, orange and yellow are too light to read)
   ========================================================================== */

.callout {
	--callout-colour: var(--js-grey);
	--callout-ink: var(--js-grey);

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	border-radius: 20px;
	padding: 20px 25px;
	/* margin: 30px 0px; */
	scroll-margin-top: 120px;
	background-color: var(--js-beige);
	border: 2px solid var(--callout-colour);
}

.callout_inner {
	flex: 1 1 auto;
}

.callout_label {
	display: inline-block;
	font-family: "effrabold";
	font-size: 10pt;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--callout-ink);
	margin-bottom: 10px;
}

.callout_inner h2 {
	margin-bottom: 10px;
}

.callout_inner p {
	margin: 0;
	color: var(--js-grey);
	max-width: 640px;
}

.callout_action {
	flex: 0 0 auto;
}

.callout_action a {
	margin-bottom: 0;
}

/* --- Colours --- */

.callout_purple {
	--callout-colour: var(--js-purple);
	--callout-ink: var(--js-purple);
}

.callout_blue {
	--callout-colour: var(--js-blue);
	--callout-ink: #0a7a74;
}

.callout_orange {
	--callout-colour: var(--js-orange);
	--callout-ink: #c73f2a;
}

.callout_yellow {
	--callout-colour: var(--js-yellow);
	--callout-ink: #96700a;
}

.callout_grey {
	--callout-colour: var(--js-grey);
	--callout-ink: var(--js-grey);
}

/* --- Style variants --- */

/* Filled with the brand colour */
.callout_solid {
	background-color: var(--callout-colour);
	border-color: var(--callout-colour);
}

.callout_solid .callout_label,
.callout_solid .callout_inner h2,
.callout_solid .callout_inner p {
	color: #fff;
}

/* Yellow is too light for white text */
.callout_solid.callout_yellow .callout_label,
.callout_solid.callout_yellow .callout_inner h2,
.callout_solid.callout_yellow .callout_inner p {
	color: var(--js-grey);
}

/* --- Callout as a link ---------------------------------------------------
   When the whole callout is the clickable thing, write it as <a class="callout ...">
   and drop the inner button — you cannot nest a link or button inside a link,
   so it has to be one or the other.

   An <a> brings the browser's default link styling with it: blue text and an
   underline across everything inside. Nothing in this theme overrides that,
   which is why an un-reset link callout renders blue and underlined. These
   rules undo it and add a hover affordance in the button's place.
   -------------------------------------------------------------------------- */

a.callout {
	text-decoration: none;
	color: inherit;
	/* stops the heading inheriting browser link blue */
	cursor: pointer;
	transition:
		background-color 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}

/* make it work for other colours too?  */
a.callout:hover,
a.callout:focus-visible {
	background-color: #fde8e4;
	background-color: color-mix(in srgb, var(--js-purple) 30%, transparent);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}

/* No button inside, so don't leave a flex gap where it used to be */
a.callout .callout_action:empty {
	display: none;
}

/* Arrow stands in for the button — only when there is no button */
/* a.callout:has(.callout_action:empty)::after,
a.callout:not(:has(.callout_action))::after {
	content: "\2192";
	flex: 0 0 auto;
	font-family: "effrabold";
	font-size: 26pt;
	line-height: 1;
	color: var(--callout-ink);
	transition: transform 0.2s ease-in-out;
} */

a.callout:hover::after,
a.callout:focus-visible::after {
	transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {

	a.callout,
	a.callout::after {
		transition: none;
	}
}

/* Bar down the left edge instead of a full border */
.callout_edge {
	border: 0;
	border-left: 8px solid var(--callout-colour);
	border-radius: 0 20px 20px 0;
}

/* --- Responsive --- */

@media only screen and (max-width: 850px) {
	.callout {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		padding: 30px 28px;
	}
}

@media only screen and (max-width: 650px) {
	.callout {
		padding: 26px 24px;
		margin-top: 35px;
	}
}