/*
Theme Name: Kelly Raulerson Portfolio
Theme URI:
Description: Hello Elementor child theme for Kelly Raulerson's portfolio homepage. Renders a self-contained editorial portfolio at the site's front page (front-page.php), no Elementor required.
Author: Kelly Raulerson
Author URI:
Template: hello-elementor
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kelly-child
*/

/* =========================================================
   KELLY RAULERSON — PORTFOLIO + CONTACT
   All design styles are scoped to body.kr-portfolio so they
   only apply to the homepage and contact page. Other pages
   on the site are unaffected and use Hello Elementor defaults.
   ========================================================= */

:root {
  --kr-orange: #F26B1F;
  --kr-orange-deep: #D9541A;
  --kr-orange-bright: #FF8A3D;
  --kr-cream: #F4ECDC;
  --kr-cream-warm: #EFE2C8;
  --kr-ink: #1A1410;
  --kr-cobalt: #2A5FB8;
  --kr-cobalt-deep: #1E4A95;
  --kr-r-card: 36px;
  --kr-r-tile: 22px;
  --kr-r-input: 18px;
  --kr-r-pill: 999px;
  --kr-wordmark: 'KR';
}

/* Per-page background wordmark — driven by WordPress's auto page-{slug} class.
   Edit / extend these as you add pages. */
body.page-contact   { --kr-wordmark: 'HEY'; }
body.page-calendar  { --kr-wordmark: 'BOOK'; }
body.page-events,
body.page-event     { --kr-wordmark: 'EVENT'; }
body.page-about     { --kr-wordmark: 'ABOUT'; }
/* (back-compat with the old hardcoded contact template) */
body.kr-page-contact { --kr-wordmark: 'HEY'; }

/* ---------- Page-level background (home + contact) ---------- */
body.kr-portfolio {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--kr-ink);
  background:
    radial-gradient(ellipse at 80% 0%, var(--kr-orange-bright) 0%, transparent 45%),
    radial-gradient(ellipse at 0% 100%, var(--kr-orange-deep) 0%, transparent 50%),
    var(--kr-orange);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

body.kr-portfolio * { box-sizing: border-box; }

/* Big translucent wordmark behind everything */
body.kr-portfolio::before {
  content: var(--kr-wordmark);
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(360px, 80vw, 900px);
  line-height: 0.82;
  color: var(--kr-orange-deep);
  opacity: 0.28;
  letter-spacing: -0.06em;
  user-select: none;
  pointer-events: none;
  font-stretch: 75%;
  transform: translateY(4%);
}

/* ---------- Layout container ---------- */
.kr-page {
  position: relative;
  z-index: 2;
  max-width: 460px;
  margin: 0 auto;
  padding: 18px 14px 28px;
}

/* ---------- Topbar ---------- */
.kr-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 18px;
  color: var(--kr-cream);
}
.kr-brand,
a.kr-brand {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  font-stretch: 80%;
  color: var(--kr-cream);
  text-decoration: none;
}
.kr-meta {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kr-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5BE38A;
  box-shadow: 0 0 0 0 rgba(91, 227, 138, 0.6);
  animation: kr-pulse 1.8s ease-out infinite;
}
@keyframes kr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(91, 227, 138, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(91, 227, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(91, 227, 138, 0); }
}

/* ---------- Hero card ---------- */
.kr-hero-card {
  background: var(--kr-cream);
  border-radius: var(--kr-r-card);
  padding: 22px 22px 26px;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.35),
    0 8px 20px -8px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.kr-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.kr-hero-head .kr-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kr-ink);
  opacity: 0.55;
}
.kr-hero-head .kr-num {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--kr-ink);
  opacity: 0.55;
}

/* Photo + overlays */
.kr-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--kr-r-tile);
  overflow: hidden;
  background: var(--kr-orange-deep);
  margin-bottom: 18px;
}
.kr-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(1.05);
  transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
}
.kr-hero-card:hover .kr-photo-wrap img { transform: scale(1.04); }

