/*
 * La Ruota 2026 design: the text pages in include/pages/ (catering, franchising, the kids pizza
 * party, contactless delivery, privacy, about Neapolitan pizza, contact, reward points, FAQ). Loaded by
 * header_common.php after the pages' older sheets; <body> carries lr-pages and lr-p-<page>.
 *
 * The pages keep their own words, pictures, links and forms, as on the live site, and take the
 * handoff's look: the warm light ground, the text on a white card, the brand's type, its fields
 * (warm, rounded, gold on focus) and its dark pill buttons (pages.css, 07-sign-up-in.html).
 */

/* ---------------------------------------------------------------- page */

body.lr-pages {
  background: var(--lr-ground);
}

body.lr-pages main.s_width {
  box-sizing: border-box;
  width: auto;
  max-width: 1164px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}

/* the older sheets pushed the text below a fixed header (85px, 140px on franchising) and set it
   light on black */
body.lr-pages .pages,
body.lr-pages .pages.fr {
  max-width: none;
  margin: 0;
  padding: 56px 64px 64px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 70px -40px rgba(60, 40, 15, .35);
  color: var(--lr-body);
  font-size: 16px;
  line-height: 1.7;
}

body.lr-pages .pages h2 {
  margin: 0 0 24px;
  color: var(--lr-ink);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
}

