/* =============================================
   Ryan J O'Loughlin — Brand Styles (simplified)
   Lora (headings) + Source Sans Pro (body)
   Palette: Deep/Mid/Bright Blue + Yellow; Neutrals
   ============================================= */

/* Load fonts */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Source+Sans+Pro:wght@400;600;700&display=swap');

/* ---------- Brand Tokens ---------- */
:root {
  --font-sans: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lora", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  --brand-white: #FFFFFF;
  --brand-ivory: #FAFAED;
  --brand-lightgray: #E6E6E9;
  --brand-dimgray: #66666E;
  --brand-richblack: #00171F;

  --brand-deepblue:   #003459;
  --brand-midblue:    #007EA7;
  --brand-brightblue: #00A8E8;
  --brand-yellow:     #FFD55A;

  --brand-primary: var(--brand-deepblue);
  --brand-accent:  var(--brand-yellow);
  --brand-link:    var(--brand-midblue);
  --brand-muted:   var(--brand-dimgray);
  --brand-bg:      var(--brand-white);
  --brand-surface: var(--brand-ivory);
  --brand-border:  var(--brand-lightgray);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --content-max: 880px;
}

body.quarto-dark {
  --brand-primary: #66B9FF;
  --brand-link:    #00A8E8;
  --brand-muted:   #9BA3AA;
  --brand-bg:      var(--brand-richblack);
  --brand-surface: #032634;
  --brand-border:  #0E3443;
}

/* ---------- Base Typography ---------- */
body {
  font-family: var(--font-sans);
  background: var(--brand-bg);
  color: #111;
  line-height: 1.7;
}
body.quarto-dark { color: #e9eef2; }

h1, h2, h3, h4, .navbar-brand {
  font-family: var(--font-serif);
}
h1, h2, h3 { 
  margin: var(--space-4) 0 var(--space-2); 
  padding-top: var(--space-4);
}
h4, h5, h6 { margin: var(--space-3) 0 var(--space-1); }
p, ul, ol { margin: 0.6rem 0 0.9rem; }
small { color: var(--brand-muted); }

h4 {
  font-size: 1.1rem;   /* smaller than h3, bigger than body */
  font-weight: 600;    /* optional: keeps them visually distinct */
  margin: var(--space-3) 0 var(--space-1);
}


a { color: var(--brand-link); }
a:hover { text-decoration: underline; }
body.quarto-dark a { color: var(--brand-brightblue); }

code, pre { font-family: var(--font-mono); }
hr { margin: var(--space-4) 0; }

/* ---------- Utility: brand accent text color ---------- */
/* Target only headings with this class (Quarto also adds class to the section wrapper) */
h1.brand-bright, h2.brand-bright, h3.brand-bright, h4.brand-bright {
  color: var(--brand-brightblue);
}

.section-card {
  background: var(--brand-bg);
  border: 1px solid var(--brand-border) !important;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.06) !important; /* subtle */
  border-radius: 1rem !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
}

/* Title row: clamp to 2 lines, fixed visual height so rows align */
.talk-title {
  margin: 0;                     /* headings often add default margin */
  line-height: 1.25;             /* set a known line-height */
  min-height: calc(1.25em * 2);  /* 2 lines worth of space */
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* gracefully truncate long titles */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta row (venue + month/year): one-line height */
.talk-meta {
  line-height: 1.2;
  min-height: 1.2em;
  color: var(--brand-muted);
  font-size: 0.95rem;            /* keep compact */
}

/* Make the image occupy the first grid row */
.section-card img.talk-thumb {
  width: 100%;
  height: clamp(140px, 22vw, 200px); /* consistent thumbnail height */
  object-fit: cover;                 /* crop to fill without distortion */
  display: block;
  grid-row: 1 / 2;
  border-radius: 0.75rem;
}

/* ---------- Navbar ---------- */
.navbar {
  border-bottom: 1px solid var(--brand-border);
  padding: .35rem 0;
}
.navbar-brand, .navbar-nav .nav-link { font-weight: 700; }
.navbar .nav-link { white-space: nowrap; font-size: 0.96rem; }

/* Hover open dropdown (desktop only) */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block !important;
    margin-top: 0;
    opacity: 0.8;
    transition: opacity 150ms ease-in-out;
  }
  .navbar .dropdown:hover > .nav-link {
    color: var(--brand-primary);
    background-color: rgba(0, 52, 89, 0.06);
  }
}

/* Extra space between page title block and body */
.quarto-title-block {
  margin-bottom: 4rem; /* adjust 2–4rem to taste */
}

/* ---------- Callouts, Footer ---------- */
.callout { border-radius: 12px; }
.callout-note { border-left-color: var(--brand-primary); }
.callout-tip  { border-left-color: var(--brand-accent); }
.footer { border-top: 1px solid var(--brand-border); }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 2px dashed var(--brand-accent); outline-offset: 2px; }

/* ---------- Mask qaruto page title, metadata ---------- */
.quarto-title-block {
  display: none;
}
.quarto-title-meta { display: none; }

