/*
Theme Name:  A+A Media & Events
Theme URI:   https://aa-mediaevents.com/
Description: Child theme of Salient carrying the A+A Media & Events identity: League Spartan display type, the orange/black logo palette, the dark-orange duotone on every image, and a floating WhatsApp button. Parent theme updates do not touch anything in here.
Author:      A+A Media & Events
Author URI:  https://aa-mediaevents.com/
Template:    salient
Version:     1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aa-media-events
*/

/* ==========================================================================
   A+A Media & Events — Salient child
   This file is loaded AFTER every Salient stylesheet (see functions.php), so
   plain selectors win on source order and !important is used only where
   Salient itself sets a property !important. Nothing here edits the parent.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --aa-paper:     #ffffff;
  --aa-paper-2:   #f5f5f3;

  --aa-ink:       #262933;
  --aa-ink-2:     #5e626c;
  --aa-ink-3:     #93969e;
  --aa-line:      rgba(38, 41, 51, .14);

  /* Brand, taken from the logo: orange over black over white.
     The orange is split in two because the two jobs have different floors.
     --aa-brand-fill is the big painted surface — buttons, CTA blocks, filled
     panels — where the type on it is display-size or a short all-caps label.
     Large text only needs 3:1, so the fill can be the lighter, more saturated
     orange the identity wants: #e8490a, 3.9:1 on white.
     --aa-brand-ink is the one used at text size on paper — links, labels —
     where the floor is 4.5:1. #d93d00 is the most vivid orange that clears it
     (4.55:1). The bright --aa-brand is 2.9:1 and never carries text. */
  --aa-brand:      #ff6633;
  --aa-brand-2:    #f24e0d;
  --aa-brand-fill: #e8490a;
  --aa-brand-ink:  #d93d00;
  --aa-brand-on:   #17181d;

  /* Headings are set in Futura Fat. Futura is a licensed face that cannot be
     served, so the served font is League Spartan — ATF's Spartan, drawn as a
     direct Futura counterpart, at the weight Futura Fat implies. Futura stays
     in the stack behind it for anyone who has it installed locally. */
  --aa-display:   "League Spartan", "Futura", "Century Gothic", system-ui, sans-serif;
  --aa-sans:      "Figtree", -apple-system, "Segoe UI", sans-serif;
  --aa-mono:      "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --aa-ease:      cubic-bezier(.22, 1, .36, 1);

  /* One ink for every photograph: a dark burnt orange off the logo.
     grayscale flattens whatever the frame was shot in; the FIRST brightness
     pulls it down before sepia so the warm tone has headroom — without it,
     sepia's matrix (R = 1.35 x grey) clips the bright half of a frame and CSS
     hue-rotate, a linear approximation rather than a true rotation, turns the
     clipped area olive. sepia lays the tone, hue-rotate pulls it from sepia's
     brown (~38deg) to the brand orange (~16deg), and the SECOND brightness
     sets what white type reads against. */
  --aa-duo: grayscale(1) brightness(.5) sepia(1) saturate(3.5) hue-rotate(-21deg) brightness(.74) contrast(1.05);
  /* The same ink two stops lighter, for portraits: at full strength a face
     closes up into a silhouette. The FIRST brightness stays at .5 — that is
     what keeps sepia out of the clipping range — so the lift is taken on the
     SECOND, and saturate eases back to leave the red channel headroom. */
  --aa-duo-soft: grayscale(1) brightness(.5) sepia(1) saturate(2.3) hue-rotate(-21deg) brightness(1.62) contrast(.98);
}

/* --- Type --------------------------------------------------------------- */
body,
body .container-wrap,
body #search-results .result .title p,
body input, body textarea, body select, body button {
  font-family: var(--aa-sans);
  color: var(--aa-ink);
}