body.lr-pages .pages h3 {
  margin: 36px 0 10px;
  color: var(--lr-ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
}

body.lr-pages .pages p {
  margin: 0 0 14px;
  color: var(--lr-body);
  line-height: 1.75;
}

body.lr-pages .pages strong,
body.lr-pages .pages b {
  color: var(--lr-ink);
  font-weight: 600;
}

body.lr-pages .pages a {
  padding-bottom: 1px;
  border-bottom: 1.5px solid var(--lr-gold);
  color: var(--lr-ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s;
}

body.lr-pages .pages a:hover {
  border-color: var(--lr-ink);
}

body.lr-pages .pages img {
  border-radius: 16px;
}

/* ---------------------------------------------------------------- shared form parts */

/* the handoff's fields and its dark pill; each page below names the fields it has */
body.lr-p-contact .farea select,
body.lr-p-contact .farea input,
body.lr-p-contact .farea textarea,
body.lr-p-franchising .pages.fr .f-form .i,
body.lr-p-franchising .pages.fr .ff-q .ff-q-a .area .text {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #F6F3EF;
  color: var(--lr-ink);
  font-family: var(--lr-font);
  font-size: 15px;
  line-height: 1.4;
  outline: 0;
  transition: border-color .2s, background .2s;
}

body.lr-p-contact .farea select:focus,
body.lr-p-contact .farea input:focus,
body.lr-p-contact .farea textarea:focus,
body.lr-p-franchising .pages.fr .f-form .i:focus,
body.lr-p-franchising .pages.fr .ff-q .ff-q-a .area .text:focus {
  border-color: var(--lr-gold);
  background: #fff;
}

body.lr-p-contact .farea ::placeholder,
body.lr-p-franchising .pages.fr .f-form ::placeholder {
  color: #9A948D;
}

body.lr-p-contact .farea button,
body.lr-p-franchising .pages.fr .f-form .btn,
body.lr-p-franchising .pages.fr .ff-q .ff-q-a .area .btn button {
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--lr-ink);
  color: #fff;
  font-family: var(--lr-font);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}

body.lr-p-contact .farea button:hover,
body.lr-p-franchising .pages.fr .f-form .btn:hover,
body.lr-p-franchising .pages.fr .ff-q .ff-q-a .area .btn button:hover {
  background: var(--lr-gold);
  color: var(--lr-ink);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------- catering */

body.lr-p-catering .pages img.catering-d {
  width: 200px;
  margin: 6px 0 20px 32px;
  border-radius: 18px;
}

/* ---------------------------------------------------------------- about Neapolitan pizza */

body.lr-p-neapolitan .pages img.tekli {
  width: 80%;
  border-radius: 20px;
}

body.lr-p-neapolitan .pages img.ikili {
  width: 150px;
  margin: 6px 24px 12px 0;
  border-radius: 14px;
}

/* ---------------------------------------------------------------- contactless delivery */

/* line breaks spaced the text below the old fixed header */
body.lr-p-contactless .pages > br {
  display: none;
}

body.lr-p-contactless .pages .contactless-delivery-images {
  max-width: 100%;
  border-radius: 20px;
}

/* ---------------------------------------------------------------- contact */

/* the form and the addresses side by side, as in the handoff's "Get in Touch" */
body.lr-p-contact .pages .left {
  display: block;
  width: auto;
  float: none;
}

body.lr-p-contact .pages .right {
  display: none;
}

body.lr-p-contact .pages .farea {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

body.lr-p-contact .farea .ara5,
body.lr-p-contact .farea .ara10 {
  display: none;
}

body.lr-p-contact .farea textarea {
  min-height: 140px;
  resize: vertical;
}

body.lr-p-contact .farea .tac {
  text-align: left;
}

body.lr-p-contact .farea .ferror {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(173, 29, 29, .08);
  color: var(--lr-red);
  font-size: 14px;
}

body.lr-p-contact .farea > .tac:last-child p:not(.sm-icon) {
  margin: 0 0 12px;
  padding: 18px 20px;
  border: 1px solid var(--lr-rule-soft);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px -26px rgba(60, 40, 15, .4);
  line-height: 1.6;
}

body.lr-p-contact .pages .sm-icon {
  margin-top: 18px;
}

body.lr-p-contact .pages .sm-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lr-ink);
  color: #fff;
  transition: background .2s;
}

body.lr-p-contact .pages .sm-icon a:hover {
  background: var(--lr-gold);
}

/* ---------------------------------------------------------------- franchising */

body.lr-p-franchising .pages.fr > br {
  display: none;
}

body.lr-p-franchising .pages.fr > h3:first-of-type {
  max-width: 24ch;
  margin: 0 auto 26px;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -.01em;
  line-height: 1.15;
}

body.lr-p-franchising .pages.fr p {
  max-width: 760px;
  margin: 0 auto 16px;
}

/* the request form: the three fields side by side on a warm panel, the pill under them */
body.lr-p-franchising .pages.fr .f-form {
  max-width: 820px;
  margin: 36px auto;
  padding: 26px 24px 28px;
  border-radius: 20px;
  background: #F6F3EF;
}

/* a grid rather than inline blocks: the spaces between the fields in the template would push the
   third one onto a new line */
body.lr-p-franchising .pages.fr .f-form > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.lr-p-franchising .pages.fr .f-form > div:last-child > :not(input) {
  grid-column: 1 / -1;
}

body.lr-p-franchising .pages.fr .f-form .i {
  width: 100%;
  margin: 0;
  background: #fff;
}

body.lr-p-franchising .pages.fr .f-form .btn {
  margin-top: 6px;
}

body.lr-p-franchising .pages.fr .f-form .error {
  margin-bottom: 12px;
  color: var(--lr-red);
  font-style: normal;
}

/* the logo is a white picture: it keeps a dark ground */
body.lr-p-franchising .pages.fr .f-logo {
  display: inline-block;
  margin: 20px auto 8px;
  padding: 22px 32px;
  border-radius: 18px;
  background: var(--lr-ink);
}

body.lr-p-franchising .pages.fr .f-logo img {
  display: block;
  width: 180px;
  margin: 0;
  border-radius: 0;
}

body.lr-p-franchising .pages.fr .picture img {
  width: 100%;
  max-width: 900px;
  margin: 28px auto;
  border-radius: 20px;
}

/* steps: a gold number beside each */
body.lr-p-franchising .pages.fr .step span:nth-child(1) {
  color: var(--lr-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
}

body.lr-p-franchising .pages.fr .step span:nth-child(2) {
  width: 46px;
  margin: 0 12px;
  background: var(--lr-gold);
  color: var(--lr-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 46px;
}

body.lr-p-franchising .pages.fr .dt {
  max-width: 760px;
  margin: 24px auto;
}

body.lr-p-franchising .pages.fr .dt p {
  margin: 12px 0;
}

/* the qualifying questions open over everything, the site header included */
body.lr-p-franchising .pages.fr .ff-q {
  z-index: 60;
  background: rgba(4, 4, 4, .6);
}

body.lr-p-franchising .pages.fr .ff-q .ff-q-a .area {
  padding: 30px 32px;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  font-family: var(--lr-font);
}

body.lr-p-franchising .pages.fr .ff-q .ff-q-a .area .fq-h {
  color: var(--lr-ink);
  font-family: var(--lr-font);
  font-size: 26px;
  letter-spacing: -.01em;
}

body.lr-p-franchising .pages.fr .ff-q .ff-q-a .area .logo div:nth-child(2) {
  border-radius: 12px;
}

body.lr-p-franchising .pages.fr .ff-q .ff-q-a .area .error {
  color: var(--lr-red);
  font-style: normal;
}

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 900px) {
  body.lr-p-contact .pages .farea {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 760px) {
  body.lr-pages main.s_width {
    padding: 16px 12px 64px;
  }

  body.lr-pages .pages,
  body.lr-pages .pages.fr {
    padding: 30px 22px 36px;
    border-radius: 20px;
  }

  body.lr-pages .pages h3 {
    margin-top: 28px;
    font-size: 19px;
  }

  body.lr-p-catering .pages img.catering-d {
    width: 120px;
    margin-left: 18px;
  }

  body.lr-p-neapolitan .pages img.tekli {
    width: 100%;
  }

  body.lr-p-neapolitan .pages img.ikili {
    width: 110px;
    margin-right: 16px;
  }

  body.lr-p-franchising .pages.fr .f-form {
    padding: 20px 16px 22px;
  }

  body.lr-p-franchising .pages.fr .f-form > div:last-child {
    grid-template-columns: minmax(0, 1fr);
  }

  body.lr-p-franchising .pages.fr .ff-q .ff-q-a .area {
    padding: 24px 20px;
  }
}