/* zmenek.net 2026 redesign (Polaroid), see docs/superpowers/specs/2026-11-02-zmenek-polaroid-design.md
   Profile and SMS (profile.php, Pages: Profile and SMS): the headline, the grid, the big print, the fact card,
   "O meni", the SMS card with its fields, button and results, and the SMS terms. Everything sits under
   #javno-profil-uporabnik; the shared print (.print, --tilt, the undeveloped print) lives in zn2026.css. */

/* ---------------------------------------------------------------- Headline */
#javno-profil-uporabnik .headline {
  margin-bottom: 26px;
  font: 800 26px/1.15 var(--head);
  color: #fff;
  text-shadow: 0 1px 2px rgba(60,10,30,.55), 0 0 12px rgba(80,10,40,.35);  /* the heading text-shadow (as #topBox .right h2, .ce_text h3) */
}

/* ---------------------------------------------------------------- Grid: print | fact card | SMS card, the terms across */
#javno-profil-uporabnik .profileGrid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr) 372px;
  gap: 32px 36px;
  align-items: start;
}
#javno-profil-uporabnik .profileGrid > * { min-width: 0; }
#javno-profil-uporabnik .profileGrid > .factcard { align-self: stretch; }
#javno-profil-uporabnik .profileGrid > .smsTerms { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- The big print */
#javno-profil-uporabnik .print--large { --tilt: -1deg; padding: 16px 16px 0; }
/* the image carries the 380:478 box itself (no inner figure), so a square crop or empty.gif keeps the portrait shape */
#javno-profil-uporabnik .print--large > img {
  width: 100%;
  height: auto;
  aspect-ratio: 380 / 478;
  object-fit: cover;
}
#javno-profil-uporabnik .print--large .profileListData {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding: 18px 6px 26px;
}
#javno-profil-uporabnik .print--large h2 {
  min-width: 0;
  font: 800 32px/1.1 var(--head);
  color: var(--brown);
  overflow-wrap: anywhere;
}
#javno-profil-uporabnik .print--large .age { font: 500 20px/1.1 var(--body); color: var(--ink-muted); }

/* ---------------------------------------------------------------- The fact card */
#javno-profil-uporabnik .factcard {
  padding: 26px;
  border-radius: 3px;
  background: var(--cream) var(--damask-cream) repeat;
  box-shadow: var(--shadow-print);
}
#javno-profil-uporabnik .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#javno-profil-uporabnik .fact {
  min-width: 0;
  min-height: 76px;  /* an empty city keeps the tile's shape */
  padding: 12px 14px 14px;
  border: 1px solid var(--fact-line);
  border-radius: 3px;
  background: rgba(255,255,255,.86);
}
#javno-profil-uporabnik .fact .label {
  margin-bottom: 6px;
  font: 700 13px/1.2 var(--body);
  letter-spacing: .02em;
  color: var(--plum);
}
#javno-profil-uporabnik .fact .value {
  font: 700 20px/1.2 var(--head);
  color: var(--brown);
  overflow-wrap: anywhere;
}
/* an empty value (the template prints no whitespace) shows the approved en dash */
#javno-profil-uporabnik .fact .value:empty::before { content: "–"; color: var(--ink-muted); font-weight: 500; }

/* "O meni" */
#javno-profil-uporabnik .factcard .description {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #d9b9c6;
  overflow-wrap: anywhere;  /* the label and the text */
}
#javno-profil-uporabnik .factcard .description .label {
  margin-bottom: 8px;
  font: 800 20px/1.2 var(--head);
  color: var(--brown);
}
#javno-profil-uporabnik .factcard .description p:not(.label) {
  font: 400 16px/1.65 var(--body);
  color: var(--ink-2);
}
#javno-profil-uporabnik .adSpace_02 { display: none; }  /* empty, as today */

/* ---------------------------------------------------------------- The SMS card */
#sendBox {
  padding: 26px 26px 28px;
  border-radius: 4px;
  background: var(--brown) var(--damask-brown) center / cover no-repeat;
  color: var(--on-brown);
  box-shadow: var(--shadow-print);
}
#sendBox h3 { font: 800 28px/1.1 var(--head); color: var(--orange); }
#sendBox h4 { margin: 6px 0 20px; font: 500 16px/1.4 var(--body); color: var(--on-brown-muted); }
#sendBox .table_row { margin-bottom: 16px; }
#sendBox .label {
  display: block;
  margin-bottom: 7px;
  font: 700 15px/1.3 var(--body);
  color: var(--on-brown);
}
#prov_type,
#phonenumber,
#message {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid #fff;
  border-radius: 3px;
  background-color: var(--paper);
  color: var(--ink);
  font: 500 16px/1.4 var(--body);
}
#prov_type {
  -webkit-appearance: none;
  appearance: none;
  min-height: 46px;
  padding: 0 40px 0 14px;
  background: var(--icon-chevron) right 12px center / 20px no-repeat, var(--paper);
  cursor: pointer;
}
#phonenumber { min-height: 46px; padding: 0 14px; letter-spacing: .06em; }
#message { min-height: 116px; padding: 12px 14px; resize: vertical; }
/* Focus: the shared white ring with the brown halo (on brown), from zn2026.css :focus-visible. */