/* ---------- link muted ----------  */
.link-muted {
  color: inherit;            /* same color as text */
  font: inherit;             /* same font as text */
  size: inherit;           /* same size as text */
  text-decoration: none;     /* no underline */
}
.link-muted:hover {
  color: var(--brand-link);  /* brighten on hover */
}

.logo-strip img {
  height: 26px;   /* all logos same height */
  width: auto;    /* width adjusts, keeps aspect ratio */
  object-fit: contain;
  filter: grayscale(100%);
  margin: 0 8px;
  opacity: .8;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.logo-strip { padding-top: 20px; }
.logo-strip img:hover{
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-1px);
}

/* Dark mode refinements */
body.quarto-dark .section-card {
  background: var(--brand-surface);
  border-color: var(--brand-border) !important;
  /* add a faint inner outline for separation on very dark BGs */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 .125rem .25rem rgba(0,0,0,.35) !important;
}

body.quarto-dark .logo-strip {
  background: var(--brand-surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 8px 12px;
}
body.quarto-dark .logo-strip img {
  /* Invert + desaturate so marks become light on dark */
  filter: invert(1) grayscale(100%) brightness(1.05) contrast(0.95);
  opacity: 1;
}
body.quarto-dark .logo-strip img:hover{
  filter: grayscale(0%) brightness(1.2) contrast(1.0);
}

/* ================= Hero (full-bleed photo) ================= */
.hero-photo{
  position: relative;
  /* Full-bleed: span entire viewport width, ignoring content container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Cover full screen height */
  /* Use dynamic viewport units where supported for correct mobile sizing */
  min-height: 100vh;   /* fallback */
  min-height: 100dvh;  /* dynamic viewport (Chrome/Safari) */
  min-height: 100svh;  /* small viewport height (iOS Safari) */
  background-image: url('assets/portrait.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero-photo::after{
  content: "";
  position: absolute; inset: 0;
  /* top subtle, bottom darker to enhance bottom text legibility */
  background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.4) 80%,  rgba(0,0,0,0.75) 95%,rgba(0,0,0,0.9) 100%);
}
.hero-overlay{
  position: absolute; inset: 0; z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto; /* id block floats, bottom block pinned */
}
.hero-id{
  align-self: start;
  justify-self: end; /* move to top-right */
  margin: clamp(16px, 5vw, 40px);
  padding: clamp(8px, 1.6vw, 14px) clamp(10px, 2vw, 18px);
  /* remove background chrome for a clean overlay */
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  color: #fff;
  max-width: min(92vw, 520px);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.hero-name{
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
}
.hero-role{
  font-size: clamp(1rem, 2.1vw, 1.25rem);
  opacity: .95;
}
.hero-tag{
  font-size: clamp(0.95rem, 1.9vw, 1.15rem);
  opacity: .95;
}

/* Mobile-only line break helper: hidden by default */
.mobile-br{ display: none; }
.ghost-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  cursor: pointer;
}
.ghost-link:hover, .ghost-link:focus{
  border-bottom-color: currentColor;
  outline: none;
}
/* Subtle, always-visible hint with gentle float */
.ghost-hint{
  display: block;              /* place on its own line */
  margin-left: 1rem;         
  margin-top: .125rem;          /* small spacing from title */
  font-size: .9em;
  opacity: .6;                 /* lightly visible by default */
  color: inherit;              /* match surrounding text */
  text-decoration: none;       /* no underline */
  cursor: pointer;
  animation: ghostHintFloat 2.4s ease-in-out infinite;
}
.hero-tag:hover .ghost-hint,
.ghost-link:focus + .ghost-hint,
.ghost-hint:focus{
  opacity: .95;                /* brighten on hover/focus */
}
@keyframes ghostHintFloat {
  0%, 100% { transform: translateY(-1px); }
  50%      { transform: translateY(-3px); }
}
@media (max-width: 576px){
  .ghost-hint{ opacity: .6; }
}
.hero-bottom{
  align-self: end;
  padding: clamp(14px, 2vw, 22px) clamp(16px, 4vw, 40px);
  color: #fff;
}
.hero-headline{
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: clamp(1.4rem, 4.8vw, 2.6rem);
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  margin-bottom: clamp(10px, 2.2vw, 16px);
}
.hero-cta{
  font-weight: 700;
  padding: .6rem 1rem;
}

