/* proto-pages-theme.css: edelbrock.ca's landing pages (templates/search/) under the copied Porto theme, loaded after
   proto-pages.css by every page. The client's stylesheets (templates/theme/head.html) sit in no layer, so they beat
   any layered rule: they grey the body text, give a heading or a paragraph a bottom margin and draw every
   button white with a grey label. The first block puts proto-pages.css's look back inside the pages' own regions
   (.pp-wrap, .pp-hero) with !important, the one way a layered rule wins over an unlayered one; the header, the band
   and the footer keep the theme's. The second is Edelbrock's type: Orbitron capitals for the H1 and the section
   headings, as the live home's section titles, Poppins for a card's name. */
@layer base, kit, site;

@layer site {

:is(.pp-wrap, .pp-hero) { color: var(--site-fg) !important; font-family: var(--site-font-body); }
:is(.pp-wrap, .pp-hero) :is(h1, h2, h3, p, table, ul, ol, form, nav, figure, details) { margin-bottom: 0 !important; }
:is(.pp-wrap, .pp-hero) :is(p, td, th, li, span, label, caption, summary, h1, h2, h3) { color: inherit !important; }
:is(.pp-wrap, .pp-hero) .pp-btn {
  min-height: 40px !important; padding: 0 18px !important; border: 0 !important; border-radius: var(--site-radius) !important;
  background: var(--site-button-bg) !important; color: var(--site-button-fg) !important; line-height: 1 !important; box-shadow: none !important;
}
:is(.pp-wrap, .pp-hero) .pp-btn:hover { background: var(--site-button-hover-bg) !important; color: var(--site-button-hover-fg) !important; }
:is(.pp-wrap, .pp-hero) .pp-btn--accent { background: var(--site-accent) !important; color: var(--site-accent-fg) !important; }
:is(.pp-wrap, .pp-hero) .pp-btn--accent:hover { background: var(--site-fg) !important; color: var(--site-bg) !important; }
:is(.pp-wrap, .pp-hero) .pp-btn--ghost { background: transparent !important; color: var(--site-fg) !important; box-shadow: inset 0 0 0 2px var(--site-fg) !important; }
:is(.pp-wrap, .pp-hero) .pp-btn--ghost:hover { background: var(--site-fg) !important; color: var(--site-bg) !important; }
:is(.pp-wrap, .pp-hero) .pp-pick__select { height: 40px; }
/* a long "All ..." link wraps on a phone: the box grows with it, centred */
:is(.pp-wrap, .pp-hero) .pp-more .pp-btn { max-width: 100%; padding: 8px 12px !important; line-height: 1.2 !important; text-align: center; }
:is(.pp-wrap, .pp-hero) :is(ul, ol) { padding-left: 0 !important; list-style: none !important; }
:is(.pp-wrap, .pp-hero) li { list-style: none !important; }
/* the theme's .page-wrapper is a flex column, so a main with auto margins shrinks to its content */
main.pp-wrap { align-self: stretch; width: 100%; box-sizing: border-box; }

/* Edelbrock's type */
.pp-h1, .pp-h2 { font-family: Orbitron, var(--site-font-heading); font-weight: 700; letter-spacing: 0; }
.pp-h1 { font-size: 40px; line-height: 1.15; }
.pp-h2 { font-size: 26px; line-height: 1.2; }
.pp-h3 { font-family: var(--site-font-heading); }
.pp-card__name { font: 600 16px/1.3 var(--site-font-heading); text-transform: none; }
.pp-card__name a { display: block; min-height: 40px; }
.pp-which th { font-family: var(--site-font-heading); }
.pp-tile { grid-template-columns: minmax(0, 1fr); }
.pp-tile__name { font-family: var(--site-font-heading); font-size: 17px; padding-right: 14px; }
.pp-wrap .pp-links { display: flex !important; flex-wrap: wrap; gap: 8px 24px !important; }
.pp-links a { font-family: var(--site-font-heading); }
.pp-note a { color: var(--site-fg); text-decoration: underline; }
.pp-note a { display: inline-flex; align-items: center; min-height: 40px; }

/* the Applied Vehicle's block at the top of a page (_edel.html yours) */
.pp-yours { padding: 16px; border: 2px solid var(--site-fg); border-radius: var(--site-radius); }
.pp-yours .pp-shead { margin-top: 0; }
.pp-nofit__say { font-size: 17px; }
.pp-nofit__go { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }

/* a phone: the H1 a little bigger (Orbitron runs wide, so 32px), every other text smaller (MOBILE-BRIEF rule 4) */
@media (max-width: 979.98px) {
  .pp-h1 { font-size: 32px; line-height: 1.1; }
  .pp-h2 { font-size: 18px; }
  .pp-card__name { font-size: 14px; }
  .pp-tile__name { padding: 0 10px; font-size: 14px; }
  .pp-nofit__say { font-size: 15px; }
  /* the which-one table: the name on a line, who it is for under it, so a long line never runs wide */
  .pp-which tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 6px 0; border-bottom: 1px solid var(--site-line); }
  .pp-which :is(th, td) { padding: 0 6px; border-bottom: 0; }
  .pp-which td:empty { display: none; }
}

}