/* "POŠLJI SMS"; the locked script sets "Pošiljanje" and disables it while sending */
#btnSend {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 54px;
  margin: 4px 0 0;
  border: 0;
  border-radius: 4px;
  background: var(--orange);
  color: var(--brown-deep);
  font: 800 20px/1 var(--head);
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 2px 0 var(--orange-edge);
  cursor: pointer;
}
#btnSend:focus-visible { box-shadow: 0 0 0 6px var(--brown-deep), 0 2px 0 var(--orange-edge); }
#btnSend:disabled {
  background: var(--disabled);
  color: var(--brown-deep);
  box-shadow: none;
  cursor: progress;
}

/* Results: jQuery 1.8 .show() writes inline display: block, so each block is hidden here and laid out as a plain block. */
#fallbackMSG > div {
  display: none;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.55;
}
#sendOK {
  position: relative;
  padding: 22px 22px 22px 66px;
  border-radius: 4px;
  background: rgba(20,8,10,.35);
}
#sendOK::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%232b181a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
#sendOK span {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 14px;
  border-radius: 3px;
  background: var(--orange);
  color: var(--brown-deep);
  font: 800 22px/1.1 var(--head);
  letter-spacing: .08em;
}
#sendERROR,
#sendERROR_IP,
#sendERROR_BAN {
  padding: 14px 16px 14px 18px;
  border-left: 4px solid var(--error-lt);
  border-radius: 0 3px 3px 0;
  background: rgba(20,8,10,.35);
  color: var(--on-brown);
}

/* ---------------------------------------------------------------- SMS terms (its link is inline text, exempt from 44px) */
#javno-profil-uporabnik .smsTerms {
  padding: 16px 20px;
  border-left: 4px solid var(--brown);
  border-radius: 3px;
  background: var(--paper-warm);
  color: var(--ink-2);
  font: 400 13px/1.6 var(--body);
  box-shadow: var(--shadow-print);
}
#javno-profil-uporabnik .smsTerms a {
  font-weight: 700;
  color: var(--plum);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* white and cream surfaces take the brown ring */
#javno-profil-uporabnik .factcard :focus-visible,
#javno-profil-uporabnik .smsTerms :focus-visible {
  outline: 2px solid var(--brown-deep);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------------------------------------------------------------- 1200px: print | fact card, then a wide SMS card, then the terms */
@media (max-width: 1200px) {
  #javno-profil-uporabnik .profileGrid { grid-template-columns: 340px minmax(0, 1fr); gap: 30px 32px; }
  #sendBox { grid-column: 1 / -1; padding: 24px 28px 28px; }
  /* operator | number, the message across, the button in column 2 */
  #sendSMS { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  #sendSMS > .table_row:nth-child(5) { grid-column: 1 / -1; }  /* fallback without :has(): the message row is the 5th child */
  #sendSMS > .submit_container { grid-column: 2; }
  #message { min-height: 96px; }
}
/* separate rule: a browser without :has() drops only this one */
@media (max-width: 1200px) {
  #sendSMS > .table_row:has(#message) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- 860px */
@media (max-width: 860px) {
  #javno-profil-uporabnik .print--large h2 { font-size: 28px; }
}

/* ---------------------------------------------------------------- 680px: phones, one column */
@media (max-width: 680px) {
  #javno-profil-uporabnik .headline { margin-bottom: 20px; font-size: 22px; }
  #javno-profil-uporabnik .profileGrid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  #javno-profil-uporabnik .profileGrid > * { grid-column: 1; }
  #javno-profil-uporabnik .print--large { width: 100%; max-width: 380px; margin: 0 auto; padding: 12px 12px 0; }
  #javno-profil-uporabnik .print--large h2 { font-size: 26px; }
  #javno-profil-uporabnik .print--large .age { font-size: 17px; }
  #javno-profil-uporabnik .factcard { padding: 18px; }
  #javno-profil-uporabnik .fact .value { font-size: 18px; }
  #sendBox { padding: 22px 18px 24px; }
  #sendBox h3 { font-size: 24px; }
  #sendSMS { display: block; }
}

/* ---------------------------------------------------------------- Hover (pointer devices only) */
@media (hover: hover) {
  #btnSend:not(:disabled):hover { background: var(--orange-lt); }
  #javno-profil-uporabnik .smsTerms a:hover { color: var(--brown); }
}

/* ---------------------------------------------------------------- Print: the form is hidden (zn2026.css), the terms stay */
@media print {
  #sendBox, #javno-profil-uporabnik .factcard, #javno-profil-uporabnik .fact, #javno-profil-uporabnik .smsTerms { background: none; }
}