/*
==========================================================================
 AAKD DESIGN SYSTEM — "sticker" components
--------------------------------------------------------------------------
 One file, plain CSS variables — change a value once here and every
 eyebrow, button, card, badge, frame and menu heart on the site updates.

 HOW TO APPLY A COMPONENT (in Elementor):
   Any widget → Advanced tab → CSS Classes → type the class, e.g.:
     aakd-btn aakd-btn-primary        sticker button
     aakd-eyebrow aakd-eyebrow-yellow (heading/text widget)
     aakd-framed aakd-tilt-l          (image widget)
     aakd-info-card                   (column or container = sticker card)
     aakd-badge aakd-bg-red aakd-tilt-r (icon widget)

 HOW TO RECOLOR EVERYTHING: edit the hex values in :root below only.
==========================================================================
*/

:root {
	/* ---- Brand paints (edit me!) ---- */
	--aakd-ink:    #3B2A1E;   /* thick outline color */
	--aakd-red:    #C1392B;   /* logo heart red */
	--aakd-green:  #4F8F4A;   /* active state green */
	--aakd-blue:   #3E7FA8;
	--aakd-yellow: #F2C14E;
	--aakd-orange: #E8862E;
	--aakd-cream:  #FFF6E9;   /* paper */
	--aakd-white:  #FFFFFF;

	/* ---- Shared anatomy ---- */
	--aakd-line:        5px;    /* thick outline weight */
	--aakd-line-thin:   3px;
	--aakd-shadow:      7px 7px 0 rgba(59, 42, 30, 0.14);
	--aakd-shadow-soft: 5px 5px 0 rgba(59, 42, 30, 0.10);
	--aakd-font-hand:   "Caveat", cursive;
	--aakd-font-head:   "Baloo 2", sans-serif;
}

/* ============================ BUTTONS ================================= */
/* shapes: hand-drawn "blobby" radius + thick ink line (matches logo)    */

.elementor-widget-button[class*="aakd-btn"] .elementor-button,
a.aakd-btn,
.aakd-btn-primary, .aakd-btn-secondary, .aakd-btn-outline, .aakd-btn-outline-light {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--aakd-font-head);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	padding: 14px 30px;
	border: var(--aakd-line) solid var(--aakd-ink);
	border-radius: 40px 46px 42px 48px / 48px 40px 46px 42px;
	box-shadow: var(--aakd-shadow-soft);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

/* red sticker (main CTA) */
.elementor-widget-button.aakd-btn-primary .elementor-button,
.aakd-btn-primary {
	background: var(--aakd-red);
	color: #fff;
}
.elementor-widget-button.aakd-btn-primary .elementor-button:hover,
.aakd-btn-primary:hover {
	background: #A92E22;
	color: #fff;
	transform: translate(-2px, -2px) rotate(-0.6deg);
	box-shadow: var(--aakd-shadow);
}

/* yellow sticker */
.elementor-widget-button.aakd-btn-secondary .elementor-button,
.aakd-btn-secondary {
	background: var(--aakd-yellow);
	color: var(--aakd-ink);
}
.elementor-widget-button.aakd-btn-secondary .elementor-button:hover,
.aakd-btn-secondary:hover {
	background: #E3AC2F;
	color: var(--aakd-ink);
	transform: translate(-2px, -2px) rotate(-0.6deg);
	box-shadow: var(--aakd-shadow);
}

/* outline sticker (ink-on-paper look) */
.elementor-widget-button.aakd-btn-outline .elementor-button,
.aakd-btn-outline {
	background: var(--aakd-cream);
	color: var(--aakd-ink);
}
.elementor-widget-button.aakd-btn-outline .elementor-button:hover,
.aakd-btn-outline:hover {
	background: var(--aakd-ink);
	color: var(--aakd-cream);
	border-color: var(--aakd-ink);
	transform: translate(-2px, -2px) rotate(-0.6deg);
	box-shadow: var(--aakd-shadow);
}

/* outline for use ON colored/dark bands */
.elementor-widget-button.aakd-btn-outline-light .elementor-button,
.aakd-btn-outline-light {
	background: transparent;
	color: #fff;
	border-color: #fff;
}
.elementor-widget-button.aakd-btn-outline-light .elementor-button:hover,
.aakd-btn-outline-light:hover {
	background: #fff;
	color: var(--aakd-ink);
	border-color: #fff;
	transform: translate(-2px, -2px) rotate(-0.6deg);
	box-shadow: var(--aakd-shadow);
}

.elementor-widget-button[class*="aakd-btn"] .elementor-button-icon {
	font-size: 0.95em;
}

