/* ==========================================================================
   AvnetTours — styles.css
   One stylesheet shared by every page of the site.

   The look, in one sentence: a warm off-white page, book-like serif text,
   one calm olive-green accent, thin dividers instead of boxes and shadows.

   HOW TO CHANGE COLORS OR SIZES:
   Almost everything visual is controlled by the named values just below
   (the "--something: value;" lines). Change a value there once and it
   updates everywhere it's used. You rarely need to touch anything else.
   ========================================================================== */

:root {
  /* ---- Colors (change these to re-theme the whole site) ---- */
  --paper: #faf7f0;        /* page background — warm off-white, like paper */
  --ink: #26241f;          /* main text — soft near-black, warm not harsh */
  --faded: #6e675a;        /* secondary text — for notes and small print */
  --olive: #5a6b3b;        /* THE accent color — calm olive green */
  --olive-deep: #45542d;   /* darker olive — used when hovering buttons/links */
  --line: #e4decf;         /* hairline dividers — barely-there warm beige */
  --field: #ffffff;        /* background of form boxes, slightly brighter than the page */

  /* ---- Type (the two "voices" of the site) ----
     Body text uses Georgia, a classic serif that is built into every
     computer and phone — no downloaded fonts, so the site loads instantly
     and feels like a letter, not a landing page.
     Buttons, navigation and labels use the device's own system font
     (a clean sans-serif) so the practical parts stay crisp. */
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ---- A tiny reset ----
   Browsers add their own default spacing to everything; this removes it
   so the spacing you see is only the spacing we chose on purpose. */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- The page itself ---- */
html { scroll-behavior: smooth; } /* clicking an in-page link glides instead of jumping */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;      /* about 17px — comfortable for long reading */
  line-height: 1.7;          /* generous space between lines, easy on the eyes */
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   THE STICKY HEADER
   Stays pinned to the top of the screen while scrolling, on every page.
   Row 1: site name on the left, the one green call-to-action button on
          the right (required to be visible at all times, site-wide).
   Row 2: the page links, which wrap onto two lines on small phones.
   ========================================================================== */
.site-header {
  position: sticky;          /* "sticky" = scrolls with the page until it hits the top, then stays */
  top: 0;
  z-index: 10;               /* keeps the header above the page content while scrolling */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.masthead {
  display: flex;                    /* puts the name and the button on one row */
  align-items: center;
  justify-content: space-between;   /* name pushed left, button pushed right */
  gap: 1rem;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0.7rem 1rem 0.4rem;
}

.brand {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.site-nav {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1rem 0.6rem;
  display: flex;
  flex-wrap: wrap;                  /* lets links flow onto a second line on narrow phones */
  gap: 0.15rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.86rem;
}

.site-nav a {
  color: var(--faded);
  text-decoration: none;
  padding: 0.15rem 0;
}
.site-nav a:hover { color: var(--olive-deep); }

/* The link for the page you're currently on gets a small olive underline,
   so visitors always know where they are. (Each HTML page marks its own
   link with class="active".) */
.site-nav a.active {
  color: var(--ink);
  border-bottom: 2px solid var(--olive);
}

/* ==========================================================================
   BUTTONS
   Two kinds only:
   - .btn-solid  → olive with white text, for the main action on a page
   - .btn-ghost  → outlined, for secondary actions
   Deliberately plain: small corner rounding, no shadows, no gradients.
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  padding: 0.6rem 1.1rem;
  border-radius: 5px;
  border: 1.5px solid var(--olive);
  transition: background 0.15s ease, color 0.15s ease; /* a gentle color change on hover, nothing flashy */
  cursor: pointer;
}

.btn-solid { background: var(--olive); color: #fff; }
.btn-solid:hover { background: var(--olive-deep); border-color: var(--olive-deep); }

.btn-ghost { background: transparent; color: var(--olive-deep); }
.btn-ghost:hover { background: var(--olive); color: #fff; }

/* The header button is slightly smaller so the top bar stays slim on phones */
.masthead .btn { padding: 0.45rem 0.9rem; font-size: 0.88rem; white-space: nowrap; }

/* ==========================================================================
   MAIN CONTENT COLUMN
   All text sits in one centered column, narrow enough to read comfortably
   (long lines of text are tiring to read).
   ========================================================================== */
main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.2rem 1rem 3rem;
}

/* ---- Headings ----
   clamp() means: "never smaller than X, never bigger than Y, scale with
   the screen in between" — so headings fit phones and desktops alike. */
h1 {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  line-height: 1.25;
  font-weight: normal;   /* normal weight reads calmer, less like an advert */
  margin-bottom: 0.9rem;
}

h2 {
  font-size: clamp(1.25rem, 3.5vw, 1.5rem);
  line-height: 1.3;
  font-weight: normal;
  margin: 0 0 0.7rem;
}

h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; }

/* A slightly larger, quieter paragraph used for page intros */
.lede { font-size: 1.15rem; color: var(--ink); }

/* Small muted text for notes and fine print */
.note { font-family: var(--sans); font-size: 0.85rem; color: var(--faded); }

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

/* ==========================================================================
   THE "WAYPOINT" DIVIDER — the site's one signature detail
   A thin line with a small olive diamond in the middle, like a stop
   marked on a route. Used between sections instead of boxes or shadows.
   ========================================================================== */
.wp {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 2.4rem 0;
  color: var(--olive);
}
/* the two thin lines on either side of the diamond */
.wp::before, .wp::after {
  content: "";
  flex: 1;                       /* each line stretches to fill its half */
  border-top: 1px solid var(--line);
}
/* the diamond itself is a tiny rotated square */
.wp span {
  width: 7px; height: 7px;
  background: var(--olive);
  transform: rotate(45deg);
  flex: none;
}

/* ==========================================================================
   LISTS
   Bullet lists across the site use the same small olive diamond as the
   divider, so the whole site shares one quiet motif.
   ========================================================================== */
ul.marked { list-style: none; margin: 0 0 1.2rem; }
ul.marked li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.55rem;
}
ul.marked li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px; height: 6px;
  background: var(--olive);
  transform: rotate(45deg);
}

