/* WebPet Classic 2026 — optionele homepage-thema-laag.
   Vereist <body class="webpet-classic-2026"> op de homepage.
   Laden NA main.css, fancydropdown.css en webpet-mobile-v4.css.
   Geen PHP-, database- of JavaScript-wijzigingen.
*/
body.webpet-classic-2026 {
  --wp-blue: #168ab5;
  --wp-blue-light: #e9f7fc;
  --wp-orange: #ed830f;
  --wp-ink: #173d50;
  --wp-line: #c6e4ef;
  --wp-radius: 13px;
  color: var(--wp-ink);
  line-height: 1.5;
}
body.webpet-classic-2026 a { text-underline-offset: 2px; }
body.webpet-classic-2026 a:focus-visible,
body.webpet-classic-2026 button:focus-visible,
body.webpet-classic-2026 input:focus-visible {
  outline: 3px solid #174fca;
  outline-offset: 3px;
}
/* Behoud het bestaande lucht/gras-achtergrondbeeld en de logo-positionering. */
body.webpet-classic-2026 #contentMenu ul.tabs {
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(55, 90, 105, .13);
}
body.webpet-classic-2026 #contentMenu ul.tabs > li > a {
  transition: background-color .15s ease;
}
body.webpet-classic-2026 #contentMenu ul.tabs > li > a:hover,
body.webpet-classic-2026 #contentMenu ul.tabs > li > a:focus-visible {
  background-color: rgba(255,255,255,.17) !important;
}
/* Homepagina heeft frontpage1/2/3 meermaals; attribuutselectors werken voor alle. */
body.webpet-classic-2026 #innerContent div[id="frontpage1"],
body.webpet-classic-2026 #innerContent div[id="frontpage2"],
body.webpet-classic-2026 #innerContent div[id="frontpage3"] {
  box-sizing: border-box;
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-radius);
  background: #fff;
  box-shadow: 0 4px 13px rgba(23, 77, 105, .09);
  overflow: hidden;
}
body.webpet-classic-2026 #innerContent div[id^="frontpage"] h3 {
  box-sizing: border-box;
  background: var(--wp-blue-light);
  color: var(--wp-ink);
  border-bottom: 1px solid var(--wp-line);
  padding: 9px 11px;
  font-size: 14px;
  line-height: 1.35;
}
body.webpet-classic-2026 #innerContent .contentTxtLong,
body.webpet-classic-2026 #innerContent .contentTxtLongNoColor {
  border-radius: 0 0 12px 12px;
}
body.webpet-classic-2026 #innerContent .contentTxtHeadingLong h1,
body.webpet-classic-2026 #innerContent .contentTxtHeading h1 {
  letter-spacing: .01em;
}
@media only screen and (max-width: 991px) {
  body.webpet-classic-2026 #main { padding-left: 10px; padding-right: 10px; }
  body.webpet-classic-2026 #contentMenu ul.tabs { gap: 3px 0; }
  body.webpet-classic-2026 #contentMenu ul.tabs > li > a {
    border-radius: 8px;
    min-height: 46px;
  }
  body.webpet-classic-2026 #forumColumn #innerContent {
    border-radius: 12px;
    padding: 8px 8px 18px;
  }
  body.webpet-classic-2026 #innerContent div[id="frontpage1"],
  body.webpet-classic-2026 #innerContent div[id="frontpage2"],
  body.webpet-classic-2026 #innerContent div[id="frontpage3"] {
    margin-bottom: 14px !important;
    min-height: 0;
  }
  body.webpet-classic-2026 #innerContent div[id^="frontpage"] h3 {
    font-size: 15px;
    padding: 11px 12px;
  }
  body.webpet-classic-2026 #innerContent div[id^="frontpage"] {
    overflow-wrap: break-word;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.webpet-classic-2026 #contentMenu ul.tabs > li > a { transition: none; }
}

