/*
Theme Name:   UiCore Pro Child - Karla Beesemyer
Theme URI:    https://karlabeesemyer.com
Description:  Child theme for karlabeesemyer.com. Carries the design tokens, the
              custom "Ink" home page template and the living ink field.
Author:       Pixel Criminals
Author URI:   https://full-stop.agency
Template:     uicore-pro
Version:      1.0.0
Text Domain:  uicore-pro-child
*/

/* ------------------------------------------------------------------
   Design tokens. Concept D, "swirling ink on paper".
   These are the single source of truth. Elementor Global Colours and
   Global Fonts must be set to match, so the inner pages stay in step.
   ------------------------------------------------------------------ */
:root{
  --k-paper:#F7F4EF;
  --k-paper-2:#F1EDE6;
  --k-ink:#171A1F;
  --k-grey:#6B6862;
  --k-hair:rgba(23,26,31,.16);
  --k-coral:#B33E16;

  --k-display:'Bodoni Moda',Didot,Georgia,serif;
  --k-sans:'Jost',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
}

/* Inner pages, built in Elementor, inherit the same ground and type.
   Kept deliberately light so Elementor stays in control of layout. */
body{ background:var(--k-paper); color:var(--k-ink); }
body, .uicore-body, p, li{ font-family:var(--k-sans); }
h1,h2,h3,h4,h5,h6{ font-family:var(--k-display); font-weight:400; letter-spacing:-.015em; text-wrap:balance; }
a{ color:var(--k-coral); }

/* Buttons: square, never rounded. */
.uicore-btn, .elementor-button, button, input[type="submit"]{ border-radius:0 !important; }

/* ------------------------------------------------------------------
   Typography lock.
   UiCore compiles its own global stylesheet from Theme Options and it
   loads late, so plain element selectors lose. These carry enough
   specificity to win without resorting to !important on everything.
   ------------------------------------------------------------------ */
body,
body p, body li, body dd, body dt,
.uicore-body, .uicore-container p, .uicore-container li{
  font-family:var(--k-sans);
  color:var(--k-grey);
}
body h1, body h2, body h3, body h4, body h5, body h6,
.uicore-container h1, .uicore-container h2, .uicore-container h3,
.uicore-page-title h1, .uicore-page-title .uicore-title{
  font-family:var(--k-display);
  font-weight:400;
  letter-spacing:-.015em;
  color:var(--k-ink);
}
body h1, .uicore-page-title h1{ font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.02 }
body h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.1; margin-top:1.6em }
body h3{ font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.2; margin-top:1.4em }

/* readable measure on the inner pages */
.uicore-container p, .uicore-container ul, .uicore-container ol, .uicore-container dl{ max-width:68ch }
.uicore-container ul li{ margin-bottom:.5em }
.uicore-container .lede{ font-family:var(--k-display); font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.45; color:var(--k-ink); max-width:46ch }
.uicore-container a{ color:var(--k-coral) }
.uicore-container blockquote{ font-family:var(--k-display); font-style:italic;
  border-left:2px solid var(--k-coral); margin:1.8em 0; padding:.2em 0 .2em 1.4em;
  font-size:1.25rem; color:var(--k-ink) }
.uicore-container blockquote cite{ display:block; font-family:var(--k-sans); font-style:normal;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--k-grey); margin-top:.9em }

/* wordmark, stands in for a logo file */
.kb-wordmark{ font-family:var(--k-display); font-size:1.35rem; letter-spacing:.01em;
  color:var(--k-ink); white-space:nowrap; line-height:1 }
.uicore-navbar a:hover .kb-wordmark{ color:var(--k-coral) }

/* menu */
.uicore-menu > li > a{ font-family:var(--k-sans) !important; font-size:.78rem !important;
  letter-spacing:.14em; text-transform:uppercase; color:var(--k-grey) !important }
.uicore-menu > li > a:hover, .uicore-menu > li.current-menu-item > a{ color:var(--k-ink) !important }

/* breadcrumbs and page title band */
.uicore-page-title{ padding-top:clamp(90px,10vw,150px) !important; padding-bottom:clamp(20px,3vw,40px) !important }
.uicore-breadcrumbs, .uicore-breadcrumbs a{ font-family:var(--k-sans); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--k-grey) }

/* footer + copyright */
.uicore-footer-wrapper, .uicore-copyrights{ font-family:var(--k-sans) }
.uicore-copyrights, .uicore-copyrights p{ color:var(--k-grey); font-size:.78rem; letter-spacing:.06em }
.uicore-copyrights a{ color:var(--k-grey) }
.uicore-copyrights a:hover{ color:var(--k-coral) }