/* ==========================================================================
   THE TWO-PATH CHOICE ON THE HOME PAGE
   Two simple "signposts" side by side (stacked on phones): in-person
   on one side, online membership on the other. Just a thin border and
   an olive top edge — deliberately not glossy "cards".
   ========================================================================== */
.paths {
  display: grid;
  grid-template-columns: 1fr;     /* phones: one column, stacked */
  gap: 1.2rem;
  margin: 1.8rem 0;
}
@media (min-width: 640px) {       /* wider screens: two columns side by side */
  .paths { grid-template-columns: 1fr 1fr; }
}

.path {
  border: 1px solid var(--line);
  border-top: 3px solid var(--olive);   /* the olive top edge = the signpost */
  padding: 1.2rem 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;               /* stacks the text, pushes button to the bottom */
}
.path .btn { margin-top: auto; align-self: flex-start; }

/* The small label above each signpost's title, e.g. "IN PERSON" */
.kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 0.4rem;
}

/* ==========================================================================
   PRICE DISPLAY
   The big price line, with a smaller approximate local-currency amount
   added next to it by the currency script when it can detect the country.
   ========================================================================== */
.price { font-size: 1.5rem; }
.fx {                          /* the "≈ ₪1,850" part, added by site.js */
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--faded);
  margin-left: 0.4rem;
  white-space: nowrap;
}

/* ==========================================================================
   THE AGREEMENT CHECKBOX ROW (next to payment buttons)
   ========================================================================== */