/* WPForms submit inherits the primary sticker */
.wpforms-container .wpforms-submit,
.wpforms-container button[type="submit"] {
	background: var(--aakd-red) !important;
	border: var(--aakd-line) solid var(--aakd-ink) !important;
	border-radius: 40px 46px 42px 48px / 48px 40px 46px 42px !important;
	box-shadow: var(--aakd-shadow-soft) !important;
	font-family: var(--aakd-font-head) !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.wpforms-container .wpforms-submit:hover,
.wpforms-container button[type="submit"]:hover {
	background: #A92E22 !important;
	border-color: var(--aakd-ink) !important;
	transform: translate(-2px, -2px) rotate(-0.6deg);
	box-shadow: var(--aakd-shadow) !important;
}

/* ============================ EYEBROWS ================================ */
/* sticker chip kickers (Caveat script + tiny star)                      */
/* — the chip paints the heading TEXT only, never the row behind it      */

.elementor-widget.aakd-eyebrow .elementor-heading-title,
span.aakd-eyebrow {
	display: inline-block;
	width: auto;
	font-family: var(--aakd-font-hand);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.15;
	padding: 4px 18px 7px 30px;
	border: var(--aakd-line-thin) solid var(--aakd-ink);
	border-radius: 22px 26px 20px 28px / 26px 20px 28px 22px;
	box-shadow: var(--aakd-shadow-soft);
	position: relative;
	transform: rotate(-1.6deg);
	background: var(--aakd-yellow);
	color: var(--aakd-ink);
}

/* the tiny star on the left */
.elementor-widget.aakd-eyebrow .elementor-heading-title::before,
span.aakd-eyebrow::before {
	content: "✦";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-54%);
	font-size: 13px;
	font-family: "Nunito", sans-serif;
}

