/*
Theme Name: Valas Bio
Theme URI: https://drcrisvalas.com
Author: The Customer Factory
Description: Single-page professional profile theme. Built for drcrisvalas.com.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: valas-bio
*/

/* ---- tokens ---------------------------------------------------------- */
:root {
  --ink:        #17302c;
  --ink-soft:   #40524e;
  --accent:     #1f6b5c;   /* caring teal */
  --accent-dk:  #164e43;
  --warm:       #e07b4a;   /* warm coral — the playful counterpoint */
  --warm-soft:  #f4a67c;
  --rule:       #d9d2c6;
  --bg:         #faf8f4;
  --card:       #ffffff;
  --shadow:     0 1px 2px rgba(23,48,44,.06), 0 8px 28px rgba(23,48,44,.07);
  --shadow-lg:  0 2px 6px rgba(23,48,44,.08), 0 18px 44px rgba(23,48,44,.12);
  --ring:       4px solid rgba(224,123,74,.0);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(224,123,74,.07), transparent 60%),
    radial-gradient(1000px 500px at -10% 20%, rgba(31,107,92,.07), transparent 55%),
    var(--bg);
  color: var(--ink);
  font: 400 18px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: 47rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---- paw scrim (subtle, fixed, behind everything) -------------------- */
.paw-scrim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%231f6b5c' fill-opacity='0.045'%3E%3Cellipse cx='16' cy='18' rx='3.2' ry='4.4'/%3E%3Cellipse cx='24' cy='15' rx='3.2' ry='4.4'/%3E%3Cellipse cx='32' cy='18' rx='3.2' ry='4.4'/%3E%3Cellipse cx='13' cy='26' rx='3' ry='4'/%3E%3Cellipse cx='35' cy='26' rx='3' ry='4'/%3E%3Cellipse cx='24' cy='28' rx='6.5' ry='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  transform: rotate(-8deg);
}

.masthead, main, .foot { position: relative; z-index: 1; }

/* ---- header ---------------------------------------------------------- */
.masthead {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--rule);
  padding: 3.5rem 0 2.75rem;
}

.ident {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  flex-wrap: wrap;
}

/* ---- portrait (headshot, circular, warm ring) ------------------------ */
.portrait {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg), 0 0 0 5px #fff, 0 0 0 7px var(--warm-soft);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.portrait:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), 0 0 0 5px #fff, 0 0 0 7px var(--warm);
}
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.ident-text { min-width: 15rem; }

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5.2vw, 2.85rem);
  line-height: 1.15;
  margin: 0 0 .4rem;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.role {
  margin: 0;
  font-size: 1.125rem;
  color: var(--accent-dk);
  font-weight: 600;
}

.locale {
  margin: .3rem 0 0;
  font-size: 1rem;
  color: var(--ink-soft);
}

.kicker {
  margin: .9rem 0 0;
  font-size: .95rem;
  color: var(--warm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.kicker-dot {
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--warm);
  box-shadow: 0 0 0 4px rgba(224,123,74,.18);
  animation: pulse 2.2s ease-in-out infinite;
}

/* ---- body ------------------------------------------------------------ */
main { padding: 3rem 0 1rem; }

section { margin: 0 0 2.75rem; }

h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  margin: 0 0 1rem;
  padding-bottom: .4rem;
  border-bottom: 3px solid var(--accent);
  border-image: linear-gradient(90deg, var(--warm), var(--accent)) 1;
  display: inline-block;
  text-wrap: balance;
}

p { margin: 0 0 1.1rem; max-width: 40rem; text-wrap: pretty; }

.lede {
  font-size: 1.2rem;
  color: var(--ink);
  border-left: 4px solid var(--warm);
  padding-left: 1.15rem;
  margin-bottom: 2rem;
}

ul.plain { list-style: none; margin: 0; padding: 0; }

ul.plain li {
  position: relative;
  padding: .55rem 0 .55rem 1.7rem;
  border-bottom: 1px solid var(--rule);
  max-width: 40rem;
}

ul.plain li:last-child { border-bottom: 0; }

ul.plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--accent);
}
ul.plain li:nth-child(odd)::before { background: var(--warm); }

/* ---- cards (credentials) -------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.5rem 1.35rem 1.35rem;
  box-shadow: var(--shadow);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--warm-soft);
  box-shadow: var(--shadow-lg);
}

.card-paw {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 26px;
  height: 26px;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e07b4a'%3E%3Cpath d='M12 7c-1.2-1.6-1.4-3.8-.4-5.2.4-.5.5-.8.4-1-.1-.3-.6-.3-1-.1-1.7 1.1-2.6 3.4-1.8 5.3 1.1 2.7 4 4.2 4.6 7.4.4 2.3-.5 5.6-3.4 6.4-.9.3-1.8-.1-2.3-.8-.6-1-.3-2.4.9-3.1.5-.3.4-1-.1-1.3-.7-.4-1.8-.2-2.5.6-1.5 1.7-1.2 4.7 1.1 6.2 3.2 2 8.4-.6 8.4-5.5 0-3.2-2.4-5.7-4.2-7.4-1.1-1-1.9-2.3-1.9-3.6-.2-1.1-.6-2-1.3-2.9Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card-paw { transform: rotate(-12deg) scale(1.15); }

.card h3 {
  margin: 0 0 .55rem;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-dk);
}

.card p { margin: 0; font-size: 1.02rem; }

/* ---- footer ---------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--rule);
  margin-top: 1rem;
  padding: 2rem 0 3rem;
  font-size: .97rem;
  color: var(--ink-soft);
  text-align: center;
}

.notice {
  background: #fffdf6;
  border: 1px solid #e6dcc2;
  border-radius: 8px;
  padding: .9rem 1.1rem;
  margin: 0 auto 1.25rem;
  max-width: 40rem;
  text-align: left;
}

.foot-mascots {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin-bottom: .5rem;
}

.paw {
  width: 22px;
  height: 22px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231f6b5c' fill-opacity='.55'%3E%3Cpath d='M12 7c-1.2-1.6-1.4-3.8-.4-5.2.4-.5.5-.8.4-1-.1-.3-.6-.3-1-.1-1.7 1.1-2.6 3.4-1.8 5.3 1.1 2.7 4 4.2 4.6 7.4.4 2.3-.5 5.6-3.4 6.4-.9.3-1.8-.1-2.3-.8-.6-1-.3-2.4.9-3.1.5-.3.4-1-.1-1.3-.7-.4-1.8-.2-2.5.6-1.5 1.7-1.2 4.7 1.1 6.2 3.2 2 8.4-.6 8.4-5.5 0-3.2-2.4-5.7-4.2-7.4-1.1-1-1.9-2.3-1.9-3.6-.2-1.1-.6-2-1.3-2.9Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: hop 2.6s ease-in-out infinite;
}

/* ---- motion ---------------------------------------------------------- */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(224,123,74,.18); }
  50%      { box-shadow: 0 0 0 8px rgba(224,123,74,.06); }
}

@keyframes hop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.reveal {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.in {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- mobile ---------------------------------------------------------- */
@media (max-width: 34rem) {
  .masthead { padding: 2.5rem 0 2rem; }
  .portrait { width: 100px; height: 100px; }
  .ident { gap: 1.4rem; }
  body { font-size: 17px; }
}