/* =========================================================
   Is GOD in Control? — isgodincontrol.com
   Static rebuild of the original Avada/WordPress design.
   All sizing in rem; 1rem = 16px.
   ========================================================= */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Merriweather";
  src: url("/fonts/merriweather-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("/fonts/merriweather-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Merriweather Sans";
  src: url("/fonts/merriweather-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merriweather Sans";
  src: url("/fonts/merriweather-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Design tokens (taken from the original theme) ---------- */
:root {
  --navy: #365778;         /* header + footer bar */
  --navy-dark: #2f4c6b;    /* page background behind footer */
  --navy-line: #4577a5;    /* footer top border */
  --teal: #227593;         /* page titles (h1) */
  --nav-active: #91bebb;   /* current/hover nav item */
  --button: #4d9893;
  --button-hover: #3b7776;
  --link: #1a6f9e;         /* original #1a80b6, darkened slightly for WCAG AA contrast on white */
  --text: #323944;
  --heading: #22262d;
  --rule: #e2e2e2;

  --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --font-sans: "Merriweather Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  --container: 75rem;      /* 1200px content width */
  --gutter: 1.25rem;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;   /* keeps footer at the bottom on short pages */
  background: var(--navy-dark);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

main { flex: 1; background: #fff; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--teal); }

:focus-visible { outline: 3px solid var(--nav-active); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--heading);
  line-height: 1.35;
  margin: 0 0 0.8em;
}
h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); font-style: italic; color: var(--teal); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }

/* Sitewide vertical rhythm: space between consecutive content blocks */
.content > * + * { margin-top: 0; }
.content > * + h2 { margin-top: 2.5rem; }
.content > :last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: #fff; color: var(--heading);
  padding: 0.75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* ---------- Header ---------- */
.site-header { background: var(--navy); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  min-height: 7.5rem;
  padding-block: 0.625rem;
}

.logo { flex-shrink: 0; }
.logo img { width: 12.5rem; height: auto; }

.main-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 3.5rem;
}
.main-nav a {
  display: block;
  padding: 0.5rem 0;
  color: #fff;
  font-size: 1.125rem;
  text-decoration: none;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--nav-active); }

/* ---------- Hero (scripture banner, every page) ---------- */
/* Image is an absolutely-positioned layer; the text box sets a min-height
   so long text can grow instead of being clipped on small screens. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #31506f;
  color: #fff;
}
.hero img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero-text {
  min-height: 25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-block: 3rem;
}
.hero blockquote { margin: 0; max-width: 62rem; }
.hero blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
  line-height: 1.35;
  margin: 0 0 1rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.hero cite {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 1.125rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* ---------- Page body ---------- */
.page-body { padding-block: 4.5rem 5.5rem; }
.narrow { max-width: 56rem; margin-inline: auto; }   /* comfortable reading width for text pages, centered (text stays left-aligned) */

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* ---------- Home: book feature ---------- */
.book {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 3rem;
  align-items: start;
}
.book-cover img { width: 100%; max-width: 25rem; }

.buy-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 25rem;
  margin-top: 1.75rem;
}
.button {
  display: block;
  padding: 0.85rem 1rem;
  background: var(--button);
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition: background-color 0.2s;
}
.button:hover, .button:focus-visible { background: var(--button-hover); color: #fff; }

.eyebrow {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  color: var(--heading);
  line-height: 1.3;
  margin: 0 0 1.5rem;
}
.book h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem); line-height: 1.3; margin-bottom: 2.5rem; }

.topic-list { margin: 0; padding-left: 1.5rem; font-size: 1.25rem; line-height: 1.55; color: var(--heading); }

/* ---------- About: photo gallery ---------- */
/* Masonry layout via CSS columns: photos keep their natural heights and
   stack down each column with no gaps (items flow top-to-bottom, then across). */
.gallery {
  list-style: none;
  margin: 0; padding: 0;
  columns: 2;
  column-gap: 0.625rem;
}
.gallery li {
  break-inside: avoid;       /* never split a photo across columns */
  margin-bottom: 0.625rem;
}
.gallery button {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  cursor: zoom-in;
}
.gallery img { width: 100%; }

.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 95vw; max-height: 95vh;
}
.lightbox::backdrop { background: rgba(10, 20, 32, 0.88); }
.lightbox img { max-width: 90vw; max-height: 85vh; width: auto; margin: 0 auto; }
.lightbox-close {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 1.75rem; line-height: 1; cursor: pointer;
}

/* ---------- Speaking Dates: audio list ---------- */
.audio-list { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--rule); }
.audio-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.5rem 1.5rem;
  align-items: center;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--rule);
}
.audio-list .title { font-size: 1.0625rem; color: var(--heading); }
.audio-list audio { width: 100%; height: 2.5rem; }

/* ---------- Resources ---------- */
.link-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.link-list li { margin-bottom: 0.6rem; }
.file-note { font-size: 0.875rem; color: #5b6370; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  border-top: 1px solid var(--navy-line);
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
  padding: 1.125rem 0 1rem;
}
.site-footer p { margin: 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.site-footer .sep { margin-inline: 0.4em; opacity: 0.8; }

/* ---------- Responsive ---------- */
@media (max-width: 56rem) {
  .header-inner { flex-direction: column; justify-content: center; padding-block: 1rem 0.5rem; }
  .main-nav ul { justify-content: center; gap: 0 1.5rem; }
  .main-nav a { font-size: 1.0625rem; padding: 0.6rem 0; }
}

/* Phones: all four nav items on one row (still wraps gracefully if text is enlarged) */
@media (max-width: 26rem) {
  .main-nav ul { gap: 0 1rem; }
  .main-nav a { font-size: 0.9375rem; }

  .book { grid-template-columns: 1fr; gap: 2.5rem; }
  .book-cover { justify-self: center; width: 100%; max-width: 25rem; }
}

@media (max-width: 40rem) {
  .hero-text { min-height: 17rem; padding-block: 2.25rem; }
  .page-body { padding-block: 3rem 3.75rem; }
  .audio-list li { grid-template-columns: 1fr; }
  .topic-list { font-size: 1.125rem; }
  .site-footer .sep { display: none; }
  .site-footer .part { display: block; }
}

/* Short landscape phones: keep the banner from eating the whole screen */
@media (max-height: 30rem) and (orientation: landscape) {
  .hero-text { min-height: 13rem; padding-block: 1.75rem; }
  .header-inner { flex-direction: row; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Very narrow phones (≈360px) */
@media (max-width: 23rem) {
  .main-nav ul { gap: 0 0.8rem; }
  .main-nav a { font-size: 0.875rem; }
}