/* FCCUK phone layout: screens narrower than 980px (phones, small tablets).
   Completely separate from the desktop layout: index.php and popup.php load z_straydesign.css only on screens of 980px
   and wider, and this file only below that, so the two never apply together. The menu bar (.ph-head) and the
   "where am I" strip (.ph-crumb) are written by index.php from the Coma navigation, with the hidden attribute:
   only this file shows them. The menu opens and closes without script (<details>). */

:root {
  --ph-red: #6e0a08;
  --ph-link: #920000;
  --ph-text: #404040;
  --ph-grey: #6f7073;
  --ph-grey-dark: #57585b;
  --ph-panel: #e4e4e2;
  --ph-marker: #ffe14d;
}

* { box-sizing: border-box; }

html {
  background-color: var(--ph-red);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--ph-red);
  color: var(--ph-text);
  font: 16px/1.5 Arial, Helvetica, sans-serif;
}

a, a:active, a:visited { color: var(--ph-link); }
a:hover { color: #cc0000; }

h1 {
  margin: 0 0 12px 0;
  font: italic bold 22px/1.25 Georgia, Times, serif;
  color: #333333;
}

h2, h3 {
  margin: 0 0 10px 0;
  font: italic bold 19px/1.3 Georgia, Times, serif;
  color: #8a8a8a;
}

/* text-size classes from the Coma editor, a little larger than on desktop */
.font1 { font-size: 12px; }
.font2 { font-size: 13px; }
.font3 { font-size: 15px; }
.font4 { font-size: 16px; }
.font5 { font-size: 18px; }
.font6 { font-size: 20px; }
.font7 { font-size: 22px; }
.mini { font-size: 14px; }

/* forum island: the same parts hidden as on desktop */
.small, .date, .tdheader { display: none; }


/* ---------- menu bar (index.php; hidden until this stylesheet shows it) ---------- */

.ph-head {
  display: block;
  position: sticky;
  top: 0;
  z-index: 900;
  background: #ffffff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.ph-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 12px 0 16px;
}

.ph-logo { display: block; line-height: 0; }
.ph-logo img { width: auto; height: 40px; }

.ph-menubtn {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: var(--ph-link);
  color: #ffffff;
  font: bold 15px Arial, Helvetica, sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ph-menubtn::-webkit-details-marker, .ph-menu summary::-webkit-details-marker { display: none; }
.ph-menubtn:focus-visible { outline: 3px solid var(--ph-marker); outline-offset: 2px; }

/* three-line menu icon, turns into a cross while the menu is open */
.ph-burger, .ph-burger::before, .ph-burger::after {
  display: block;
  width: 18px;
  height: 2px;
  background: #ffffff;
  border-radius: 1px;
  transition: transform 0.2s, background-color 0.2s;
}
.ph-burger { position: relative; }
.ph-burger::before, .ph-burger::after { content: ""; position: absolute; left: 0; }
.ph-burger::before { top: -6px; }
.ph-burger::after { top: 6px; }
.ph-menuwrap[open] .ph-burger { background: transparent; }
.ph-menuwrap[open] .ph-burger::before { transform: translateY(6px) rotate(45deg); }
.ph-menuwrap[open] .ph-burger::after { transform: translateY(-6px) rotate(-45deg); }

/* the menu: drops down under the bar while the Menu button (<details>) is open */
.ph-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--ph-grey);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.ph-menu ul { list-style: none; margin: 0; padding: 0; }

.ph-menu a, .ph-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  background: transparent;
  color: #ffffff;
  font: bold 15px Arial, Helvetica, sans-serif;
  letter-spacing: 0.4px;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
}
.ph-menu a:focus-visible, .ph-menu summary:focus-visible { outline: 3px solid var(--ph-marker); outline-offset: -3px; }

/* arrow on a section with sub pages */
.ph-menu summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 12px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s;
}
.ph-menu details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.ph-menu ul ul { background: var(--ph-grey-dark); }
.ph-menu ul ul a {
  min-height: 46px;
  padding-left: 32px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}

/* current section and page: yellow, as on desktop */
.ph-menu .ph-current, .ph-menu .ph-current-section { color: var(--ph-marker); }
.ph-menu ul ul .ph-current { box-shadow: inset 4px 0 0 var(--ph-marker); }

/* "where am I" strip under the bar */
.ph-crumb {
  display: block;
  padding: 7px 16px;
  background: #959699;
  color: #ffffff;
  font: bold 12px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ph-crumb span { color: var(--ph-marker); }


/* ---------- the page itself ---------- */

.fullwidth {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--ph-panel);
}

/* the desktop menu and its drop-downs: the phone has its own menu bar */
.navi, .anylinkcss { display: none; }