.kr-photo-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px;
  color: var(--kr-cream);
}
.kr-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.kr-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.kr-name-stack {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 56px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--kr-cream);
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  font-stretch: 80%;
}
.kr-name-stack .kr-second {
  color: var(--kr-orange-bright);
}
.kr-corner-stamp {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--kr-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--kr-cream);
  transform: rotate(-12deg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  text-align: center;
  line-height: 1.05;
}

/* Greeting + tagline */
.kr-greet {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 4px 0 14px;
  color: var(--kr-ink);
  font-stretch: 85%;
}
.kr-greet .kr-arrow {
  display: inline-block;
  transform: translateY(-4px) rotate(-30deg);
  color: var(--kr-orange);
  font-weight: 700;
  transition: transform 0.3s ease;
}
.kr-hero-card:hover .kr-greet .kr-arrow { transform: translateY(-6px) rotate(-15deg); }

.kr-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--kr-ink);
  opacity: 0.78;
  margin: 0;
  font-weight: 400;
  text-wrap: pretty;
  max-width: 38ch;
}
.kr-tagline strong {
  font-weight: 700;
  color: var(--kr-ink);
  opacity: 1;
}

/* ---------- Section bar ---------- */
.kr-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 4px 14px;
  color: var(--kr-cream);
}
.kr-section-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
  font-stretch: 80%;
}
.kr-section-count {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------- Tiles ---------- */
.kr-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.kr-tile {
  background: var(--kr-cream);
  border-radius: var(--kr-r-tile);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 16px;
  cursor: default;
  transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.kr-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -10px rgba(0,0,0,0.35);
}

.kr-tile-num {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--kr-ink);
  opacity: 0.45;
  letter-spacing: 0.05em;
}
.kr-tile-body { min-width: 0; }
.kr-tile-body .kr-tile-lead {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--kr-ink);
  margin: 0 0 3px;
  font-stretch: 90%;
}
.kr-tile-body .kr-tile-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--kr-ink);
  opacity: 0.62;
  margin: 0;
  font-weight: 400;
}

.kr-tile-stat {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--kr-orange);
  font-stretch: 80%;
  white-space: nowrap;
  text-align: right;
}
.kr-tile-stat small {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kr-ink);
  opacity: 0.5;
  margin-top: 2px;
  font-stretch: 100%;
}

.kr-tile.kr-alt-1 { background: var(--kr-cobalt); }
.kr-tile.kr-alt-1 .kr-tile-num { color: var(--kr-cream); opacity: 0.5; }
.kr-tile.kr-alt-1 .kr-tile-lead { color: var(--kr-cream); }
.kr-tile.kr-alt-1 .kr-tile-sub { color: var(--kr-cream); opacity: 0.75; }
.kr-tile.kr-alt-1 .kr-tile-stat { color: var(--kr-orange-bright); }
.kr-tile.kr-alt-1 .kr-tile-stat small { color: var(--kr-cream); opacity: 0.6; }

.kr-tile.kr-alt-2 { background: var(--kr-ink); }
.kr-tile.kr-alt-2 .kr-tile-num { color: var(--kr-cream); opacity: 0.5; }
.kr-tile.kr-alt-2 .kr-tile-lead { color: var(--kr-cream); }
.kr-tile.kr-alt-2 .kr-tile-sub { color: var(--kr-cream); opacity: 0.75; }
.kr-tile.kr-alt-2 .kr-tile-stat { color: var(--kr-orange-bright); }
.kr-tile.kr-alt-2 .kr-tile-stat small { color: var(--kr-cream); opacity: 0.6; }

/* ---------- Buttons ---------- */
.kr-actions {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: var(--kr-r-pill);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.2, .8, .2, 1), box-shadow 0.2s ease;
  border: none;
  font-stretch: 90%;
}
.kr-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.35);
}
.kr-btn:active { transform: translateY(0); }
.kr-btn .kr-btn-arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.25s ease;
}
.kr-btn:hover .kr-btn-arrow {
  transform: rotate(-12deg) translate(2px, -2px);
}

.kr-btn-primary {
  grid-column: span 2;
  background: var(--kr-ink);
  color: var(--kr-cream);
  padding: 18px 22px;
  font-size: 17px;
}
.kr-btn-primary .kr-btn-arrow {
  background: var(--kr-orange);
  color: var(--kr-ink);
}

