/* The one theme layer for the nikkah RSVP site.
 *
 * Every colour, size, font and spacing here is taken from the design pack.
 * The designs use inline styles to be readable on their own; that pattern is
 * deliberately NOT copied. Nothing in the page logic carries styling, and
 * there is no style attribute on any served element, which is what lets the
 * content security policy forbid inline styles and inline scripts outright.
 *
 * Two frames:
 *   .page        the 390 px guest frame, designs 01 to 08
 *   .wide        the admin frame, design 09
 */

@import url("fonts/fonts.css");

:root {
  --ground: #F1E6D0;        /* the page behind everything */
  --panel: #FBF6EA;         /* the arch panel and admin cards */
  --panel-edge: #C6A04F;    /* the gold line */
  --field: #FFFDF8;         /* inputs */
  --field-edge: #B8974F;
  --ink: #5A4514;           /* body text */
  --ink-strong: #3F300C;    /* text inside inputs */
  --gold-ink: #7D5E1A;      /* headings, links, primary button ground */
  --gold-ink-hover: #5C4411;
  --terracotta: #8A3A1E;    /* the Arabic notice and the respond-by line */
  --row-edge: #E6D8B6;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --caps: 'Cinzel', Georgia, serif;
  --script: 'Imperial Script', cursive;
  --arabic: 'Scheherazade New', 'Amiri', serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  display: flex;
  justify-content: center;   /* on wider screens the same column is centred */
}

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

/* ----------------------------------------------- the 390 px guest frame */
.page {
  position: relative;
  width: 390px;
  max-width: 100%;
  min-height: 800px;
  overflow: hidden;
  padding: 0 30px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--ground);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
}

/* The min-height each design draws. The page grows past it when its content
 * is longer, and the vines and the arch panel follow, which is the whole
 * reason they are laid out against the frame rather than given a height. */
.page--invitation { min-height: 1620px; }
.page--rsvp       { min-height: 1300px; }
.page--update     { min-height: 1300px; }
.page--upload     { min-height: 1000px; }
.page--thanks-yes { min-height: 980px; }
.page--find       { min-height: 960px; }
.page--thanks-no  { min-height: 800px; }
.page--signin     { min-height: 760px; }
.page--state      { min-height: 800px; }

/* The leafy vines. top and bottom are both pinned, so the vine runs to the
 * foot of the page whatever the page's height, and the 236 px top offset is
 * the design's own: it keeps the vine clear of the corner bouquets. */
.vine {
  position: absolute;
  top: 236px;
  bottom: 0;
  width: 110px;
  background: url("img/leafy-vine.webp") repeat-y;
  background-size: 110px 147px;
  mix-blend-mode: multiply;
  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0, #000 36px, #000 147px);
  mask-image: repeating-linear-gradient(to bottom, transparent 0, #000 36px, #000 147px);
}
.vine--left  { left: -42px; }
.vine--right { right: -42px; transform: scaleX(-1); }

.corner {
  position: absolute;
  top: -14px;
  width: 250px;
  height: 250px;
  mix-blend-mode: multiply;
}
.corner--left  { left: -24px; }
.corner--right { right: -24px; transform: scaleX(-1); }

/* The band above the arch. On the invitation it holds the language toggle;
 * elsewhere it is empty and holds the same space, as the designs draw it. */
.topband {
  position: relative;
  width: 330px;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arch { position: relative; display: block; flex: none; }

.panel {
  position: relative;
  flex: 1 0 auto;
  width: 330px;
  margin-top: -1px;
  padding: 0 24px 36px;
  background: var(--panel);
  border: 1.5px solid var(--panel-edge);
  border-top: none;
}

.stack {
  margin-top: -84px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  text-align: center;
}

.stack > form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
}

.head { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.eyebrow {
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--gold-ink);
}

.names {
  font-family: var(--script);
  font-size: 38px;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--gold-ink);
}

.title {
  margin: 6px 0 0;
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;   /* the design's own value; 1.5 was my guess */
}