/* v2: desktopafwerking. Alleen homepage, alleen >= 992px. */
@media screen and (min-width: 992px) {
  body.webpet-classic-2026 #innerContent div[id="frontpage1"],
  body.webpet-classic-2026 #innerContent div[id="frontpage2"],
  body.webpet-classic-2026 #innerContent div[id="frontpage3"] {
    height: auto !important;
    min-height: 200px;
    overflow: visible;
    padding-bottom: 12px;
    margin-bottom: 18px;
    background: #fff;
  }
  body.webpet-classic-2026 #innerContent div[id^="frontpage"] h3 {
    margin-top: 0;
    margin-bottom: 9px;
    border-radius: 12px 12px 0 0;
  }
  body.webpet-classic-2026 #innerContent div[id^="frontpage"] table {
    width: 100%;
    max-width: 100%;
  }
  body.webpet-classic-2026 #innerContent div[id^="frontpage"] td,
  body.webpet-classic-2026 #innerContent div[id^="frontpage"] th {
    overflow-wrap: normal;
    word-break: normal;
  }
  body.webpet-classic-2026 #innerContent div[id^="frontpage"] a {
    overflow-wrap: break-word;
  }
  /* De oorspronkelijke floatkolommen behouden hun positie en breedte. */
  body.webpet-classic-2026 #innerContent div[id^="frontpage"] {
    box-sizing: border-box;
  }
}

/* v3: verfijning van witruimte en welkomstvak, alleen op desktop.
   Bestaande floatkolommen en de mobiele v4-regels blijven ongemoeid. */
@media screen and (min-width: 992px) {
  /* De HTML heeft na de eerste rij een leeg clear:both-element.
     Maak die scheiding compact zonder de floats te verwijderen. */
  body.webpet-classic-2026 #innerContent .contentTxtLongNoColor > div[style*="clear: both"] {
    height: 8px;
    line-height: 0;
    font-size: 0;
    margin: 0;
    padding: 0;
  }

  /* Het bestaande welkomstvak visueel laten aansluiten op de kaarten. */
  body.webpet-classic-2026 #loggedINBox {
    box-sizing: border-box;
    background: #ffffff !important;
    color: #173d50;
    border: 1px solid #c6e4ef;
    border-radius: 13px;
    box-shadow: 0 4px 13px rgba(23, 77, 105, .13);
    overflow: hidden;
  }
  body.webpet-classic-2026 #loggedINBox .heading {
    background: #e9f7fc !important;
    color: #173d50 !important;
    border-bottom: 1px solid #c6e4ef;
  }
  body.webpet-classic-2026 #loggedINBox .heading a {
    color: #173d50 !important;
  }
  body.webpet-classic-2026 #loggedINBox .normal {
    color: #173d50;
  }
  body.webpet-classic-2026 #loggedINBox a {
    text-underline-offset: 2px;
  }
  /* Een kapotte Spotlight-afbeelding is een ontbrekend bestand/URL,
     geen CSS-probleem: de link en afbeelding blijven daarom behouden. */
}

/* v4 — mobiele afwerking; alleen de homepage en alleen <= 991px.
   Laden NA webpet-mobile-v4.css zodat deze gerichte regels winnen. */