.kr-btn-secondary {
  background: var(--kr-cream);
  color: var(--kr-ink);
}
.kr-btn-secondary .kr-btn-arrow {
  background: var(--kr-ink);
  color: var(--kr-cream);
}

.kr-btn-tertiary {
  background: var(--kr-cobalt);
  color: var(--kr-cream);
}
.kr-btn-tertiary .kr-btn-arrow {
  background: var(--kr-cream);
  color: var(--kr-cobalt);
}

/* ---------- Footer ---------- */
.kr-footer {
  margin-top: 32px;
  padding: 18px 8px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--kr-cream);
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.kr-pdx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kr-pdx::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--kr-cream);
  border-radius: 50%;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

/* ---------- Back link ---------- */
.kr-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.18);
  color: var(--kr-cream);
  padding: 8px 14px 8px 10px;
  border-radius: var(--kr-r-pill);
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 14px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.kr-back:hover {
  background: rgba(0,0,0,0.32);
  transform: translateX(-2px);
}
.kr-back .kr-arrow {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--kr-cream);
  color: var(--kr-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* ---------- Contact hero variations ---------- */
.kr-hero-card.kr-contact-hero {
  padding: 26px 22px 22px;
  margin-bottom: 14px;
}

.kr-big-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 64px;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--kr-ink);
  margin: 0 0 14px;
  font-stretch: 80%;
}
.kr-big-title .kr-accent {
  color: var(--kr-orange);
  display: inline-block;
  transform: rotate(-2deg);
}

.kr-lede {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kr-ink);
  opacity: 0.78;
  margin: 0 0 18px;
  text-wrap: pretty;
  max-width: 38ch;
}
.kr-lede strong { font-weight: 700; opacity: 1; }

.kr-quick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(26,20,16,0.18);
}
.kr-quick a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px;
  text-decoration: none;
  color: var(--kr-ink);
  font-family: 'DM Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.kr-quick a:hover { color: var(--kr-orange); }
.kr-quick a span:first-child { opacity: 0.55; }
.kr-quick a .kr-arrow-inline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
}

/* ---------- Form card ---------- */
.kr-form-card {
  background: var(--kr-cream);
  border-radius: var(--kr-r-card);
  padding: 24px 22px 26px;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.35),
    0 8px 20px -8px rgba(0, 0, 0, 0.2);
}

.kr-form-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}
.kr-form-head .kr-form-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--kr-ink);
  font-stretch: 80%;
}
.kr-form-head .kr-form-stamp {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--kr-orange);
  color: var(--kr-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  transform: rotate(-12deg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Field */
.kr-field { margin-bottom: 14px; }
.kr-field label {
  display: flex;
  justify-content: space-between;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kr-ink);
  opacity: 0.6;
  margin-bottom: 6px;
}
.kr-field label .kr-req { color: var(--kr-orange); opacity: 1; }
.kr-field label .kr-opt { opacity: 0.5; }

.kr-field input,
.kr-field textarea,
.kr-field select {
  width: 100%;
  border: 2px solid transparent;
  background: var(--kr-cream-warm);
  border-radius: var(--kr-r-input);
  padding: 14px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--kr-ink);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  font-weight: 500;
}
.kr-field input::placeholder,
.kr-field textarea::placeholder {
  color: var(--kr-ink);
  opacity: 0.4;
  font-weight: 400;
}
.kr-field input:focus,
.kr-field textarea:focus,
.kr-field select:focus {
  outline: none;
  border-color: var(--kr-ink);
  background: #fff;
}
.kr-field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.45;
}
.kr-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231A1410' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 42px;
  cursor: pointer;
}

/* Honeypot — visually + assistively hidden */
.kr-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.kr-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Submit row */
.kr-submit-row {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kr-submit {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-radius: var(--kr-r-pill);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  background: var(--kr-ink);
  color: var(--kr-cream);
  border: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s ease;
  font-stretch: 90%;
}
.kr-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(0,0,0,0.4);
}
.kr-submit .kr-submit-arrow {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--kr-orange);
  color: var(--kr-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.25s ease;
}
.kr-submit:hover .kr-submit-arrow {
  transform: rotate(-12deg) translate(2px, -2px);
}

