/*
 Theme Name:   Engineering Camp
 Theme URI:    https://engineeringcamp.example
 Description:  Child theme of GeneratePress. Black / white / orange
               engineering-drawing design system for Engineering Camp.
 Author:       Engineering Camp
 Template:     generatepress
 Version:      1.0
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root{
  --ink: #0B0B0C;
  --paper: #FFFFFF;
  --orange: #FF5A1F;
  --orange-dim: #E14D14;
  --line: #D8D8D5;
  --grid: #EFEFED;
  --muted: #6B6B68;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* ==========================================================================
   BASE
   ========================================================================== */
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title{
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--ink);
}

a{ color: var(--ink); }
a:hover{ color: var(--orange); }

/* Eyebrow / mono labels — use as a "Additional CSS Class" on any
   paragraph block in Gutenberg to get the small uppercase mono label
   style used throughout the original design. */
.ec-eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ec-eyebrow::before{
  content: "";
  width: 22px;
  height: 1px;
  background: var(--orange);
}

/* ==========================================================================
   HEADER / NAVIGATION (GeneratePress selectors)
   ========================================================================== */
.site-header{
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
}

.main-navigation,
.main-navigation .main-nav ul li a{
  font-family: var(--font-mono) !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.main-navigation .main-nav ul li a{
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a{
  border-bottom-color: var(--orange);
  color: var(--ink);
}

.site-logo, .site-title{
  font-family: var(--font-display) !important;
  font-weight: 700;
}

/* ==========================================================================
   BUTTONS — apply class "btn-solid" or "btn-line" to any Gutenberg
   Button block via the block's "Additional CSS class(es)" field
   ========================================================================== */
.button, button, input[type="submit"],
.wp-block-button__link{
  font-family: var(--font-mono) !important;
  font-size: 0.82rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0 !important;
  padding: 14px 24px !important;
}

.wp-block-button__link,
.button{
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
}
.wp-block-button__link:hover,
.button:hover{
  background: var(--orange) !important;
  border-color: var(--orange) !important;
}

.btn-line .wp-block-button__link{
  background: transparent !important;
  color: var(--ink) !important;
}
.btn-line .wp-block-button__link:hover{
  background: var(--ink) !important;
  color: var(--paper) !important;
}

/* ==========================================================================
   CALLOUT BOX — apply class "ec-callout" to a Gutenberg Group block
   to reproduce the orange-edged highlight box from the FEA lesson
   ========================================================================== */
.ec-callout{
  border-left: 3px solid var(--orange);
  background: var(--grid);
  padding: 18px 22px;
  margin: 24px 0;
  font-size: 0.94rem;
}

/* ==========================================================================
   CARDS — apply "ec-card" to Group blocks inside a Columns block to
   reproduce the three-card "Start Here" layout
   ========================================================================== */
.ec-card{
  border: 1px solid var(--line);
  padding: 28px;
}
.ec-card .ec-tag{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: block;
  margin-bottom: 12px;
}

/* ==========================================================================
   CORNER TAB — auto-inserted by functions.php above single posts/courses
   ========================================================================== */
.ec-corner-tab{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 1px solid var(--line);
  display: inline-block;
  padding: 8px 14px;
  margin-bottom: 20px;
}

/* ==========================================================================
   TUTOR LMS overrides — keep course pages on-brand
   ========================================================================== */
.tutor-course-topic-title,
.tutor-course-single-content-title{
  font-family: var(--font-display) !important;
}
.tutor-btn-primary{
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tutor-btn-primary:hover{
  background: var(--orange) !important;
  border-color: var(--orange) !important;
}
.tutor-color-primary{ color: var(--orange) !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer, footer.site-info{
  border-top: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px){
  .ec-card{ margin-bottom: 16px; }
}