/* Scroll cue at bottom of hero */
.hero-scroll{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Nudge higher so it’s visible immediately on load */
  bottom: clamp(48px, 8vh, 96px);
  color: rgba(255,255,255,.95);
  text-decoration: none;
  opacity: 1;
  transition: opacity .15s ease;
}
.hero-scroll:hover{ opacity: 1; }
.hero-scroll .bi{ font-size: 1.75rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
@keyframes heroFloat { 0%,100%{ transform: translate(-50%, 0); } 50%{ transform: translate(-50%, -6px); } }
.hero-scroll{ animation: heroFloat 2.2s ease-in-out infinite; }


/* Mobile refinements */
@media (max-width: 576px){
  .hero-id{
    margin: 12px;
    border-radius: 10px;
  }
  .hero-bottom{ padding: 12px 14px 16px; }
}

/* On smaller screens, move identity block to lower-right to avoid overlapping the face */
@media (max-width: 768px){
  .hero-id{
    align-self: end;     /* push towards bottom of hero */
    justify-self: end;   /* keep to the right */
    text-align: right;   /* align text to right edge */
    margin: 12px;        /* tighter spacing */
  }
}

/* On large screens, use a 3x3 grid and bias placement within cells */
@media (min-width: 1200px){
  .hero-overlay{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 4vw; /* gentle inset from edges */
  }
  /* Top-right cell, place near its lower-left corner */
  .hero-id{
    grid-column: 3; /* right column */
    grid-row: 1;    /* top row */
    justify-self: start; /* left within the cell */
    align-self: end;     /* bottom within the cell */
    text-align: left;
    margin: 0.5vw 0.75vw; /* slight breathing room */
  }
  /* Bottom-left cell, place near its upper-right corner */
  .hero-bottom{
    grid-column: 1; /* left column */
    grid-row: 3;    /* bottom row */
    justify-self: end;  /* right within the cell */
    align-self: start;  /* top within the cell */
    text-align: right;
    padding: 0.5vw 0.75vw;
  }
}

/* Tighter focal crop for smaller screens so the subject stays centered */
@media (max-width: 992px){
  .hero-photo{ background-position: center center; }
}
@media (max-width: 768px){
  .hero-photo{ background-size: 250% auto; background-position: center center; }
}
@media (max-width: 600px){
  .hero-photo{ background-size: 300% auto; background-position: center center; }
}
@media (max-width: 480px){
  .hero-photo{ background-size: 380% auto; background-position: top center; }
}

/* Show mobile line break on small phones */
@media (max-width: 480px){
  .mobile-br{ display: inline !important; }
}

/* On small screens explicitly set height to the dynamic viewport to avoid extra scroll */
@media (max-width: 768px){
  .hero-photo{
    height: 100vh;   /* fallback */
    height: 100dvh;  /* dynamic viewport */
    height: 100svh;  /* iOS Safari small viewport */
  }
}

/* === Pull-quote layout for What I Work On === */
.what-i-do { position: relative; }
.what-i-do::after { content: ""; display: table; clear: both; }

.pull-quote {
  background: var(--brand-white);
  color: inherit;
  font-family: var(--font-serif); /* match header font (Lora) */
  border-left: 8px solid var(--brand-brightblue);
  border-radius: 16px;
  padding: 1rem 1.4rem 1.2rem 1.25rem; /* slightly shorter vertically */
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.08);
}

.pull-quote-right {
  float: right;
  width: clamp(340px, 44vw, 560px);
  margin: 0 0 1rem 1.75rem; /* gap to flowing text on the left */
  shape-outside: inset(0 round 16px); /* softer wrap on modern browsers */
}

/* Raise the quote to visually overlap the section heading */
.pull-quote-raised { margin-top: -1.5rem; }
@media (min-width: 768px){
  .pull-quote-raised { margin-top: -2.25rem; }
}
@media (min-width: 992px){
  .pull-quote-raised { margin-top: -4rem; }
}

.pull-quote-mark {
  display: block;
  line-height: 0.6;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(80px, 12vw, 160px);
  color: var(--brand-brightblue);   /* bright blue brand accent */
  margin-bottom: .25rem;
}

.pull-quote-text {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-style: italic;
  line-height: 1.48; /* tighten slightly to reduce height */
  font-weight: 600; /* heavier for emphasis */
}

.float-clear { clear: both; }

/* Dark mode polish */
body.quarto-dark .pull-quote {
  background: var(--brand-surface);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 .125rem .25rem rgba(0,0,0,.35);
}

/* === Full-height cover images inside grid columns === */
.cover-img {
  display: block;
  width: 100%;
  height: auto;          
  object-fit: cover;      /* crop to fill without distortion */
  object-position: top center; /* prefer showing top of image */
  border-radius: 12px;    /* optional: soften corners */
}
/* Crop helper: constrain image box by aspect, show top half */
.img-top-half { aspect-ratio: 1 / 1; }
/* Bottom fade-out helper */
.img-fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 80%, rgba(0,0,0,0.3) 90%,  rgba(0,0,0,0.1) 95%,rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 80%, rgba(0,0,0,0.3) 90%,  rgba(0,0,0,0.1) 95%,rgba(0,0,0,0) 100%);
}
/* (reverted) removed background-based cover crops */
@media (max-width: 768px){
  .cover-img {
    height: auto;         /* stack naturally on small screens */
    max-height: 60vh;     /* prevent overly tall images on small devices */
  }
}

/* === Mobile ordering helpers (Grid/Flex compatible) === */
@media (max-width: 768px){
  .order-mobile-1 { order: 1 !important; }
  .order-mobile-2 { order: 2 !important; }
}

/* === Scroll Reveal === */
.reveal { 
  opacity: 0; 
  transform: translateY(12px);
  transition: opacity 480ms ease, transform 560ms ease; 
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform; 
}
.reveal.reveal-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}