.kr-form-meta {
  margin-top: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kr-ink);
  opacity: 0.5;
  text-align: center;
}

/* Success / Error states */
.kr-success,
.kr-error {
  padding: 30px 20px;
  text-align: center;
}
.kr-success .kr-badge,
.kr-error .kr-badge {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--kr-orange);
  color: var(--kr-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 14px;
  animation: kr-pop 0.5s cubic-bezier(.2,.8,.2,1);
}
.kr-error .kr-badge { background: #B5391A; }
@keyframes kr-pop {
  0%   { transform: scale(0) rotate(-30deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.kr-success h3,
.kr-error h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  font-stretch: 80%;
}
.kr-success p,
.kr-error p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--kr-ink);
  opacity: 0.7;
  margin: 0;
}

/* Inline field error message */
.kr-field-errors {
  background: rgba(181, 57, 26, 0.12);
  color: #B5391A;
  border-radius: var(--kr-r-input);
  padding: 12px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

/* =========================================================
   GENERIC PORTFOLIO PAGE (page-portfolio.php)
   Used for calendar, event, and any other Elementor-editable
   pages that should match the portfolio skin.
   ========================================================= */

.kr-portfolio-hero {
  padding: 18px 22px;
  margin-bottom: 14px;
}
.kr-portfolio-hero .kr-hero-head { margin-bottom: 0; }

/* The page body where Elementor / block editor content lives */
.kr-content {
  position: relative;
  z-index: 2;
}

/* Make Elementor + block-editor sections inside our chrome behave —
   their default full-width logic fights our 460/480px container, so
   we neutralize it for any content rendered inside .kr-content. */
.kr-content .elementor-section,
.kr-content .e-con,
.kr-content .alignfull,
.kr-content .alignwide {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
}
.kr-content .elementor-section > .elementor-container,
.kr-content .e-con > .e-con-inner {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- Larger viewport polish (default narrow card pages) ---------- */
@media (min-width: 520px) {
  .kr-page {
    max-width: 480px;
    padding: 32px 18px;
  }
}

/* =========================================================
   IFRAME PAGES (calendar, event)
   These bypass the narrow 480px portfolio card width. The
   iframe gets nearly full viewport width, and is set tall
   enough that the embed renders ALL its content with no
   internal scrollbar — you scroll the outer page like a
   normal long webpage.
   ========================================================= */

/* Page container goes wider on iframe pages */
body.kr-page-calendar .kr-page,
body.kr-page-event .kr-page,
.kr-page:has(.kr-iframe-card) {
  max-width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (min-width: 768px) {
  body.kr-page-calendar .kr-page,
  body.kr-page-event .kr-page,
  .kr-page:has(.kr-iframe-card) {
    max-width: 1100px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (min-width: 1300px) {
  body.kr-page-calendar .kr-page,
  body.kr-page-event .kr-page,
  .kr-page:has(.kr-iframe-card) {
    max-width: 1200px !important;
  }
}

/* ---------- Iframe card ---------- */
.kr-iframe-card {
  background: var(--kr-cream);
  border-radius: var(--kr-r-card);
  padding: 14px;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.35),
    0 8px 20px -8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
  width: 100%;
}

.kr-iframe-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4px 6px 12px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kr-ink);
  opacity: 0.55;
}

/* Iframe baseline — width fills card. No min-height (was forcing the giant box).
   If content overflows the height set below, the iframe's own scrollbar handles
   it (scrolling="auto" on the element). Heights are set per-page below. */
.kr-iframe-card iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: var(--kr-r-tile);
  background: #fff;
}

/* ---------- Per-page heights ----------
   Sized to the actual content of each embed with a small buffer.
   - /calender/ (bookmytime.ai 60-min booking): 750px
   - /event/    (leadcenter.ai event page):     700px
   On mobile (<768px) stacked content is taller, so both go to 850px.
   Tweak the numbers below if your embed grows. */
.kr-iframe-card-calendar iframe {
  height: 750px !important;
}
.kr-iframe-card-event iframe {
  height: 700px !important;
}
@media (max-width: 767px) {
  .kr-iframe-card-calendar iframe,
  .kr-iframe-card-event iframe {
    height: 850px !important;
  }
}