/*
Theme Name:   ref-digital
Theme URI:    https://ref.digital/
Description:  Hello Elementor child theme — ref.digital aesthetic. Monochrome palette, Inter 300, sharp rectangular buttons, negative letter-spacing on headings. Zero cyan.
Author:       Marte Group
Version:      1.0.0
Template:     hello-elementor
Tags:         elementor, minimal, editorial, black-white
Text Domain:  ref-digital
*/

/* ─── Google Fonts ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=DM+Serif+Display:ital@0;1&display=swap');

/* ─── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --rd-black:         #000000;
  --rd-white:         #ffffff;
  --rd-greige-100:    #f3f1ef;
  --rd-greige-200:    #e1ddd7;
  --rd-greige-400:    #c4bab0;
  --rd-greige-600:    #9d958d;
  --rd-greige-800:    #625d58;
  --rd-kaki:          #8a7f62;
  --rd-green:         #eeffa8;
  --rd-error:         #980000;

  /* Typography */
  --rd-font-sans:     'Inter', 'Arial', 'Helvetica', sans-serif;
  --rd-font-serif:    'DM Serif Display', 'Times New Roman', serif;
  --rd-weight-book:   300;
  --rd-weight-reg:    400;
  --rd-weight-med:    500;

  /* Type scale */
  --rd-h1:  clamp(3.2rem, 5.6vw, 5.6rem);
  --rd-h2:  clamp(2.4rem, 3.2vw, 3.2rem);
  --rd-h3:  clamp(1.8rem, 2.4vw, 2.4rem);
  --rd-h4:  clamp(1.4rem, 1.8vw, 1.8rem);
  --rd-h5:  clamp(1rem,   1.2vw, 1.2rem);
  --rd-body: clamp(1.4rem, 1.4vw, 1.6rem);

  /* Letter spacing */
  --rd-track-tight:   -0.03em;
  --rd-track-snug:    -0.01em;

  /* Spacing */
  --rd-margin:        1.6rem;
  --rd-gutter:        1.6rem;
  --rd-section-y:     8rem;
  --rd-section-y-sm:  4rem;
  --rd-max-w:         1264px;

  /* Kill Hello Elementor / Elementor kit cyan vars */
  --e-global-color-primary:    #000000;
  --e-global-color-secondary:  #333333;
  --e-global-color-text:       #000000;
  --e-global-color-accent:     #000000;
  --hello-elementor-header-background-color: var(--rd-white);
  --hello-elementor-header-border-bottom-color: var(--rd-greige-200);
}

/* ─── Reset & Base ─────────────────────────────────────────────────────────── */
html {
  font-size: 62.5%; /* 1rem = 10px */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--rd-font-sans);
  font-size: var(--rd-body);
  font-weight: var(--rd-weight-book);
  line-height: 1.3;
  color: var(--rd-black);
  background-color: var(--rd-white);
  margin: 0;
  padding: 0;
}

/* ─── Typography ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor h1, .elementor h2,
.elementor h3, .elementor h4,
.elementor h5, .elementor h6 {
  font-family: var(--rd-font-sans);
  font-weight: var(--rd-weight-book);
  color: var(--rd-black);
  text-transform: none;
  margin-top: 0;
}

h1, .elementor-heading-title.elementor-size-xxl,
.elementor-widget-heading h1 {
  font-size: var(--rd-h1);
  line-height: 1;
  letter-spacing: var(--rd-track-tight);
}

h2, .elementor-heading-title.elementor-size-xl,
.elementor-widget-heading h2 {
  font-size: var(--rd-h2);
  line-height: 1.1;
  letter-spacing: var(--rd-track-tight);
}

h3, .elementor-heading-title.elementor-size-large,
.elementor-widget-heading h3 {
  font-size: var(--rd-h3);
  line-height: 1.1;
  letter-spacing: var(--rd-track-tight);
}

h4, .elementor-heading-title.elementor-size-medium,
.elementor-widget-heading h4 {
  font-size: var(--rd-h4);
  line-height: 1.1;
  letter-spacing: var(--rd-track-snug);
}

h5, .elementor-heading-title.elementor-size-small,
.elementor-widget-heading h5 {
  font-family: var(--rd-font-serif);
  font-size: var(--rd-h5);
  font-weight: var(--rd-weight-reg);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

h6 { font-size: var(--rd-h5); }

p, .elementor-text-editor p {
  font-size: var(--rd-body);
  font-weight: var(--rd-weight-book);
  line-height: 1.3;
  color: var(--rd-black);
}

strong, b { font-weight: var(--rd-weight-med); }

/* ─── Links — kill all cyan ──────────────────────────────────────────────── */
a,
a:visited,
a:hover,
a:focus,
.elementor a,
.elementor a:hover,
.elementor a:visited {
  color: var(--rd-black);
  text-decoration: none;
  transition: opacity 0.2s;
}

