/**
 * @file base.css
 * Typografia, odkazy, zoznamy, tabuľky, formuláre, tlačidlá.
 * Zodpovedá riadkom 1–80 a sekcii *Button* z D7 global.css.
 */

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--dm-font);
  font-weight: var(--dm-font-weight);
  font-size: var(--dm-font-size);
  line-height: var(--dm-line-height);
  color: var(--dm-text);
  background-color: var(--dm-body-bg);
}

/* V D7 dostávali `p, div` rodinu z fontyourface — preto aj tu obe. */
p, div {
  font-family: var(--dm-font);
  font-weight: var(--dm-font-weight);
  font-size: var(--dm-font-size);
  line-height: var(--dm-line-height);
  color: var(--dm-text);
}

/* --- Nadpisy ---------------------------------------------------------- */

/* Nadpisy idú vo firemnom ColourSansBold (viď fonts.css). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--dm-font-heading);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--dm-heading-tracking);
  color: var(--dm-navy-ink);
}

h1, .h1 { font-size: var(--dm-h1); margin-bottom: 10px; }
h2, .h2 { font-size: var(--dm-h2); }
h3, .h3 { font-size: var(--dm-h3); }
h4, .h4 { font-size: var(--dm-h4); }
h5, .h5 { font-size: var(--dm-h5); }
h6, .h6 { font-size: var(--dm-h6); }

h2.block-title { font-size: var(--dm-block-title); margin: 0; }

/* Ďalšie miesta, kde D7 používa ColourSansBold (fontyourface/font.css). */
.tb-megamenu .nav > li > a,
.dm-tabs__list a,
.dm-navbar-toggler {
  font-family: var(--dm-font-heading);
}

h2 a:link,
h2 a:visited { color: var(--dm-text-strong); }

/* --- Odkazy ----------------------------------------------------------- */

/* D7 global.css: a:link, a:visited { color: #05b496; text-decoration: none; }
   Všeobecný základ pre VŠETKY odkazy. Hlavné menu (.dm-mainmenu .nav-link)
   aj ostatné už existujúce špecifické pravidlá (nižšie, na farebných
   pásoch, v pätě/branding bloku a pod.) majú vyššiu špecificitu (trieda
   navyše, prípadne !important), takže toto pravidlo ich neprebije — platí
   len tam, kde nič konkrétnejšie nie je. */
a:link,
a:visited {
  color: var(--dm-teal);
  text-decoration: none;
}

/* D7 global.css: a:hover { text-decoration: underline; color: #F57921; }.
   Rovnaký princíp ako vyššie pri a:link/a:visited — hlavné menu a ostatné
   scopnuté hover pravidlá musia mať vlastné !important, inak ich toto
   prebije (hover má v prehliadači prioritu nad :link/:visited, preto
   !important tu, nielen vyššie). */
a:hover,
a:focus {
  color: var(--dm-orange) !important;
  text-decoration: underline;
}

p a:link,
p a:visited,
.dm-karta__riadok a,
td a,
.breadcrumb-item a,
.nav-tabs .nav-link {
  color: var(--dm-teal) !important;
  text-decoration: none;
}

/* Bez tohto by vyššia špecificita (p a:link/.breadcrumb-item a/td a majú
   navyše element/triedu oproti a:hover) + ich !important na farbe držala
   tmavú teal aj pri hoveri — presne prípad odkazu vloženého do <p> textu
   (napr. "Viac info http://..."), ktorý mal v D7 pri hoveri normálne
   zožltnúť/zoranžovieť ako hocijaký iný odkaz. .nav-tabs .nav-link zámerne
   vynechané — to je záložkový komponent, nie bežný textový odkaz. */
p a:hover,
p a:focus,
.dm-karta__riadok a:hover,
.dm-karta__riadok a:focus,
td a:hover,
td a:focus,
.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
  color: var(--dm-orange) !important;
  text-decoration: underline !important;
}


#block-duluxmaliar-footer-pravne a,
#block-duluxmaliar-branding-action a,
#block-duluxmaliar-pridaj-blok a,
.dm-kosik a:hover {
  color: #fff !important;
}

/* Odkazy na farebných pásoch (dlaždice katalógu, titulka). */
.dm-tile__title a:link,
.dm-tile__title a:visited,
.dm-hero__caption a:link,
.dm-hero__caption a:visited {
  color: var(--dm-text-invert);
  text-decoration: none;
}

.dm-tile__title a:hover,
.dm-tile__title a:focus,
.dm-hero__caption a:hover,
.dm-hero__caption a:focus,
.dm-hero__caption h2:hover {
  color: var(--dm-yellow) !important;
}