/* content pages */
.maincontent { background: #ffffff; }

.words { background: #ffffff; }
.words > img:first-child {
  display: block;
  width: 100%;
  height: auto;
}
.words > br { display: none; }   /* the empty line under the header picture */

.wordspadder {
  padding: 22px 16px 26px 16px;
  font: 17px/1.55 Georgia, Times, serif;
  overflow-wrap: break-word;
}

/* the desktop's three columns (text, dotted line, right-hand extras) become one: extras below the text */
.wordspadder > table,
.wordspadder > table > tbody,
.wordspadder > table > tbody > tr,
.wordspadder > table > tbody > tr > td {
  display: block;
  width: auto;
}
.wordspadder > table > tbody > tr > td {
  font: 17px/1.55 Georgia, Times, serif;
}
.wordspadder .dotter { display: none; }

.wordspadder .news {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 2px dashed #d0d0d0;
  font-size: 16px;
}
.wordspadder .news:not(:has(*)) { display: none; }  /* no extras on this page */

/* pictures, videos and tables in the texts fit the screen */
.words img { max-width: 100%; height: auto; }
.words img[align="left"], .words img[align="right"] { max-width: 45%; }
.words video { max-width: 100%; height: auto; }
.words iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

.wordspadder td table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wordspadder td table td {
  font: 14px/1.35 Georgia, Times, serif;
}
/* tables without cell spacing (e.g. CONTACT: name - role): some space between the columns */
.wordspadder td table[cellpadding="0"] td:not(:last-child) { padding-right: 14px; }

/* "Related pictures": thumbnails side by side */
.wordspadder .news center { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wordspadder .news center > br { display: none; }
.wordspadder .news center .relpic img { display: block; max-width: 100%; }

input, select, textarea, button { font-size: 16px; }   /* 16px keeps phones from zooming in on a form field */
.words input[type="text"], .words input[type="email"], .words textarea, .words select { max-width: 100%; }


/* ---------- right-hand extras (desktop: right column; phone: below the content) ---------- */

.rightcontent, .righthome {
  padding: 30px 16px 34px 16px;
  background: var(--ph-panel);
}
.rightcontent .introtext { display: none; }   /* the logo: already in the menu bar */
.rightcontent > br, .righthome > br { display: none; }

.forumbox {
  position: relative;
  margin-top: 14px;
  padding: 26px 0 10px 0;
  border: 1px solid #818180;
  background: #d7d8d5;
}
/* the title picture has the box's top-left frame in it (line at row 12, side lines at x 0 and 189): laid exactly over
   the box's border, its right-hand line cut off, so the frame runs on across the full width (cut at 187px, not 189:
   on sharp phone screens the scaled picture otherwise shows a sliver of that line) */
.forumboxtitle {
  position: absolute;
  top: -13px;
  left: -1px;
  width: 187px;
  overflow: hidden;
  line-height: 0;
}
.forumbox > br { display: none; }
.forumcontent {
  padding: 0 14px;
  font-size: 15px;
  overflow-wrap: break-word;
}
.forumcontent table { width: 100%; }
.forumcontent td { font: 15px/1.4 Arial, Helvetica, sans-serif; }
/* latest forum topics: one row per topic, big enough to tap */
.forumcontent td.alt-1 { padding: 0; border-bottom: 1px solid #c2c3c0; }
.forumcontent td.alt-1 div { padding: 10px 0 !important; line-height: 1.35 !important; }
.forumcontent td.alt-1 a { font-size: 16px; text-decoration: none; }
.forumcontent .mini a { display: inline-block; padding: 8px 0 4px 0; }


/* ---------- home page: picture, introduction, the four buttons, then the forum ---------- */

.mainhome, .righthome { display: contents; }

/* the car picture: the left part of the desktop background, as wide as the screen */
.mainhome::before {
  content: "";
  order: 1;
  display: block;
  width: 100%;
  aspect-ratio: 755 / 532;
  background: #e8e8e8 url('layout/fiat_coupe_club_background_home.jpg') 0 0 / 130.33% auto no-repeat;
}

.righthome .introtext {
  order: 2;
  padding: 22px 16px 6px 16px;
  background: var(--ph-panel);
  font: 16px/1.55 Arial, Helvetica, sans-serif;
}
.righthome .introtext img, .righthome .introtext br { display: none; }

.redbottom {
  order: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 20px 16px 22px 16px;
  background: linear-gradient(var(--ph-panel) 0, var(--ph-panel) 44px, var(--ph-red) 44px);
}
.redbottom > div { display: flex; }
/* the boxes: drawn by the browser (sharp on any screen), heading drawing scaled up, text flows */
.homebox, .homebox:visited {
  display: block;
  flex: 1;
  border: 1px solid #a0a8a0;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  background: #d9d9d9 linear-gradient(#f8f8f8, #e7e7e7) no-repeat 0 0 / 100% 46px;
  box-shadow: inset 0 0 14px 1px rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.homebox img { display: block; width: auto; height: 27px; max-width: calc(100% - 20px); margin: 10px 10px 0 10px; object-fit: contain; object-position: left center; }
.homebox span { display: block; padding: 11px 12px 12px 12px; font: 13px/1.35 Arial, Helvetica, sans-serif; color: #595959; }
.homebox br { display: none; }

.righthome .forumbox {
  order: 4;
  margin: 34px 16px 30px 16px;
}


/* ---------- news item pop-up (facebox) and popup.php ---------- */

/* facebox places the box with inline top/left for a wide screen: on a phone it opens at the top of the screen,
   above the menu bar, and scrolls inside when the news item is long */
#facebox {
  position: fixed !important;
  top: 12px !important;
  left: 8px !important;
  right: 8px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1001 !important;
  margin-top: 0;
}
#facebox_overlay { z-index: 1000 !important; }
#facebox .popup { border-width: 0; }
#facebox .content {
  display: block;
  width: auto;
  padding: 44px 16px 18px 16px;
  font-size: 16px;
}
#facebox .content td { font-size: 16px; }
#facebox .close { top: 10px; right: 12px; }
#facebox .content .maindiv { width: auto !important; padding: 0 !important; }
#facebox img { max-width: 100%; height: auto; }

.maindiv { width: auto !important; padding: 16px !important; }
.pagetextalone { font: 17px/1.55 Georgia, Times, serif; }
.pagetextalone img { max-width: 100%; height: auto; }