/*
Theme Name: IamRJO
Theme URI: http://iamrjo.com
Template: hello-elementor
Author: RJO
Author URI: http://iamrjo.com
Description: IamRJO is a lightweight WordPress theme built as a child of Hello Elementor. It provides a clean, version-controlled layer for custom CSS, layout refinements, and small PHP enhancements while leaving all design, typography, and layout decisions to Elementor. The theme is intentionally minimal and content-focused, supporting iterative development without sacrificing performance or flexibility.
Tags: accessibility-ready,elementor,blog,content-focused,custom-css,custom-functions,lightweight,translation-ready
Version: 3.4.5.1767406851
Updated: 2026-01-02 18:20:51
*/

/* =========================================================
   IamRJO Child Theme (Hello Elementor) — Base Typography + UI
   Fonts:
   - Headings: Brandon Grotesque (uppercase)
   - Body: EB Garamond (20px base)
   Palette: Arc Raiders-inspired (see :root)
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* Core palette */
  --rjo-vacuum: #130918;     /* Vacuum Black */
  --rjo-human:  #ECE2D0;     /* Human Light */
  --rjo-teal:   #2EE6D6;     /* Signal Teal (sparingly) */
  --rjo-cyan:   #4CCBFF;     /* Data Cyan */
  --rjo-yellow: #FFD24A;     /* Command Yellow */
  --rjo-orange: #FF8A2A;     /* Warning Orange */
  --rjo-red:    #E23B2E;     /* Fault Red */

  /* System colors (match what you set in Elementor) */
  --rjo-text:   #000000;
  --rjo-muted:  #54595F;

  /* Type */
  --rjo-font-body: "Merriweather", Georgia, "Times New Roman", serif;
  --rjo-font-head: "Brandon Grotesque", "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Base size */
  --rjo-base: 20px;

  /* Rhythm */
  --rjo-leading: 1.75;
  --rjo-radius:  5px;
  --rjo-radius-sm: 2px;
  --rjo-border: rgba(19, 9, 24, 0.14);         /* vacuum @ low alpha */
  --rjo-surface: rgba(236, 226, 208, 0.35);    /* human @ low alpha */
  --rjo-shadow: 0 10px 30px rgba(19, 9, 24, 0.10);

  /* Content width (optional helper if you want) */
  --rjo-content-max: 720px;
}

/* ---------- Base / Resets ---------- */
html { -webkit-text-size-adjust: 100%; }