/* ---- contact form ---- */
.kb-form{ max-width:620px; margin-top:2em }
.kb-form p{ margin:0 0 18px }
.kb-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.kb-form label{ display:block; font-family:var(--k-sans); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--k-grey); margin-bottom:8px }
.kb-form input[type="text"], .kb-form input[type="email"], .kb-form textarea{
  width:100%; font-family:var(--k-sans); font-size:1rem; color:var(--k-ink);
  background:#fff; border:1px solid var(--k-hair); border-radius:0; padding:14px 16px }
.kb-form input:focus, .kb-form textarea:focus{ outline:none; border-color:var(--k-coral) }
.kb-form textarea{ resize:vertical; min-height:150px }
.kb-submit{ font-family:var(--k-sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--k-coral); color:#fff; border:1px solid var(--k-coral); border-radius:0;
  padding:15px 40px; cursor:pointer; transition:.3s }
.kb-submit:hover{ background:var(--k-ink); border-color:var(--k-ink) }
.kb-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.kb-form-done{ font-family:var(--k-display); font-size:1.2rem; color:var(--k-ink);
  border-left:2px solid var(--k-coral); padding-left:1em; margin-bottom:1.5em }
.kb-form-error{ font-family:var(--k-sans); font-size:.95rem; color:#B33E16;
  border-left:2px solid #B33E16; padding-left:1em; margin-bottom:1.5em }
@media(max-width:600px){ .kb-row{ grid-template-columns:1fr } }
/* comfortable thumb target on a phone; the button was 40px tall */
@media(max-width:900px){ .kb-submit{ min-height:48px; width:100% } }

/* ------------------------------------------------------------------
   Mobile menu. Shared by both templates, because neither of them calls
   UiCore's header and there was no navigation at all on a narrow screen:
   the index rail is hidden below 900px and the inner page strip scrolls
   sideways, which nobody finds. The button and the panel are in the markup
   and karla-ink.js fills the panel from whichever navigation that template
   already renders, so there is one list of links, not two to keep in step.
   ------------------------------------------------------------------ */
.burger{display:none;position:fixed;top:16px;right:14px;z-index:60;
  width:46px;height:46px;padding:0;cursor:pointer;
  background:var(--k-paper);border:1px solid var(--k-hair);border-radius:0;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:1px;background:var(--k-ink);
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.kb-menu{position:fixed;inset:0;z-index:55;background:var(--k-paper);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:96px 26px 40px;overflow-y:auto;overscroll-behavior:contain}
.kb-menu[hidden]{display:none}
.kb-menu a{display:block;text-decoration:none;color:var(--k-ink);
  font-family:var(--k-display);font-size:clamp(1.6rem,7vw,2.4rem);line-height:1.25;
  padding:11px 0;border-bottom:1px solid var(--k-hair)}
.kb-menu a[aria-current]{color:var(--k-coral)}
.kb-menu .kb-menu-lang{display:flex;gap:14px;margin-top:26px;border:0}
.kb-menu .kb-menu-lang a{font-family:var(--k-sans);font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--k-grey);border:0;padding:6px 0}
.kb-menu .kb-menu-lang a.is-on{color:var(--k-ink)}
body.kb-menu-open{overflow:hidden}

.kb-menu .kb-menu-motion{align-self:flex-start;margin-top:18px;cursor:pointer;
  font-family:var(--k-sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--k-grey);background:none;border:0;border-bottom:1px solid var(--k-hair);
  padding:8px 0;min-height:36px}

@media(max-width:900px){
  .burger{display:flex}
  /* both of these are fixed to a corner and were landing on the body copy */
  .lang, .motion{display:none}
}
.admin-bar .burger{top:calc(16px + 32px)}
@media screen and (max-width:782px){ .admin-bar .burger{top:calc(16px + 46px)}
  .admin-bar .kb-menu{padding-top:calc(96px + 46px)} }
@media(prefers-reduced-motion:reduce){ .burger span{transition:none} }


/* ------------------------------------------------------------------
   Frosted glass behind the fixed furniture.
   Artwork bleeds under the corners of the window on purpose, so instead of
   hiding it, anything pinned there frosts whatever passes beneath: a real
   backdrop blur plus a light paper tint. The index rail has always done this;
   the wordmark, the language pair and the inner page navigation were left
   plain and went unreadable the moment a dark part of a picture scrolled
   under them.

   The panel is feathered with a paper coloured shadow rather than a mask,
   because a mask on a backdrop-filtered box renders with hard edges in some
   engines. The plain tint sits on the base rule and is only weakened inside
   @supports, so a browser without backdrop-filter still gets a readable
   panel rather than nothing.
   ------------------------------------------------------------------ */
.brand, .lang, .kb-nav{isolation:isolate}
/* The tint is a halo, not a rectangle: it is strongest behind the words and
   reaches nothing at the edges, so over plain paper the panel is invisible
   and only shows itself when a picture passes under it. A flat fill with a
   hard border radius read as a grey box sitting on the page. */
.brand::before, .lang::before, .kb-nav::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-26px -38px;
  background:radial-gradient(closest-side,rgba(247,244,239,.95) 0%,
                                          rgba(247,244,239,.88) 46%,
                                          rgba(247,244,239,.44) 76%,
                                          rgba(247,244,239,0) 100%)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .brand::before, .lang::before, .kb-nav::before{
    background:radial-gradient(closest-side,rgba(247,244,239,.62) 0%,
                                            rgba(247,244,239,.52) 48%,
                                            rgba(247,244,239,.22) 78%,
                                            rgba(247,244,239,0) 100%);
    -webkit-backdrop-filter:blur(16px);
            backdrop-filter:blur(16px);
    /* the blur itself has a hard rectangular boundary, so it is faded out
       well inside the box and the halo above carries the rest */
    -webkit-mask-image:radial-gradient(closest-side,#000 40%,rgba(0,0,0,0) 96%);
            mask-image:radial-gradient(closest-side,#000 40%,rgba(0,0,0,0) 96%)}
}
/* The wordmark is the one piece of furniture that sits inside the reading
   column, so what passes under it is often other TEXT rather than artwork,
   and a light frost turns text into a smudge instead of hiding it. Its panel
   is stronger. The tint is paper coloured, so over plain paper it stays
   invisible however opaque it is. */
.brand::before{
  background:radial-gradient(closest-side,rgba(247,244,239,.99) 0%,
                                          rgba(247,244,239,.96) 52%,
                                          rgba(247,244,239,.55) 80%,
                                          rgba(247,244,239,0) 100%)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .brand::before{
    background:radial-gradient(closest-side,rgba(247,244,239,.90) 0%,
                                            rgba(247,244,239,.84) 52%,
                                            rgba(247,244,239,.38) 80%,
                                            rgba(247,244,239,0) 100%)}
}

/* On the inner pages the language pair sits INSIDE the navigation, which
   already carries a panel. One frost, not two stacked. */
.kb-nav .lang::before{content:none}

/* The pause control had a hard edged panel of its own, which drew a box on
   plain paper. It gets the same halo as everything else. The panel has to be
   on a ::before rather than on the button, because a mask on the button
   itself would fade its label as well as its background. Doubled class only
   to outrank the per template sheets, which load after this one. */
.motion.motion{isolation:isolate;background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.motion.motion::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-16px -26px;
  background:radial-gradient(closest-side,rgba(247,244,239,.95) 0%,
                                          rgba(247,244,239,.88) 46%,
                                          rgba(247,244,239,.44) 76%,
                                          rgba(247,244,239,0) 100%)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .motion.motion::before{
    background:radial-gradient(closest-side,rgba(247,244,239,.62) 0%,
                                            rgba(247,244,239,.52) 48%,
                                            rgba(247,244,239,.22) 78%,
                                            rgba(247,244,239,0) 100%);
    -webkit-backdrop-filter:blur(16px);
            backdrop-filter:blur(16px);
    -webkit-mask-image:radial-gradient(closest-side,#000 40%,rgba(0,0,0,0) 96%);
            mask-image:radial-gradient(closest-side,#000 40%,rgba(0,0,0,0) 96%)}
}

/* The panel must not sit under the burger's own solid button, and on a narrow
   screen the wordmark is the only thing left in the top bar. */
@media(max-width:900px){
  .brand::before{inset:-11px -16px}
}


/* The brand mark. Sized by height so a wide logo and a square one both sit on
   the same baseline; the file's own aspect does the rest. */
.brand .kb-logo{display:block;height:clamp(19px,1.6vw,26px);width:auto;max-width:min(52vw,300px)}
@media(max-width:900px){ .brand .kb-logo{height:18px} }