/* --- Autocomplete (views_autocomplete_filters / jQuery UI) -------------
   Návrhy vo vyskakovacej ponuke (napr. filter „Vyhľadaj podľa názvu“ v
   záložke Kde kúpiť na detaile produktu) sú <a> BEZ href — Bootstrap
   Reboot ich napriek tomu podčiarkuje, lebo cieli na holé `a`, nie na
   `a:link` (to by anchor bez href nezasiahlo). D7 mal návrhy bez
   podčiarknutia. Netýka sa len kde_kupit — rovnaký jQuery UI widget
   používajú aj ostatné views_autocomplete_filters exposed filtre. */
.ui-autocomplete .ui-menu-item-wrapper {
  color: var(--dm-text);
  text-decoration: none;
}

/* --- Vertikálny rytmus (omega-text.css) -------------------------------- */

p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul,
pre, table, address, fieldset {
  margin-bottom: var(--dm-rhythm);
}

hr {
  margin: 0;
  padding: 0;
  border: none;
  height: 1px;
  background: var(--dm-rule);
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

.field--type-image img,
.field--name-field-user-picture img {
  margin: 0 0 0 !important;
}

label { font-weight: 700; }

.description,
.tips {
  font-size: 10px;
  color: #6a6a6a;
}

/* --- Zoznamy ---------------------------------------------------------- */

ul { list-style: disc; -webkit-margin-before: 0; -webkit-margin-after: 0; }
ol { list-style: decimal; }
ul ul, ol ol { padding-top: 0.5em; }

.node ol, .node ul { padding-left: 1.2em; }
.node ul.inline, .node ol.inline { padding-left: 0; }

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

.item-list li { list-style: none; }

.inline li,
.tabs li,
.dm-breadcrumb li {
  list-style: none;
  display: inline;
  margin-right: 0.5em;
}

/*
**Produkty**
*/

/* Zobrazenie elementov v jednom riadku s medzerami */
.field--name-field-balenie .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* Medzera medzi prvkami (voliteľné) */
}

/* Pridanie čiarky za každú položku okrem poslednej */
.field--name-field-balenie .field__item:not(:last-child)::after {
  content: ",";
}

/* Modrá štvorcová odrážka ■ z D7 (telo textu, výpisy partnerov).
   field--name-body.field--type-text-with-summary.field--label-hidden je
   natívna D11 BEM trieda (dvojitá pomlčka), ktorú Drupal generuje sám pre
   presne to isté pole, čo D7 cielilo ako .field.field-name-body.field-type-
   text-with-summary.field-label-hidden — žiadny zásah do twigu netreba. */
.field--name-body.field--type-text-with-summary.field--label-hidden ul,
.dm-prose ul,
.dm-bullets {
  list-style: none;
  padding: 0;
  margin-left: 30px;
}

.field--name-body.field--type-text-with-summary.field--label-hidden li::before,
.dm-prose ul > li::before,
.dm-bullets > li::before {
  content: "\25A0";
  color: var(--dm-blue);
  position: relative;
  top: -1px;
  float: left;
  padding-right: 10px;
}

/* --- Tabuľky ---------------------------------------------------------- */

table {
  border: 1px solid #ccc;
  width: 100%;
}

thead th, th {
  background: #f7f7f7;
  border-bottom: 1px solid #ccc;
  color: #333;
}

td, th {
  padding: 4px 8px;
  vertical-align: middle;
}

th a { display: block; text-decoration: none; }

/* Barrio dáva `table tr th { color: #fff }` (počíta s tmavým pozadím hlavičky)
   a Bootstrap `.table > :not(caption) > * > *` prebije naše pozadie
   priehľadným `--bs-table-bg`. Výsledok bol biely text na bielom — hlavička
   tabuľky vyzerala prázdna. Preto vyššia špecificita. */
.table > thead > tr > th,
table thead th,
table tr th {
  background-color: #f7f7f7;
  color: #333;
}

/* D7 global.css zrušil všetky pozadia riadkov vrátane zebry a hoveru. */
table tr,
table tr.odd,
table tr.even,
table tr:hover td {
  background: transparent;
}

/* --- Obrázok v node --------------------------------------------------- */

/* Barrio dáva `.node .field--type-image { float: left }`. Každý prvok, ktorý
   tvorí vlastný BFC (`overflow` != visible) — napr. `.table-responsive` okolo
   webform tabuľky — sa plávajúcemu obrázku vyhne a odletí mimo obsahovú šírku.
   Tak zmizla tabuľka kalkulačky na /vypocet-plochy-stien-stropov. */
/* Špecificita musí prebiť Barrio — jeho `.node .field--type-image` má rovnakú
   váhu (0,2,0) a načíta sa neskôr (skupina `component` vs. naša `base`). */
.node .field.field--type-image {
  float: none;
  margin: 0 0 var(--dm-rhythm) 0;
}