.elementor-widget.aakd-eyebrow-yellow .elementor-heading-title,
span.aakd-eyebrow-yellow { background: var(--aakd-yellow); color: var(--aakd-ink); }
.elementor-widget.aakd-eyebrow-orange .elementor-heading-title,
span.aakd-eyebrow-orange { background: var(--aakd-orange); color: #fff; }
.elementor-widget.aakd-eyebrow-red .elementor-heading-title,
span.aakd-eyebrow-red    { background: var(--aakd-red); color: #fff; }
.elementor-widget.aakd-eyebrow-blue .elementor-heading-title,
span.aakd-eyebrow-blue   { background: var(--aakd-blue); color: #fff; }
.elementor-widget.aakd-eyebrow-green .elementor-heading-title,
span.aakd-eyebrow-green  { background: var(--aakd-green); color: #fff; }

/* ========================== INFO CARDS ================================ */
/* sticker-framed card: thick ink line, blobby radius, hard shadow       */

.elementor-column.aakd-info-card,
.aakd-info-card {
	background: var(--aakd-white);
	border: var(--aakd-line) solid var(--aakd-ink);
	border-radius: 30px 36px 28px 38px / 36px 28px 38px 30px;
	box-shadow: var(--aakd-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.elementor-column.aakd-info-card:hover,
.aakd-info-card:hover {
	transform: translate(-2px, -3px);
	box-shadow: 9px 10px 0 rgba(59, 42, 30, 0.16);
}

/* ======================= ICON "BADGE" CIRCLES ========================= */
/* colored sticker circle behind an icon, with gentle tilt               */

.elementor-widget-icon.aakd-badge .elementor-icon,
.elementor-widget-icon-box.aakd-badge .elementor-icon-box-icon .elementor-icon {
	border: 4px solid var(--aakd-ink);
	border-radius: 999px;
	box-shadow: var(--aakd-shadow-soft);
	width: 82px;
	height: 82px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: rotate(-4deg);
	background: var(--aakd-yellow);
}
.elementor-widget-icon-box.aakd-badge .elementor-icon-box-icon .elementor-icon i {
	font-size: 34px;
}

.aakd-badge.aakd-tilt-r .elementor-icon,
.aakd-badge.aakd-tilt-r .elementor-icon-box-icon .elementor-icon { transform: rotate(4deg); }

.aakd-badge.aakd-bg-yellow .elementor-icon,
.aakd-badge.aakd-bg-yellow .elementor-icon-box-icon .elementor-icon { background: var(--aakd-yellow); }
.aakd-badge.aakd-bg-red .elementor-icon,
.aakd-badge.aakd-bg-red .elementor-icon-box-icon .elementor-icon { background: var(--aakd-red); }
.aakd-badge.aakd-bg-orange .elementor-icon,
.aakd-badge.aakd-bg-orange .elementor-icon-box-icon .elementor-icon { background: var(--aakd-orange); }
.aakd-badge.aakd-bg-blue .elementor-icon,
.aakd-badge.aakd-bg-blue .elementor-icon-box-icon .elementor-icon { background: var(--aakd-blue); }
.aakd-badge.aakd-bg-green .elementor-icon,
.aakd-badge.aakd-bg-green .elementor-icon-box-icon .elementor-icon { background: var(--aakd-green); }

/* Badge support when the badge is an IMAGE widget holding hand-drawn SVG
   artwork instead of a font glyph — same candy circle, size and tilt. */
.elementor-widget-image.aakd-badge .elementor-widget-container {
	border: 4px solid var(--aakd-ink);
	border-radius: 999px;
	box-shadow: var(--aakd-shadow-soft);
	width: 82px;
	height: 82px;
	padding: 0;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: rotate(-4deg);
	background: var(--aakd-yellow);
	transition: transform 0.18s ease;
}
.elementor-widget-image.aakd-badge.aakd-tilt-r .elementor-widget-container { transform: rotate(4deg); }
.elementor-widget-image.aakd-badge img {
	width: 44px;
	height: 44px;
	display: block;
	object-fit: contain;
	margin: 0;
}
.elementor-widget-image.aakd-badge.aakd-bg-yellow .elementor-widget-container { background: var(--aakd-yellow); }
.elementor-widget-image.aakd-badge.aakd-bg-red    .elementor-widget-container { background: var(--aakd-red); }
.elementor-widget-image.aakd-badge.aakd-bg-orange .elementor-widget-container { background: var(--aakd-orange); }
.elementor-widget-image.aakd-badge.aakd-bg-blue   .elementor-widget-container { background: var(--aakd-blue); }
.elementor-widget-image.aakd-badge.aakd-bg-green  .elementor-widget-container { background: var(--aakd-green); }

/* ========================= FRAMED PHOTOS ============================== */
/* photos with the thick ink frame + optional tilt / blob crop           */

.elementor-widget-image.aakd-framed .elementor-widget-container,
.elementor-widget-image.aakd-framed img,
.aakd-framed img {
	border: var(--aakd-line) solid var(--aakd-ink);
	border-radius: 24px;
	box-shadow: var(--aakd-shadow);
}
.elementor-widget-image.aakd-framed img {
	display: block;
}
.elementor-widget-image.aakd-tilt-l .elementor-widget-container { transform: rotate(-1.4deg); }
.elementor-widget-image.aakd-tilt-r .elementor-widget-container { transform: rotate(1.4deg); }
.elementor-widget-image.aakd-frame-blob img {
	border-radius: 58% 42% 46% 54% / 44% 55% 45% 56%;
}

/* ======================= NUMBER BADGES (steps) ======================== */
/* big round step number in a sticker circle                             */

.elementor-widget.aakd-number .elementor-heading-title {
	width: 74px;
	height: 74px;
	margin: 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--aakd-yellow);
	border: 4px solid var(--aakd-ink);
	border-radius: 999px;
	box-shadow: var(--aakd-shadow-soft);
	transform: rotate(-3deg);
	font-family: var(--aakd-font-head);
}

/* ======================= NAV MENU HEARTS ============================== */
/* red heart beside each header link; thick ink underline on hover;      */
/* green heart + permanent green underline on the current page           */

.site-navigation ul.menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	position: relative;
	padding: 10px 12px 14px; /* reserve underline space, no layout jump */
	transition: transform 0.15s ease;
}

/* the heart (bow-heart from the logo; swap the mask to tweak the shape) */
.site-navigation ul.menu > li > a::before {
	content: "";
	width: 19px;
	height: 18px;
	flex: 0 0 auto;
	background-color: var(--aakd-red);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1.5 14.6 1.5 7.9C1.5 4.2 4.2 1.5 7.4 1.5c1.9 0 3.6 1 4.6 2.6 1-1.6 2.7-2.6 4.6-2.6 3.2 0 5.9 2.7 5.9 6.4C22.5 14.6 12 21 12 21Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1.5 14.6 1.5 7.9C1.5 4.2 4.2 1.5 7.4 1.5c1.9 0 3.6 1 4.6 2.6 1-1.6 2.7-2.6 4.6-2.6 3.2 0 5.9 2.7 5.9 6.4C22.5 14.6 12 21 12 21Z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.18s ease;
}

/* thick ink underline (hidden until hover/active) */
.site-navigation ul.menu > li > a::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 4px;
	height: 4px;
	border-radius: 2px;
	background: transparent;
	transition: background-color 0.15s ease;
}

.site-navigation ul.menu > li > a:hover {
	transform: translateY(-1px);
	color: var(--aak-ink);
	background: none;
}
.site-navigation ul.menu > li > a:hover::before { transform: scale(1.18) rotate(-4deg); }
.site-navigation ul.menu > li > a:hover::after { background: var(--aakd-ink); }

/* current page: green heart + permanent green underline */
.site-navigation ul.menu > li.current-menu-item > a::before,
.site-navigation ul.menu > li.current_page_item > a::before {
	background-color: var(--aakd-green);
}
.site-navigation ul.menu > li.current-menu-item > a::after,
.site-navigation ul.menu > li.current_page_item > a::after {
	background: var(--aakd-green);
}
.site-navigation ul.menu > li.current-menu-item > a,
.site-navigation ul.menu > li.current_page_item > a {
	color: var(--aakd-ink);
	background: none;
}

/* the enrol CTA keeps its pill look (no heart/underline) */
.site-navigation ul.menu > li.aak-header-cta > a::before,
.site-navigation ul.menu > li.aak-header-cta > a::after { content: none; }

/* footer nav-links color convenience */
.aak-site-footer a { transition: color 0.15s ease; }