.rule { width: 90px; height: 1.5px; background: var(--panel-edge); align-self: center; }

/* ------------------------------------------------------------- the event */
.event { display: flex; flex-direction: column; gap: 4px; }
.event-when {
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.14em;
  line-height: 1.8;
}
.event-venue {
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
/* Design 03 gives the venue a top margin; design 01 does not. */
.event-venue--spaced { margin-top: 8px; }
.event-address {
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  line-height: 1.7;
}
.respond {
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 11.5px;        /* design 01 */
  letter-spacing: 0.12em;
}
.respond--form {            /* design 02 */
  font-size: 12px;
  color: var(--terracotta);
}

/* -------------------------------------------------------------- the form */
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.field > label,
.label {
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="search"], input[type="number"], textarea, select {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--field-edge);
  border-radius: 2px;
  background: var(--field);
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink-strong);
}
textarea { height: auto; padding: 10px 12px; resize: vertical; }

.hint { font-size: 17px; font-style: italic; text-align: left; }
/* Design 02 pulls the mobile note up under its field; design 07's line is
 * not pulled up. */
.hint--tight { margin-top: -12px; }
.errors { margin: 0; padding: 0; list-style: none; text-align: left; color: var(--terracotta); font-size: 17px; }

.choices { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.choice {
  min-height: 52px;
  border: 1.5px solid var(--panel-edge);
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.16em;
  background: var(--field);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  /* The design draws these as buttons, whose computed line height is normal. */
  line-height: normal;
}
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice--on, .choice:has(input:checked) { background: var(--gold-ink); color: var(--panel); }

/* ----------------------------------------------------------- the buttons */
.btn, .btn-quiet {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 2px;
  text-decoration: none;
  text-align: center;
  font-family: var(--caps);
  text-transform: uppercase;
  cursor: pointer;
}
.btn {
  min-height: 52px;
  border: none;
  background: var(--gold-ink);
  color: var(--panel);
  font-size: 14px;
  letter-spacing: 0.2em;
  /* The design draws this as an anchor, which inherits the page line height.
   * A real button would take the browser's "normal" instead, so it is set
   * here to keep the computed value equal to the design's. */
  line-height: 1.45;
}
.btn-quiet {
  min-height: 48px;
  border: 1.5px solid var(--panel-edge);
  background: transparent;
  color: var(--gold-ink);
  font-size: 13px;
  letter-spacing: 0.18em;
  /* No design declares a line-height on a quiet control: each is an <a> that
     inherits its wrapper's, 1.45 on the phone pages and 1.4 on the wide admin
     page. A real <button> would take the browser's "normal" instead, so the
     inheritance has to be asked for by name. */
  line-height: inherit;
}

/* --------------------------------------------------------- Arabic pieces */
.ar { font-family: var(--arabic); }
.ar-block { display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--arabic); }
.ar-bismillah { font-size: 25px; line-height: 1.5; color: var(--gold-ink); }
.ar-verse { font-size: 17px; line-height: 1.8; font-style: italic; }
.ar-closing { font-size: 15px; line-height: 1.5; color: var(--gold-ink); }
.ar-notice {
  font-family: var(--arabic);
  font-size: 20px;
  line-height: 1.4;
  color: var(--terracotta);
  font-weight: 700;
}

/* The Arabic wording section of the invitation, which flips right to left. */
.ar-wording {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  font-family: var(--arabic);
  font-size: 20px;      /* design 01's own value */
  line-height: 1.6;
}
.ar-name { height: 64px; display: flex; align-items: center; justify-content: center; font-size: 46px; line-height: 1; color: var(--gold-ink); }
.ar-amp { font-size: 22px; line-height: 1; }
.ar-venue { font-size: 23px; font-weight: 700; }

