/* =====================================================================
   Let's Talk Talent — UAE  ·  colour overrides
   Loaded LAST (after main.min.css + custom.css) so it wins by cascade.
   Base theme navbar was dark purple (#5d0d7e) with orange (#ff7e29) icons.
   UAE edition: black navigation bar + brand-pink (#d900aa) accents.
   Brand pink = #d900aa (the theme's own "as-pink" colour).
   ===================================================================== */

:root {
  --ltt-pink: #d900aa;
  --ltt-pink-dark: #b5008d;
  --ltt-black: #000000;
  /* Companion brand purple (base theme's #5d0d7e). Kept as a first-class
     colour so pink and purple pair together rather than pink replacing it.
     Used below for gradient accents; still fully available to authors via
     the WordPress "purple" block colour (.has-purple-*), which we leave
     untouched on purpose. */
  --ltt-purple: #5d0d7e;
  --ltt-purple-dark: #43095c;
  /* Pink → purple accent used on small brand bars/underlines */
  --ltt-brand-gradient: linear-gradient(90deg, var(--ltt-pink) 0%, var(--ltt-purple) 100%);
}

/* ---- Navigation bar: black background + pink underline accent ----
   NOTE: the base theme's navbar purple is overridden here, but the LIVE purple
   is actually injected by the `ltt-sticky-navigation` PLUGIN as an inline
   <style> in wp_head with:
        html body header.banner.navbar.navbar-default { background:#5D0D7F !important }
   (specificity 0,3,3 + !important, printed after our stylesheet). To win from
   the theme without touching that shared plugin, we match the same element
   chain and bump specificity with a repeated class (.navbar-default.navbar-default
   => 0,4,3) plus !important. This keeps the colour change theme-scoped/portable. */
html body header.banner.navbar.navbar-default.navbar-default,
html body header.banner.navbar.navbar-default.navbar-default.with-banner,
html body header.banner.navbar.navbar-default.navbar-default:not(.with-banner),
html body header.banner.navbar.navbar-default.navbar-default.affix,
html body header.banner.navbar.navbar-default.navbar-default.scrolled,
html body header.banner.navbar.navbar-default.navbar-default.is-sticky,
.banner.navbar-default {
  background: var(--ltt-black) !important;
  background-color: var(--ltt-black) !important;
  border-color: #000 !important;
  border-bottom: 3px solid var(--ltt-pink) !important; /* brand-pink accent strip */
}

/* Dropdown panels: solid black with a pink border.
   NOTE: the .navbar-collapse wrapper is deliberately NOT forced transparent
   here. The sticky-nav plugin now paints it solid black at every width; on
   mobile the collapse is the expanded menu panel (absolutely positioned below
   the bar), so a transparent background let the page show through it. Letting
   the plugin's black stand keeps the mobile menu opaque; on desktop black-on-
   black is visually identical to the old transparent rule. */
html body header.banner.navbar.navbar-default .dropdown-menu.dropdown-menu {
  background: var(--ltt-black) !important;
  background-color: var(--ltt-black) !important;
  border-color: var(--ltt-pink) !important;
}

/* Primary nav links: white, pink on hover/active */
.navbar-default .navbar-nav > li > a {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--ltt-pink);
  background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .current-menu-item > a {
  color: var(--ltt-pink);
  background-color: transparent;
}

/* Dropdown menus under the black bar */
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: var(--ltt-pink);
}

/* Mobile toggle ("hamburger") to pink on the black bar */
.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--ltt-pink);
}
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  border-color: var(--ltt-pink);
  background-color: transparent;
}

/* ---- Top-right contact/social strip: recolour orange icons to pink ---- */
#top-right-menu ul li.cdetails i {
  color: var(--ltt-pink);
}
#top-right-menu ul li.social a i:hover {
  color: var(--ltt-pink);
}