h1, h2, h3, h4, h5, h6,
.nectar-flickity .cell h2,
.wpb_wrapper h1, .wpb_wrapper h2, .wpb_wrapper h3, .wpb_wrapper h4,
#header-outer .nectar-mobile-only h1,
.nectar_hook_global_section h1, .nectar_hook_global_section h2 {
  font-family: var(--aa-display);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.02;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

/* The micro-labels — eyebrows, categories, meta rows — are the one place the
   mono face is used. Salient sets several of these in the body font. */
.nectar-post-grid-item .meta-category a,
.post-header .meta-category a,
.blog-recent .post-meta,
#single-below-header span,
.widget .tagcloud a,
.wp-block-post-date,
.aa-eyebrow {
  font-family: var(--aa-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- Images: one ink ---------------------------------------------------- */
/* Every picture the editor can place, in the markup Salient actually emits.
   Logos and icons are exempted below — they are already brand-coloured and a
   duotone over them only muddies the mark. */
.wp-block-image img,
.wpb_single_image img,
.img-with-aniamtion,
.nectar-post-grid-item .nectar-post-grid-item-bg,
.post-featured-img img,
.nectar-fancy-box .image-bg,
.nectar-flickity .cell .nectar-post-grid-item-bg,
article .post-featured-img img,
.portfolio-items .work-item img,
.row .col img.wp-post-image,
.page-header-bg-image,
.parallax_slider_outer .swiper-slide .image-bg,
.nectar-slider-wrap .swiper-slide .image-bg {
  filter: var(--aa-duo);
}

/* Portraits and anything the editor flags as a face keep the lighter ink. */
.aa-portrait img,
.avatar,
.nectar-author-bio img,
img.aa-soft {
  filter: var(--aa-duo-soft);
}

/* Never tint the identity itself. */
#header-outer .logo img,
#header-outer #logo img,
.aa-no-duo,
.aa-no-duo img,
img.custom-logo,
.widget img[src*="logo"],
svg.aa-mark {
  filter: none !important;
}

/* --- Buttons ------------------------------------------------------------ */
/* Everything filled sits on --aa-brand-fill: the label on a button is short
   all-caps bold, which only needs 3:1, and #e8490a gives 3.9:1 with white.
   Links and other text-size orange stay on --aa-brand-ink at 4.55:1. */
body .nectar-button.regular,
body .nectar-button.see-through-2,
body input[type="submit"],
body button[type="submit"],
body .wp-block-button__link,
body .nectar-cta .link_wrap .nectar-button,
body #pagination .next, body #pagination .prev {
  background-color: var(--aa-brand-fill) !important;
  border-color: var(--aa-brand-fill) !important;
  color: #fff !important;
  border-radius: 999px;
  font-family: var(--aa-sans);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 15px 26px;
  transition: background-color .2s var(--aa-ease), transform .2s var(--aa-ease);
}
body .nectar-button.regular:hover,
body input[type="submit"]:hover,
body button[type="submit"]:hover,
body .wp-block-button__link:hover {
  background-color: var(--aa-brand-on) !important;
  border-color: var(--aa-brand-on) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Outline variant: hairline now, filled on hover. */
body .nectar-button.see-through,
body .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 1px solid var(--aa-line) !important;
  color: var(--aa-ink) !important;
  border-radius: 999px;
}
body .nectar-button.see-through:hover,
body .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--aa-brand-fill) !important;
  border-color: var(--aa-brand-fill) !important;
  color: #fff !important;
}

/* --- Accents ------------------------------------------------------------ */
a { color: var(--aa-brand-ink); }
a:hover { color: var(--aa-brand-2); }

::selection { background: var(--aa-brand); color: var(--aa-brand-on); }

body .nectar-color-accent,
body .wpb_wrapper .accent-color,
body .nectar-highlighted-text em {
  color: var(--aa-brand-ink) !important;
}

/* Salient paints a handful of surfaces with the theme accent colour set in the
   options panel. Repainting them here means the child theme is correct even on
   a fresh install where nobody has opened that panel. */
body .nectar-fancy-box:hover .box-bg,
body .masonry-blog-item .meta-category a:hover,
body #header-outer .cart-menu-wrap .cart-wrap span,
body .nectar-progress-bar .bar-wrap span {
  background-color: var(--aa-brand-ink) !important;
}

/* --- Forms -------------------------------------------------------------- */
body input[type=text], body input[type=email], body input[type=tel],
body input[type=url], body textarea, body select {
  border: 1px solid var(--aa-line);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--aa-paper);
  font-family: var(--aa-sans);
  transition: border-color .18s var(--aa-ease), box-shadow .18s var(--aa-ease);
}
body input[type=text]:focus, body input[type=email]:focus, body input[type=tel]:focus,
body input[type=url]:focus, body textarea:focus, body select:focus {
  outline: none;
  border-color: var(--aa-brand-ink);
  box-shadow: 0 0 0 3px rgba(196, 60, 10, .14);
}

/* --- Header ------------------------------------------------------------- */
#header-outer .sf-menu > li > a {
  font-family: var(--aa-sans);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12.5px;
}

/* --- WhatsApp ----------------------------------------------------------- */
/* Fixed bottom-right on every page, in the same deep orange as the rest of the
   filled elements rather than WhatsApp's own green — it reads as a channel,
   not a badge. The label shows on a pointer device and collapses to the mark
   alone on a phone, where the thumb is the whole target. */
.aa-wa {
  position: fixed;
  z-index: 9000;
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 14px 17px;
  border-radius: 999px;
  background: var(--aa-brand-ink);
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 14px 34px -14px rgba(23, 24, 29, .55);
  transition: background .2s var(--aa-ease), transform .2s var(--aa-ease);
}
.aa-wa:hover { background: var(--aa-brand-on); color: #fff !important; transform: translateY(-2px); }
.aa-wa svg { flex: none; }
.aa-wa__l {
  font-family: var(--aa-sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .aa-wa { padding: 15px; }
  .aa-wa__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .aa-wa, #header-outer, #footer-outer { display: none; }
  /* On paper the duotone turns every frame into a solid block of ink. */
  .wp-block-image img, .wpb_single_image img, .img-with-aniamtion,
  .post-featured-img img, .avatar { filter: none; }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aa-wa { transition: none; }
  .aa-wa:hover { transform: none; }
}