/* Quechua Explorer — site styles
   Font substitutions: Inter for SoDoSans, Lora for Lander Tall, Kalam for Careers script. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@400;500;600;700&family=Kalam:wght@400;700&display=swap');

:root {
  /* ---- Green tiers ---- */
  --green-starbucks: #006241;
  --green-accent:    #00754A;
  --green-house:     #1E3932;
  --green-uplift:    #2b5148;
  --green-light:     #d4e9e2;

  /* ---- Gold ---- */
  --gold: #cba258;

  /* ---- Surfaces ---- */
  --surface-white:  #ffffff;
  --surface-warm:   #f2f0eb;
  --surface-ceramic:#edebe9;
  --surface-black:  #000000;

  /* ---- Text ---- */
  --text-black:      rgba(0, 0, 0, 0.87);
  --text-black-soft: rgba(0, 0, 0, 0.58);
  --text-white:      rgba(255, 255, 255, 1);

  /* ---- Semantic ---- */
  --input-border: #d6dbde;
  --hairline:     #e7e7e7;

  /* ---- White alpha ladder ---- */
  --white-a20: rgba(255,255,255,0.20);
  --white-a60: rgba(255,255,255,0.60);
  --white-a70: rgba(255,255,255,0.70);
  --white-a80: rgba(255,255,255,0.80);
  --white-a90: rgba(255,255,255,0.90);

  /* ---- Fonts ---- */
  --font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---- Effects ---- */
  --radius-card: 12px;
  --radius-input: 4px;
  --radius-pill: 50px;
  --shadow-card: 0px 0px 0.5px 0px rgba(0,0,0,0.14), 0px 1px 1px 0px rgba(0,0,0,0.24);
  --shadow-nav: 0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07);

  --tracking-normal: -0.01em;
  --line-height-normal: 1.5;
}

html { font-size: 62.5%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: var(--line-height-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--text-black);
  background: var(--surface-warm);
  -webkit-font-smoothing: antialiased;
}

img { transition: opacity 0.3s ease-in; }

a { color: var(--green-accent); }
a:hover { color: var(--green-starbucks); }

* { box-sizing: border-box; }

::selection { background: var(--green-light); color: var(--green-house); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--green-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--green-house); color: var(--text-white);
  padding: 12px 20px; z-index: 100; border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---- Buttons (replaces the design-system Button component) ---- */
.qe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
}
.qe-btn:active { transform: scale(0.95); }

.qe-btn-small,   a.qe-btn-small   { padding: 7px 16px; font-size: 14px; }
.qe-btn-default, a.qe-btn-default { padding: 7px 16px; font-size: 14px; }
.qe-btn-large,   a.qe-btn-large   { padding: 14px 40px; font-size: 16px; }

.qe-btn-primary { background: var(--green-accent); color: var(--surface-white); border: 1px solid var(--green-accent); }
a.qe-btn-primary:hover, .qe-btn-primary:hover { color: var(--surface-white); background: var(--green-starbucks); border-color: var(--green-starbucks); }

.qe-btn-outlined { background: transparent; color: var(--green-accent); border: 1px solid var(--green-accent); }
a.qe-btn-outlined:hover, .qe-btn-outlined:hover { color: var(--green-starbucks); background: var(--green-light); }

.qe-btn-outlinedOnDark { background: transparent; color: var(--surface-white); border: 1px solid var(--surface-white); }
a.qe-btn-outlinedOnDark:hover, .qe-btn-outlinedOnDark:hover { color: var(--surface-white); background: var(--white-a20); }

.qe-btn-invertedOnGreen { background: var(--surface-white); color: var(--green-accent); border: 1px solid var(--surface-white); }
a.qe-btn-invertedOnGreen:hover, .qe-btn-invertedOnGreen:hover { color: var(--green-starbucks); background: var(--green-light); }

/* ---- Form fields (contact page) ---- */
.qe-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-input);
  background: var(--surface-white);
  color: var(--text-black);
}
.qe-label {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-black);
  margin-bottom: 0.6rem;
}

table.compare th, table.compare td { padding: 1.4rem 1.6rem; text-align: left; font-size: 1.4rem; }

/* ---- Portrait placeholder (no real photos of fictional staff) ---- */
.qe-portrait {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 1.4rem;
  background: repeating-linear-gradient(135deg, var(--surface-ceramic), var(--surface-ceramic) 10px, var(--surface-warm) 10px, var(--surface-warm) 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-black-soft);
  font-family: ui-monospace, monospace;
  font-size: 1.2rem;
  text-align: center;
  padding: 1rem;
}