/* ---- Brand-pink sprinkle on shared/homepage elements ---- */
/* Primary buttons */
.btn-primary,
.wp-block-button__link,
.gform_button,
button.button {
  background-color: var(--ltt-pink);
  border-color: var(--ltt-pink);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.wp-block-button__link:hover,
.gform_button:hover,
button.button:hover {
  background-color: var(--ltt-pink-dark);
  border-color: var(--ltt-pink-dark);
  color: #fff;
}

/* Text-link hover accent (content area, not the nav which is handled above) */
.content a:not(.btn):not(.navbar-brand):hover,
.entry-content a:not(.btn):hover {
  color: var(--ltt-pink);
}

/* Small brand accents that read as "sprinkle" without repainting sections */
blockquote {
  border-left-color: var(--ltt-pink);
}
::selection {
  background: var(--ltt-pink);
  color: #fff;
}

/* =====================================================================
   Brand-pink promotion — make pink the primary UAE accent.
   These elements are painted brand-purple (#5d0d7e) by the compiled base
   theme (main.min.css). Each selector below matches the base rule exactly
   and, loading later, wins the cascade with no !important needed.
   Purple is not removed from the brand: the small accent bars render as a
   pink → purple gradient so the two colours read as one palette, and the
   author "purple" block colour is deliberately left in place.
   ===================================================================== */

/* Section-title & sidebar heading accent bars: pink → purple gradient */
.post-type-archive-courses h2:after,
.sidebar section h3:after {
  background: var(--ltt-brand-gradient);
}

/* Gravity Forms submit button (base uses input[type="submit"], purple) */
.gform_wrapper input[type="submit"] {
  background-color: var(--ltt-pink);
  border-color: var(--ltt-pink);
  color: #fff;
}
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper input[type="submit"]:focus {
  background-color: var(--ltt-pink-dark);
  border-color: var(--ltt-pink-dark);
  color: #fff;
}

/* Pagination hover: purple → pink */
.pagination a.page-numbers:hover {
  background-color: var(--ltt-pink);
  border-color: var(--ltt-pink);
  color: #fff;
}

/* =====================================================================
   Outline-button hover text colour fix.
   Outline buttons (.is-style-*-outline-button) fill with the accent
   colour on hover and the theme flips the label to a contrasting colour
   (main.min.css). But WordPress theme.json presets emit
   `.has-<x>-color{color:… !important}`, which beats the theme's
   non-!important hover colour — so the label stayed the same colour as
   the new background and vanished. Re-assert the contrast colour with
   !important + higher specificity so it wins. Covers the link and any
   inner <span> (e.g. .default-colour, which just inherits).
   ===================================================================== */
[class*="-outline-button"] .wp-block-button__link.has-purple-color:hover,
[class*="-outline-button"] .wp-block-button__link.has-purple-color:hover span,
[class*="-outline-button"] .wp-block-button__link.has-blue-color:hover,
[class*="-outline-button"] .wp-block-button__link.has-blue-color:hover span,
[class*="-outline-button"] .wp-block-button__link.has-pink-color:hover,
[class*="-outline-button"] .wp-block-button__link.has-pink-color:hover span,
[class*="-outline-button"] .wp-block-button__link.has-orange-color:hover,
[class*="-outline-button"] .wp-block-button__link.has-orange-color:hover span,
[class*="-outline-button"] .wp-block-button__link.has-green-color:hover,
[class*="-outline-button"] .wp-block-button__link.has-green-color:hover span,
[class*="-outline-button"] .wp-block-button__link.has-red-color:hover,
[class*="-outline-button"] .wp-block-button__link.has-red-color:hover span,
[class*="-outline-button"] .wp-block-button__link.has-softpink-color:hover,
[class*="-outline-button"] .wp-block-button__link.has-softpink-color:hover span,
[class*="-outline-button"] .wp-block-button__link.has-paragrey-color:hover,
[class*="-outline-button"] .wp-block-button__link.has-paragrey-color:hover span,
[class*="-outline-button"] .wp-block-button__link.has-black-color:hover,
[class*="-outline-button"] .wp-block-button__link.has-black-color:hover span,
[class*="-outline-button"] .wp-block-button__link.has-offblack-color:hover,
[class*="-outline-button"] .wp-block-button__link.has-offblack-color:hover span {
  color: #fbfbfb !important; /* light label on dark accent fill */
}
[class*="-outline-button"] .wp-block-button__link.has-white-color:hover,
[class*="-outline-button"] .wp-block-button__link.has-white-color:hover span,
[class*="-outline-button"] .wp-block-button__link.has-offwhite-color:hover,
[class*="-outline-button"] .wp-block-button__link.has-offwhite-color:hover span {
  color: #2b2f35 !important; /* dark label on light accent fill */
}