/* ---------------------------------------------- the English invite block */
.invite-eyebrow {
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.2em;
}
.invite-names { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.invite-name { height: 64px; display: flex; align-items: center; font-family: var(--script); font-size: 48px; line-height: 1; white-space: nowrap; color: var(--gold-ink); }
.invite-amp { font-family: var(--caps); text-transform: uppercase; font-size: 12px; line-height: 1; letter-spacing: 0.4em; }
.invite-line {
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  line-height: 1.8;
}

/* the three-part date row the invitation draws */
.when-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 12px;          /* design 01's own value, not design 03's */
  letter-spacing: 0.1em;
}
.when-row--ar { font-family: var(--arabic); text-transform: none; font-size: 19px; letter-spacing: normal; }

.when-side { flex: 1; }
.when-side--left { text-align: right; }
.when-side--right { text-align: left; line-height: 1.7; }
.when-bar { width: 1.5px; height: 70px; background: var(--panel-edge); flex: none; }
.when-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.when-day { font-size: 32px; line-height: 1; color: var(--gold-ink); }
.when-day sup { font-size: 0.42em; vertical-align: super; }

/* The Arabic date column, declared AFTER the rules it overrides. The design
 * gives it its own line heights and aligns its two sides the other way. */
.when-mid--ar { line-height: 1.3; gap: 0; }
.when-day--ar { font-size: 34px; line-height: 1.1; }
.when-side--ar-start { flex: 1; text-align: left; }
.when-side--ar-end { flex: 1; text-align: right; line-height: 1.5; }

/* The Arabic names stack and venue block are tighter than the English ones. */
.invite-names--ar { gap: 4px; }
.event--ar { gap: 2px; }

/* The Arabic buttons take the Arabic face, each at its own drawn size, and
 * the wording block's line height rather than the button's. */
.ar-wording .btn,
.ar-wording .btn-quiet {
  font-family: var(--arabic);
  letter-spacing: 0;
  line-height: 1.6;
}
.ar-wording .btn { font-size: 21px; }
.ar-wording .btn-quiet { font-size: 20px; }

/* ---------------------------------------------------- the language toggle */
.toggle { display: flex; border: 1.5px solid var(--panel-edge); border-radius: 2px; overflow: hidden; }
.toggle button {
  min-width: 92px;
  height: 44px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--gold-ink);
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.16em;
}
.toggle button[aria-pressed="true"] { background: var(--gold-ink); color: var(--panel); }
.toggle button.ar { font-family: var(--arabic); text-transform: none; font-size: 18px; }

/* The small quiet link at the foot of the Invitation Page. Every value here
 * is the design's own line, moved into the theme layer. */