/* --- Tlačidlá --------------------------------------------------------- */

.dm-btn,
.button,
.form-submit,
input[type="submit"],
.commerce-order-item-add-to-cart .button {
  display: inline-block;
  width: auto;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--dm-radius-sm);
  background-color: var(--dm-teal);
  color: var(--dm-text-invert);
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  margin-bottom: 10px;
}

.dm-btn:hover,
.dm-btn:focus,
.button:hover,
.button:focus,
.form-submit:hover,
.form-submit:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: var(--dm-orange);
  color: var(--dm-text-invert);
  text-decoration: none;
}

/* Odkaz v podobe tlačidla (<a class="button">, napr. „Spracovať objednávku“
   / „Zrušiť objednávku“ v state_machine formulári objednávky, use-ajax odkazy).
   Globálne `a:link` (0,1,1) prebíjalo `.button` (0,1,0) → teal text na teal
   pozadí; `a:hover !important` zas oranžový text na oranžovom. `td a`,
   `p a:link` (0,1,2) majú !important, preto všetky stavy s pseudotriedou
   (0,2,1) a !important. Platí pre všetky tlačidlá-odkazy na webe. */
a.dm-btn, a.dm-btn:link, a.dm-btn:visited, a.dm-btn:hover, a.dm-btn:focus, a.dm-btn:active,
a.button, a.button:link, a.button:visited, a.button:hover, a.button:focus, a.button:active,
a.btn-primary:link, a.btn-primary:visited, a.btn-primary:hover, a.btn-primary:focus {
  color: var(--dm-text-invert) !important;
  text-decoration: none !important;
}

/* Reset filtra: inverzná dvojica farieb (D7 #edit-reset). */
.dm-btn--reset,
input[type="submit"].dm-btn--reset,
#edit-reset {
  background-color: var(--dm-orange);
}

.dm-btn--reset:hover,
input[type="submit"].dm-btn--reset:hover,
#edit-reset:hover {
  background-color: var(--dm-teal);
}

/* Plná šírka — D7 to používal pri exposed filtroch a webformoch. */
.dm-btn--block { width: 100%; }

/* --- Bootstrap prebíjanie ---------------------------------------------- */
/* Bootstrap dáva h1 responzívnu veľkosť `calc(1.375rem + 1.5vw)` → 40 px.
   D7 mal 36 px (tokens.css --dm-h1). Rovnaká špecificita, neskoršie poradie. */
h1, .h1 { font-size: var(--dm-h1) !important; }
h2, .h2 { font-size: var(--dm-h2) !important; }
h3, .h3 { font-size: var(--dm-h3) !important; }
h2.block-title { font-size: var(--dm-block-title) !important; }


/* Bootstrap 5 z CDN sa načítava AŽ ZA CSS témy. `.btn-primary` má rovnakú
   špecificitu ako `.form-submit` vyššie, takže vyhráva poradím — tlačidlá
   boli modré so zaoblením 6px. D7 predloha (global.css 1569–1620):
   teal #05b496, hover #F57921, radius 0 14px, uppercase, padding 8px 12px.
   Preto `!important`; Bootstrap sa needituje. */
.btn-primary,
.btn.button,
.btn.form-submit,
button.btn.form-submit,
input[type="submit"].btn,
.button--primary {
  background-color: var(--dm-teal) !important;
  border: 0 !important;
  border-radius: var(--dm-radius-sm) !important;
  padding: 8px 12px !important;
  color: var(--dm-text-invert) !important;
  font-weight: 400;
  text-transform: uppercase;
  white-space: normal;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn.form-submit:hover,
.btn.form-submit:focus,
input[type="submit"].btn:hover,
.button--primary:hover,
.button--primary:focus {
  background-color: var(--dm-orange) !important;
  color: var(--dm-text-invert) !important;
}

/* Reset filtra musí prebiť aj pravidlo vyššie — preto až za ním. */
#edit-reset,
input#edit-reset,
button#edit-reset,
.btn.dm-btn--reset {
  background-color: var(--dm-orange) !important;
}

#edit-reset:hover,
#edit-reset:focus,
input#edit-reset:hover,
button#edit-reset:hover,
.btn.dm-btn--reset:hover {
  background-color: var(--dm-teal) !important;
}

/* --- Formuláre -------------------------------------------------------- */

.dm-form-readonly .form-item {
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}

.dm-form-readonly input,
.dm-form-readonly select {
  background: var(--dm-panel);
}

/* --- Utility ----------------------------------------------------------- */

/* Bootstrap `.btn { display: inline-block }` prebíja core
   `hidden.module.css .hidden { display: none }` (rovnaká špecificita, načíta
   sa neskôr). Týka sa napr. skrytého Odoslať v kalkulačke plochy. */
.hidden {
  display: none !important;
}