.agree {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--faded);
  margin: 0.9rem 0 1.1rem;
  max-width: 34rem;
}
.agree input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--olive);   /* makes the tick itself olive instead of default blue */
  flex: none;
}
/* Inside the agreement row, the label is ordinary sentence text — this
   undoes the bold form-label look it would otherwise inherit. */
.agree label {
  display: inline;
  font-weight: normal;
  font-size: inherit;
  margin: 0;
}

/* The row holding the home page's two primary buttons — they sit side by
   side, and wrap onto two lines on narrow phones. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.5rem 0 1.8rem;
}

/* ==========================================================================
   FORMS (contact form, prayer request form)
   Plain boxes with thin borders; the olive appears only when a box is
   selected, so it's obvious where you're typing.
   ========================================================================== */
form { max-width: 34rem; }

label {
  display: block;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 1rem 0 0.3rem;
}

input[type="text"], input[type="email"], input[type="tel"],
select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.6rem 0.7rem;
}

/* When a box is selected for typing, its border turns olive */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 2px rgba(90, 107, 59, 0.18); /* a soft olive glow, the one place a "shadow" earns its keep */
}

textarea { min-height: 6rem; resize: vertical; }

form .btn { margin-top: 1.3rem; }

/* ==========================================================================
   POLICY PAGE SECTIONS
   Each policy topic is separated by a thin line — readable, not legalese-dense.
   ========================================================================== */
.policy-section {
  padding: 1.3rem 0;
  border-top: 1px solid var(--line);
}
.policy-section:first-of-type { border-top: none; }

/* ==========================================================================
   ABOUT PAGE PHOTO
   Shows the photo if one has been uploaded via the admin panel; otherwise
   shows a friendly dashed placeholder box (site.js decides which).
   ========================================================================== */
.photo-wrap { margin: 0 0 1.5rem; }
.photo-wrap img {
  display: block;
  width: 100%;
  max-width: 20rem;
  border-radius: 6px;
}
.photo-placeholder {
  max-width: 20rem;
  aspect-ratio: 4 / 5;                /* keeps the empty box photo-shaped */
  border: 2px dashed var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: var(--faded);
  font-family: var(--sans);
  font-size: 0.85rem;
}

/* ==========================================================================
   MEMBERS PAGE — video archive
   Each recording sits in its own block; the video screen keeps a proper
   16:9 shape at any width.
   ========================================================================== */
.video-item { margin: 0 0 2rem; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #eeeadf;              /* soft placeholder tone while a video loads */
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.video-frame iframe {
  position: absolute;
  inset: 0;                          /* stretches the video to fill its frame exactly */
  width: 100%; height: 100%;
  border: 0;
}

/* ==========================================================================
   FOOTER — honest and simple: who I am, how to reach me, the socials.
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  padding: 2rem 1rem 2.6rem;
}
.footer-inner {
  max-width: 46rem;
  margin: 0 auto;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--faded);
}
.footer-inner p { margin-bottom: 0.4rem; }

.socials {
  display: flex;
  gap: 1rem;
  margin: 0.8rem 0;
}
.socials a {
  color: var(--faded);
  display: inline-flex;
  padding: 0.2rem;
}
.socials a:hover { color: var(--olive-deep); }
.socials svg { width: 22px; height: 22px; }

/* ==========================================================================
   SMALL UTILITIES
   ========================================================================== */
[hidden] { display: none !important; }  /* anything marked hidden truly disappears */

/* The banner shown only if the site's text files couldn't be loaded
   (which happens when someone opens an HTML file directly from their
   computer instead of through a web server — explained in the README). */
.load-warning {
  background: #f3ead6;
  border: 1px solid #e0d3ae;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.8rem 1rem;
  margin-bottom: 1.5rem;
}

/* Keyboard users see a clear olive outline on whatever they've moved to.
   (People who navigate with the Tab key instead of a mouse need this.) */
:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

/* If someone's device is set to reduce motion (a comfort/accessibility
   setting), turn off our few gentle transitions entirely. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
}