.admin-link {
  align-self: center;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ------------------------------------------------------- upload specifics */
.dropzone {
  position: relative;
  padding: 16px 12px;
  border: 1.5px dashed var(--field-edge);
  border-radius: 2px;
  background: var(--field);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* The browser's own file button is never shown: the input is stretched
 * invisibly across the whole zone, which is what makes the zone the picker. */
.filefield {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.chosen { font-size: 17px; font-style: italic; }

/* ------------------------------------------- the admin frame, design 09 */
.wide {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding: 28px 4% 56px;
  background: var(--ground);
  font-family: var(--serif);
  font-size: 19px;    /* the design's own value */
  line-height: 1.4;
  color: var(--ink);
}
.wide .corner--wide {
  position: absolute;
  right: -30px;
  top: -20px;
  width: 300px;
  height: 300px;
  mix-blend-mode: multiply;
  transform: scaleX(-1);
}
.wide-inner { position: relative; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
/* The design's single gap: 16px. Under justify-content: space-between the
   COLUMN gap is only a minimum -- the free space does the separating -- so it
   is relaxed to 8px to leave room for the two links the pack requires and the
   design never drew. The row gap, which is what separates the rows when the
   header wraps on a narrow window, keeps the design's own 16px. */
.wide-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 8px; row-gap: 16px; padding-right: 180px; }
/* Design 09 wraps the script line and the heading in a column flex with a
   2px gap. Without it the whole page sat 2px high. */
.wide-titles { display: flex; flex-direction: column; gap: 2px; }
/* The two other admin pages sit beside Sign Out, not in a row of their own.
   The design draws no such group; the gap is the 8px the designs use between
   adjacent controls. */
/* flex: 0 0 auto, or the group is squeezed as a header flex item and wraps
   to three rows, which align-items: flex-end then pushes the titles down.
   On a narrow window the HEADER wraps instead, which is the design's own
   flex-wrap doing the work. */
/* A wrapping flex container's max-content width in Chromium is its widest
   item, not the sum, so an auto basis collapses this to one control per row.
   It grows into the header's free space instead and keeps the controls at the
   right-hand end; on a narrow window there is no free space and the group
   wraps, which is what the design's own flex-wrap would do. */
.wide-actions { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: flex-end; column-gap: 4px; row-gap: 8px; flex: 1 1 auto; }
.wide-names { font-family: var(--script); font-size: 48px; line-height: 1.1; color: var(--gold-ink); }
.wide-title { margin: 0; font-family: var(--caps); text-transform: uppercase; font-size: 22px; font-weight: 500; letter-spacing: 0.16em; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.card { padding: 18px 20px; background: var(--panel); border: 1.5px solid var(--panel-edge); display: flex; flex-direction: column; gap: 4px; }
.card-label { font-family: var(--caps); text-transform: uppercase; font-size: 12px; letter-spacing: 0.16em; color: var(--ink); }
.card-value { font-family: var(--caps); text-transform: uppercase; font-size: 30px; color: var(--gold-ink); }
.columns { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.col-main { flex: 999 1 560px; min-width: 0; box-sizing: content-box; padding: 20px; background: var(--panel); border: 1.5px solid var(--panel-edge); display: flex; flex-direction: column; gap: 16px; }
.col-side { flex: 1 1 280px; min-width: 0; box-sizing: content-box; padding: 20px; background: var(--panel); border: 1.5px solid var(--panel-edge); display: flex; flex-direction: column; gap: 18px; }
.side-form { display: flex; flex-direction: column; gap: 18px; }
.col-side h2 { margin: 0; font-family: var(--caps); text-transform: uppercase; font-size: 16px; font-weight: 500; letter-spacing: 0.16em; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Design 09's search group: label, field and Download List in one row. */
.search-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip {
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--panel-edge);
  border-radius: 2px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);        /* the design uses the body ink, not the gold */
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.16em;
}
.chip[aria-pressed="true"] { background: var(--gold-ink); color: var(--panel); }
/* The design's search field is 44 px, not the 48 px of a guest form field. */
/* Design 09 draws the search field at 200px by 44px. */
.wide input[type="search"] { width: 200px; height: 44px; }
/* The design re-declares the primary button smaller in the bar. */
.btn--bar { min-height: 44px; font-size: 12px; }

/* The design's own answer to a six-column table on a phone: the TABLE
 * scrolls inside this box, so the PAGE never scrolls sideways. */
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 700px; border-collapse: collapse; text-align: left; }
thead tr {
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink);
  border-bottom: 1.5px solid var(--panel-edge);
}
th { padding: 10px 12px; font-weight: 500; }
tbody tr { border-bottom: 1px solid var(--row-edge); }
td { padding: 12px; }
td.nowrap { white-space: nowrap; }
td.name { font-weight: 600; }
.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  font-family: var(--caps);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.pill--yes { background: #DCE5D2; color: #2C4727; }
.pill--no  { background: #F1D8CA; color: #74300F; }

.grid-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.file-tile { padding: 12px; background: var(--panel); border: 1.5px solid var(--panel-edge); display: flex; flex-direction: column; gap: 6px; }
.file-tile img { width: 100%; height: auto; display: block; }
.film { height: 120px; display: flex; align-items: center; justify-content: center; background: var(--ground); font-family: var(--caps); text-transform: uppercase; font-size: 12px; letter-spacing: 0.16em; }
.meta { font-size: 15px; }
.temporary { margin: 0; font-family: var(--serif); font-size: 22px; letter-spacing: 0.04em; word-break: break-all; color: var(--gold-ink); }

/* No media query. The design has none: at 390 px it keeps its sizes and the
 * name line wraps. Shrinking the header was a redesign of mine and is gone. */