/*
Theme Name: LucKey Construction
Theme URI: https://luckey-construction.com/
Description: Child theme of Hello Elementor for LucKey Construction B.V. It carries the site typeface (Inter, self-hosted), holds the header and footer to the content width, and puts back the handful of colour variables the widget plugin still reads from the old theme. Nothing else: everything visual on this site is built in Elementor, so the theme deliberately stays out of the way.
Author: LucKey Construction
Template: hello-elementor
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: luckey-construction
*/

/* ------------------------------------------------------------------- font */
/*
 * Inter, self-hosted.
 *
 * The site paid for Niveau Grotesk and never actually rendered it: the old
 * theme requested it from Adobe, the request did not reach visitors, and every
 * page fell back down the stack to -apple-system. What the owner recognised as
 * "our font" for years was therefore San Francisco, the Apple system face.
 * Inter was drawn as an open equivalent of exactly that, so this restores the
 * look the site actually had rather than the one its settings claimed.
 *
 * Self-hosted rather than linked from Google: a Dutch company sending every
 * visitor's IP address to a US CDN to fetch a font is a GDPR exposure with
 * nothing to show for it, and a same-origin file is one fewer connection to
 * open before the first line of text can be painted.
 *
 * One variable file covers 300 to 700, so no weight can go missing the way the
 * Adobe weights could. The latin-ext face is separate and only downloads if a
 * page actually uses a character from that range.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------- what the old theme still owed */
/*
 * ciri published a --theme-* palette that its own stylesheet consumed, and the
 * LaStudio widget plugin — still active, still used on every page — reads from
 * it too. Those five names went undefined the moment the theme changed, and a
 * declaration like `background-color: var(--theme-secondary-color)` with no
 * value behind it computes to transparent, so the images-layout widget quietly
 * lost its dark panel and its border.
 *
 * These are the only five the plugin's stylesheets refer to — the whole plugin
 * directory was searched rather than sampled — and the values are ciri's own,
 * copied out of its style.css. Nothing else from that palette is defined here:
 * a variable no live code reads is not a restoration, it is clutter. The
 * layout values in particular are deliberately left out, since --theme-
 * container-width was 1170px and the site is now built to 1200.
 */
:root {
  --theme-primary-color: #C3B8A5;
  --theme-secondary-color: #333333;
  --theme-border-color: #dedede;
  --theme-body-font-color: #747474;
  --theme-heading-font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --theme-link-color: #333333;
  --theme-link-hover-color: #C3B8A5;
}

/* ------------------------------------------------------------------- links */
/*
 * Hello Elementor's reset paints every link crimson — `a{color:#c36}` — and
 * navy on hover. Those are the framework's placeholder colours, not a design
 * decision, and because they sit on a bare `a` selector they reach any link
 * whose colour Elementor does not set explicitly: phone numbers, addresses and
 * mailto links in a text block all turn red. ciri's own link colours are put
 * back. This stylesheet is the last one on the page, so a selector of equal
 * weight is enough and nothing needs !important.
 */
a {
  color: var(--theme-link-color);
}

a:hover,
a:active,
a:focus {
  color: var(--theme-link-hover-color);
}

/* ------------------------------------------------------------------ tokens */
/*
 * The colours are the ones the Elementor kit already publishes as LucKey1 and
 * LucKey2, repeated here because CSS outside a widget cannot read a kit
 * variable that Elementor only prints on .elementor-kit-14.
 *
 * The fallback chain after Inter is the old theme's own, minus Poppins, which
 * nothing on this site ever used. It matters less than it used to: Inter is
 * served from this domain, so the fallback only appears if the file itself
 * fails.
 */
:root {
  --lc-shell: 1200px;
  --lc-ink: #333333;
  --lc-body-ink: #747474;
  --lc-accent: #C3B8A5;
  --lc-accent-on-light: #857151;
  --lc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
}

/* -------------------------------------------------------------- typography */
/*
 * Hello Elementor sets a system font stack on the body, and almost every
 * Elementor preset on this site inherits its family rather than naming one.
 * That single inheritance is why the whole site changed face at once.
 *
 * The metrics matter too, though less than first assumed. Hello Elementor's
 * reset does set headings to weight 500 and leading 1.2, the same as ciri did,
 * so the earlier idea that headings had fallen back to bold was simply wrong.
 * What genuinely differs is body copy: Hello sets #333 on a 1.5 leading where
 * ciri set #747474 on 1.8, and the heading sizes are a step larger throughout.
 *
 * The values below are ciri's own, on bare element selectors exactly as ciri
 * wrote them, so anything with a typography setting of its own in Elementor
 * still wins. This restores the default, it does not override the design.
 */
body,
button,
input,
select,
optgroup,
textarea {
  font-family: var(--lc-font);
}

body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--lc-body-ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lc-font);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--lc-ink);
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 22px; }
h6 { font-size: 20px; }

/* ------------------------------------------------------------------- shell */
/*
 * The header and footer templates are full-width containers by design: the
 * band of colour is meant to run edge to edge. What was missing is the stop on
 * their contents, so the logo and the menu drifted to the far corners of a wide
 * screen while the page below them stopped at 1200. The band stays full width;
 * the row inside it is what gets held to the content width.
 *
 * Elementor gives .e-con both `width` and `max-width` from its own --width
 * variable, so this has to out-specify .e-con rather than merely follow it.
 */
.ekit-template-content-header > .elementor > .e-con > .e-con,
.ekit-template-content-footer > .elementor > .e-con > .e-con,
.elementor-location-header > .elementor > .e-con > .e-con,
.elementor-location-footer > .elementor > .e-con > .e-con {
  width: 100%;
  max-width: var(--lc-shell);
  margin-inline: auto;
}

/* Below the content width the row needs a gutter, or the logo touches glass. */
@media (max-width: 1240px) {
  .ekit-template-content-header > .elementor > .e-con > .e-con,
  .ekit-template-content-footer > .elementor > .e-con > .e-con,
  .elementor-location-header > .elementor > .e-con > .e-con,
  .elementor-location-footer > .elementor > .e-con > .e-con {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --------------------------------------------------------- article content */
/*
 * Hello Elementor flattens heading margins to nothing, which is right for a
 * page built entirely of widgets and wrong for a blog post, where the headings
 * come from the editor and have no widget spacing of their own.
 */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
  margin-bottom: 1em;
}

/* Carried over from the old theme's Customizer CSS, which held only this. */
ul ul {
  margin: 0 0 12px;
}