@media screen and (max-width: 991px) {
  /* De bestaande mobiele stylesheet zet een vaste hoogte van 124px.
     Laat het accountvak meegroeien met zijn inhoud. */
  body.webpet-classic-2026 #header #loggedINBox {
    height: auto !important;
    min-height: 124px;
    background: #fff !important;
    color: #173d50;
    border: 1px solid #c6e4ef;
    border-radius: 13px;
    box-shadow: 0 4px 13px rgba(23,77,105,.13);
    overflow: hidden;
    padding-bottom: 8px;
  }
  body.webpet-classic-2026 #header #loggedINBox .heading {
    display: block;
    box-sizing: border-box;
    background: #e9f7fc !important;
    color: #173d50 !important;
    border-bottom: 1px solid #c6e4ef;
  }
  body.webpet-classic-2026 #header #loggedINBox .heading a,
  body.webpet-classic-2026 #header #loggedINBox .normal,
  body.webpet-classic-2026 #header #loggedINBox .normal a {
    color: #173d50 !important;
  }
  /* Minder verticale ruimte, zonder de tweekolomsindeling te veranderen. */
  body.webpet-classic-2026 #contentMenu ul.tabs > li > a {
    min-height: 40px;
    padding: 7px 9px !important;
  }
  body.webpet-classic-2026 #forumColumn #innerContent {
    padding-top: 2px;
  }
  body.webpet-classic-2026 #innerContent .contentTxtLongNoColor,
  body.webpet-classic-2026 #innerContent .contentTxtLong {
    padding-top: 6px;
  }
}

/* v5 — meer kleurcontrast, zonder wijzigingen aan de layout. */
body.webpet-classic-2026 {
  --wp-blue: #0877aa;
  --wp-blue-light: #d3edf9;
  --wp-orange: #e87400;
  --wp-ink: #12364c;
  --wp-line: #8dbfd6;
}
body.webpet-classic-2026 #innerContent div[id="frontpage1"],
body.webpet-classic-2026 #innerContent div[id="frontpage2"],
body.webpet-classic-2026 #innerContent div[id="frontpage3"] {
  border-color: var(--wp-line);
  box-shadow: 0 5px 15px rgba(13, 74, 108, .14);
}
body.webpet-classic-2026 #innerContent div[id^="frontpage"] h3 {
  background: var(--wp-blue-light) !important;
  color: #103d59 !important;
  border-bottom-color: var(--wp-line);
  font-weight: 700;
}
body.webpet-classic-2026 #innerContent div[id^="frontpage"] {
  color: var(--wp-ink);
}
body.webpet-classic-2026 #innerContent div[id^="frontpage"] a {
  color: #075c91;
}
body.webpet-classic-2026 #innerContent div[id^="frontpage"] a:hover {
  color: #003e6a;
}
/* Oranje navigatie: sterker contrast met de witte tekst. */
body.webpet-classic-2026 #contentMenu ul.tabs {
  background-color: #df7100;
}
body.webpet-classic-2026 #contentMenu ul.tabs > li > a,
body.webpet-classic-2026 #contentMenu ul.tabs > li > a span {
  color: #fff !important;
}
/* Welkomstvak zowel op desktop als mobiel. */
body.webpet-classic-2026 #header #loggedINBox {
  border-color: var(--wp-line);
  box-shadow: 0 5px 15px rgba(13, 74, 108, .17);
  color: var(--wp-ink);
}
body.webpet-classic-2026 #header #loggedINBox .heading {
  background: var(--wp-blue-light) !important;
  color: #103d59 !important;
  border-bottom-color: var(--wp-line);
}
body.webpet-classic-2026 #header #loggedINBox .heading a {
  color: #07517d !important;
}
body.webpet-classic-2026 #header #loggedINBox .normal,
body.webpet-classic-2026 #header #loggedINBox .normal a {
  color: #12364c !important;
}


/* v6 herstel: alleen de bewezen menu- en welkomstvakverbeteringen.
   GEEN algemene table/td/th-padding: smalle datumkolommen moeten passen. */