a:hover { opacity: 0.65; }

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
.elementor-button,
.elementor-button-wrapper .elementor-button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rd-font-sans);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: var(--rd-weight-book);
  line-height: 1;
  color: var(--rd-black) !important;
  background-color: transparent !important;
  border: 1px solid var(--rd-black) !important;
  border-radius: 0 !important;
  padding: 0.9rem 1.6rem !important;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color 0.25s ease, color 0.25s ease;
  cursor: pointer;
}

.elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
  color: var(--rd-white) !important;
  background-color: var(--rd-black) !important;
  border-color: var(--rd-black) !important;
}

/* Kill Elementor button default radius */
.elementor-button { border-radius: 0 !important; }

/* ─── Hello Elementor Header ───────────────────────────────────────────────── */
.site-header,
.elementor-location-header {
  background-color: var(--rd-white);
  border-bottom: 1px solid var(--rd-greige-200);
  padding: 1.6rem var(--rd-margin);
}

.site-branding .site-title,
.site-branding .site-title a {
  font-family: var(--rd-font-sans);
  font-weight: var(--rd-weight-med);
  font-size: 1.6rem;
  color: var(--rd-black);
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Navigation ────────────────────────────────────────────────────────────── */
.site-navigation a,
.main-navigation a,
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
  font-family: var(--rd-font-sans);
  font-size: 1.2rem;
  font-weight: var(--rd-weight-book);
  color: var(--rd-black);
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
}

.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--rd-black);
  text-decoration: underline;
}

/* Kill Hello Elementor nav cyan */
.site-header .main-navigation ul li a:hover,
.site-header .main-navigation ul li.current-menu-item > a {
  color: var(--rd-black);
}

/* ─── Elementor Global Overrides ───────────────────────────────────────────── */

/* Section / Container */
.elementor-section,
.elementor-container,
.e-container,
.e-con {
  max-width: var(--rd-max-w) !important;
}

/* Remove cyan from Elementor widget accents */
.elementor-icon-box-icon i,
.elementor-icon i,
.elementor-star-rating__star.elementor-star-full {
  color: var(--rd-black);
}

/* Kill Elementor global kit cyan accent color */
.e-global-color-accent,
[data-elementor-color="accent"] {
  color: var(--rd-black) !important;
  background-color: var(--rd-black) !important;
}

/* Dividers */
.elementor-divider-separator {
  border-color: var(--rd-greige-200) !important;
}

/* ─── Sections & Containers ────────────────────────────────────────────────── */
.elementor-section.elementor-section-full_width .elementor-container {
  max-width: 100% !important;
}

/* ─── Forms ─────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
  font-family: var(--rd-font-sans);
  font-size: 1.4rem;
  font-weight: var(--rd-weight-book);
  color: var(--rd-black);
  background-color: var(--rd-white);
  border: 1px solid var(--rd-black);
  border-radius: 0;
  padding: 0.9rem 1.2rem;
  outline: none;
  transition: border-color 0.2s;
}

input:focus, textarea:focus {
  border-color: var(--rd-black);
  box-shadow: none;
  outline: none;
}

/* ─── Utility classes ────────────────────────────────────────────────────────── */
.rd-section {
  padding-top: var(--rd-section-y);
  padding-bottom: var(--rd-section-y);
}

.rd-bg-greige { background-color: var(--rd-greige-100); }
.rd-bg-black  { background-color: var(--rd-black); color: var(--rd-white); }
.rd-text-greige { color: var(--rd-greige-600); }

/* ─── Elementor canvas / full-width template ────────────────────────────────── */
.elementor-template-full-width .site-header,
.elementor-template-full-width .site-footer,
.elementor-page-template-header-footer .site-header,
.elementor-page-template-header-footer .site-footer {
  display: none !important;
}

/* ─── Hello Elementor specific overrides ────────────────────────────────────── */
/* Kill cyan from Hello Elementor widget-area links */
.widget a { color: var(--rd-black); }
.widget a:hover { color: var(--rd-greige-600); }

/* Kill cyan from WP admin bar links (front-end) */
#wpadminbar a { color: inherit; }

/* Footer */
.site-footer {
  background-color: var(--rd-greige-100);
  border-top: 1px solid var(--rd-greige-200);
  color: var(--rd-greige-600);
  font-size: 1.2rem;
  padding: 3.2rem var(--rd-margin);
}

.site-footer a { color: var(--rd-greige-800); }
.site-footer a:hover { color: var(--rd-black); opacity: 1; }