body{
  font-family: var(--rjo-font-body);
  font-size: var(--rjo-base); /* 20px */
  color: var(--rjo-text);
  line-height: var(--rjo-leading);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection{
  background: rgba(46, 230, 214, 0.28);
}

/* -----------------------------------------
   Link color cycle (EXCLUDES buttons)
   ----------------------------------------- */

/* Keyframes: fast cycle, settle on final color */
@keyframes rjo-link-cycle-once {
  0%   { color: var(--rjo-teal); }
  20%  { color: var(--rjo-cyan); }
  40%  { color: var(--rjo-yellow); }
  60%  { color: var(--rjo-orange); }
  80%  { color: var(--rjo-red); }
  100% { color: var(--rjo-cyan); } /* settle color */
}

/* Base link (not a button) */
a:not(
  .button,
  .wp-element-button,
  .elementor-button,
  .btn
){
  color: var(--rjo-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Hover / focus animation (not a button) */
a:not(
  .button,
  .wp-element-button,
  .elementor-button,
  .btn
):hover,
a:not(
  .button,
  .wp-element-button,
  .elementor-button,
  .btn
):focus{
  animation: rjo-link-cycle-once 350ms linear 1 forwards;
}

/* Focus ring (still only links, not buttons) */
a:not(
  .button,
  .wp-element-button,
  .elementor-button,
  .btn
):focus-visible{
  outline: 2px solid rgba(46, 230, 214, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  a:not(
    .button,
    .wp-element-button,
    .elementor-button,
    .btn
  ):hover,
  a:not(
    .button,
    .wp-element-button,
    .elementor-button,
    .btn
  ):focus{
    animation: none;
    color: var(--rjo-cyan);
  }
}


/* Optional: keep content from going mega-wide (works with many themes) */
.single .entry-content,
.page .entry-content{
  max-width: var(--rjo-content-max);
}

/* ---------- Headings ---------- */
h1,h2,h3,h4,h5,h6{
  font-family: var(--rjo-font-head);
  letter-spacing: 0.06em;
  line-height: 1.18;
/*  color: var(--rjo-vacuum); */
  /* margin: 1.25em 0 0.55em; */
}

/* Rebalanced for 20px body 
h1{ font-size: clamp(2.4rem, 3.6vw, 3.3rem); } /* ~48–66px 
h2{ font-size: clamp(1.9rem, 2.6vw, 2.5rem); } /* ~38–50px 
h3{ font-size: clamp(1.45rem, 1.9vw, 1.9rem); }/* ~29–38px 
h4{ font-size: 1.25rem; } /* 25px 
h5{ font-size: 1.10rem; } /* 22px 
h6{ font-size: 0.95rem; color: var(--rjo-muted); } /* 19px */

/* Paragraph + common text elements */
p{
  margin: 0 0 50px 0;
}
small, .wp-caption-text, figcaption{
  color: var(--rjo-muted);
  /* font-size: 0.85rem; /* ~17px */
  line-height: 1.5;
}

/* Inline formatting */
strong{ font-weight: 700; }
em{ font-style: italic; }
mark{
  background: rgba(255, 210, 74, 0.35); /* Command Yellow used for highlight */
  padding: 0.08em 0.2em;
  border-radius: 6px;
}
code, kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /*font-size: 0.9em; /* ~18px */
  background: rgba(19, 9, 24, 0.06);
  border: 1px solid rgba(19, 9, 24, 0.12);
  padding: 0.12em 0.35em;
  border-radius: 8px;
}
pre{
  overflow: auto;
  background: rgba(19, 9, 24, 0.06);
  border: 1px solid rgba(19, 9, 24, 0.12);
  padding: 1rem 1.1rem;
  border-radius: var(--rjo-radius);
  box-shadow: 0 10px 18px rgba(19, 9, 24, 0.06);
  font-size: 0.9em;
 /* line-height: 1.6; */
}
pre code{
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

/* ---------- Blockquotes ---------- */
blockquote{
  margin: 1.6em 0;
  padding: 1.1em 1.2em;
  border-left: 4px solid var(--rjo-vacuum);
  background: var(--rjo-surface);
  
  /* font-size: 1.05rem; /* ~21px */
  line-height: 1.7;
}
blockquote p{ margin: 0 0 0.7em; }
blockquote cite{
  display: inline-block;
  font-family: var(--rjo-font-head);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* font-size: 0.80rem; /* ~16px */
  color: var(--rjo-muted);
}

/* ---------- Lists ---------- */
ul, ol{
  padding-left: 1.3em;
  margin: 0 0 1.2em;
 /* font-size: 1rem; /* 20px */
}
li{ margin: 0.45em 0; }
li > ul, li > ol{ margin-top: 0.4em; }

/* ---------- Horizontal rule ---------- */
hr{
  border: 0;
  height: 1px;
  background: rgba(19, 9, 24, 0.12);
  margin: 2.1em 0;
}

/* ---------- Tables ---------- */
table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  border: 1px solid rgba(19, 9, 24, 0.12);
  border-radius: var(--rjo-radius);
  overflow: hidden;
}
thead th{
  background: rgba(19, 9, 24, 0.06);
  font-family: var(--rjo-font-head);
  letter-spacing: 0.06em;
 /* font-size: 0.82rem; */
}
th, td{
  padding: 0.85em 0.9em;
  border-bottom: 1px solid rgba(19, 9, 24, 0.10);
  vertical-align: top;
}
tbody tr:hover{
  background: rgba(46, 230, 214, 0.06);
}

/* ---------- Images, Captions, Galleries (Classic + WP core) ---------- */
img{
  max-width: 100%;
  height: auto;
}
figure, .wp-caption{
  margin: 1.6em 0;
}
.wp-caption{
  max-width: 100%;
}
.wp-caption img{
  border-radius: var(--rjo-radius);
  box-shadow: var(--rjo-shadow);
}
.wp-caption-text{
  margin-top: 0.55em;
}

/* WP Gallery */
.gallery{
  display: grid;
  gap: 14px;
  margin: 1.6em 0;
}
.gallery-columns-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.gallery-columns-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.gallery-columns-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.gallery-item{ margin: 0 !important; }

.gallery-icon img{
  border-radius: var(--rjo-radius-sm);
  box-shadow: 0 10px 20px rgba(19, 9, 24, 0.10);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.gallery-icon a:hover img{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(19, 9, 24, 0.14);
}
.gallery-caption{
  margin-top: 0.55em;
  color: var(--rjo-muted);
  font-size: 0.9em;
}

/* Alignment helpers WP outputs */
.alignleft{ float: left; margin: 0.2em 1.2em 0.9em 0; }
.alignright{ float: right; margin: 0.2em 0 0.9em 1.2em; }
.aligncenter{ display: block; margin-left: auto; margin-right: auto; }
.clearfix::after{ content:""; display:block; clear:both; }



/* ---------- Embeds / Iframes ---------- */
iframe{
  max-width: 100%;
  border: 0;
  border-radius: var(--rjo-radius);
  box-shadow: var(--rjo-shadow);
}

/* ---------- Semantic helpers (optional) ---------- */
.rjo-status--info{ color: var(--rjo-cyan); }
.rjo-status--ok{ color: var(--rjo-teal); }
.rjo-status--warn{ color: var(--rjo-orange); }
.rjo-status--danger{ color: var(--rjo-red); }