@media screen and (min-width: 768px) {
  body.webpet-classic-2026 #contentMenu {
    background: #e87500;
    border-radius: 12px 12px 0 0;
  }
  body.webpet-classic-2026 #contentMenu ul.tabs {
    background: transparent;
    width: 100%;
  }
  body.webpet-classic-2026 #contentMenu ul.tabs > li > a {
    display: block;
    padding: 7px 12px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-shadow: none;
    background: transparent;
    border-radius: 6px 6px 0 0;
  }
  body.webpet-classic-2026 #contentMenu ul.tabs > li > a span {
    color: inherit;
    text-decoration: none;
    background: transparent;
  }
  body.webpet-classic-2026 #contentMenu ul.tabs > li > a:hover,
  body.webpet-classic-2026 #contentMenu ul.tabs > li:hover > a,
  body.webpet-classic-2026 #contentMenu ul.tabs > li > a:focus-visible {
    background: #bd5e00 !important;
    color: #fff;
  }
}
body.webpet-classic-2026 #loggedINBox {
  height: auto !important;
  min-height: 0;
  overflow: visible;
}
body.webpet-classic-2026 #loggedINBox .heading {
  display: block;
  background: #d3edf9 !important;
  color: #12364c !important;
  padding: 8px 12px;
  border-radius: 10px 10px 0 0;
  text-shadow: none !important;
  font-weight: bold;
}
body.webpet-classic-2026 #loggedINBox .heading a {
  color: #075c91 !important;
  text-shadow: none !important;
  text-decoration: none;
}
body.webpet-classic-2026 #loggedINBox .heading a:hover {
  text-decoration: underline;
}
body.webpet-classic-2026 #loggedINBox .normal {
  line-height: 1.5;
}
body.webpet-classic-2026 #loggedINBox .normal a {
  color: #075c91 !important;
}

/* WebPet Classic 2026 - mobiel forum */
@media screen and (max-width: 767px) {

  /* Forumtitel */
  body.webpet-forum-topic #innerContent
  .contentTxtHeadingLong h1 {
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    text-shadow: none;
  }

  /* De tabellen die forumberichten bevatten */
  body.webpet-forum-topic #innerContent
  table:has(tr.forumRowHeader) {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
    border-spacing: 0;
    margin: 0 0 14px;
    border: 1px solid #8dbfd6;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }

  /* Gebruiker en plaatsingsdatum onder elkaar */
  body.webpet-forum-topic
  tr.forumRowHeader > td {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    padding: 7px 10px !important;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    background: #d3edf9;
    color: #12364c;
  }

  body.webpet-forum-topic
  tr.forumRowHeader > td + td {
    padding-top: 2px !important;
    font-size: 12px;
  }

  /* Bewerken en verwijderen */
  body.webpet-forum-topic
  tr.forumRowHeader td > div[style*="float: right"] {
    float: none !important;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 4px;
  }

  /* Buitenste berichtcel */
  body.webpet-forum-topic
  td.messageText {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    padding: 0 !important;
    overflow: hidden;
  }

  /* Oude vaste profielkolom van 130px */
  body.webpet-forum-topic
  td.messageText > div[style*="130px"] {
    float: none !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    padding: 10px 12px;
    background: #f1f9fd;
    border-bottom: 1px solid #c6e3f1;
  }

  /* Profielfoto en berichtacties compact */
  body.webpet-forum-topic
  td.messageText > div[style*="130px"] center {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    text-align: left;
  }

  body.webpet-forum-topic
  td.messageText > div[style*="130px"] center br {
    display: none;
  }

  body.webpet-forum-topic
  td.messageText > div[style*="130px"] center img[width="60"] {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover;
    border-radius: 6px;
  }

  /* Oude vaste berichtbreedte van 720px */
  body.webpet-forum-topic
  td.messageText > div[style*="720px"] {
    float: none !important;
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  /* Handtekening onder een bericht */
  body.webpet-forum-topic
  td.messageText > div[style*="clear: both"] {
    box-sizing: border-box;
    clear: both;
    width: 100%;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-top: 1px solid #c6e3f1 !important;
    overflow-wrap: anywhere;
  }

  /* Formuliervelden mogen niet buiten beeld vallen */
  body.webpet-forum-topic
  #innerContent textarea,
  body.webpet-forum-topic
  #innerContent select {
    max-width: 100%;
    box-sizing: border-box;
  }
}