/* ==================================================================
   ATTACHMENTS ON THE CONTACT FORM

   Loaded only on the contact page. Everything is scoped under
   .af-contact-files so it cannot reach the rest of the form, which
   another module styles.

   The colours, radii and the 16px input size are the ones the contact
   form already uses, so the block reads as part of the same form
   rather than a plugin bolted onto it.
   ================================================================== */

.af-contact-files{
  margin:0 0 16px;
}

/* The form becomes a two-column grid above 760px. This block is a div,
   not one of the <p> elements that rule names, so it has to claim the
   full width itself or it would sit in one narrow column. */
.af-contact__form .wpcf7-form .af-contact-files{
  grid-column:1 / -1;
}

.af-contact-files__title{
  margin:0 0 4px!important;
  font-size:16px!important;
  font-weight:600!important;
  color:var(--af-ink,#1d1d1f)!important;
}

.af-contact-files__hint{
  margin:0 0 10px!important;
  font-size:15px!important;
  line-height:1.45;
  color:#4a4a4f!important;
}

/* --- the five slots ------------------------------------------------- */

/* CF7 runs the form body through its own autop, which wraps the row of
   labels in a <p>. The gap has to survive that, so the paragraph is made
   the same column the wrapper is. */
.af-contact-files__slots,
.af-contact-files__slots > p{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.af-contact-files__slots > p{
  margin:0!important;
}

.af-contact-files__slot{
  display:block;
  font-size:16px;
  font-weight:500;
  color:var(--af-ink,#1d1d1f);
}

.af-contact-files__slot-name{
  display:block;
  margin-bottom:6px;
}

/* Without JavaScript these are five ordinary file inputs, given the same
   height and type size as every other field on the form. */
.af-contact-files__slot input[type="file"]{
  width:100%;
  min-height:52px;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.22);
  border-radius:12px;
  background:#fff;
  font-size:16px;              /* 16px stops iOS zooming on focus */
  font-family:inherit;
  color:var(--af-ink,#1d1d1f);
}

.af-contact-files__slot input[type="file"]:focus-visible{
  outline:2px solid var(--af-focus,#0b65c2);
  outline-offset:2px;
}

/* --- with JavaScript: one drop zone --------------------------------- */

/* The other four inputs still carry a file each and still have to be
   submitted, so they are moved out of sight rather than removed.

   Marked by the script rather than by position: CF7 runs the form body
   through its own wpautop, and a stray <br> between two labels would
   defeat any selector that counted on them being adjacent. */
.af-contact-files--js .af-contact-files__slot.is-spill{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.af-contact-files--js .af-contact-files__slot.is-zone{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:104px;
  padding:18px 20px;
  border:2px dashed rgba(27,94,32,.45);
  border-radius:16px;
  background:#f7faf7;
  cursor:pointer;
  text-align:left;
  transition:border-color .18s ease, background-color .18s ease;
}

.af-contact-files--js .af-contact-files__slot.is-zone:hover{
  border-color:#1b5e20;
  background:#f1f7f1;
}

/* The input stays a real, focusable <input type="file"> inside its own
   label - the zone is the label, not a div listening for drags - so it is
   hidden from sight only, and the ring is drawn on the zone around it. */
.af-contact-files--js .af-contact-files__slot.is-zone input[type="file"]{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  min-height:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  border:0;
  opacity:0;
}

.af-contact-files--js .af-contact-files__slot.is-zone:focus-within{
  outline:3px solid var(--af-focus,#0b65c2);
  outline-offset:3px;
  border-color:#1b5e20;
}

.af-contact-files--js .af-contact-files__slot.is-zone.is-over{
  border-color:#1b5e20;
  border-style:solid;
  background:#e8f2e8;
}

.af-contact-files__icon{
  flex:0 0 52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:15px;
  background:#e4efe4;
  color:#1b5e20;
}

.af-contact-files--js .af-contact-files__slot-name{
  margin-bottom:2px;
  font-size:17px;
  font-weight:700;
  line-height:1.3;
}

.af-contact-files__zone-sub{
  display:block;
  font-size:14.5px;
  font-weight:400;
  color:#4a4a4f;
}

/* --- the files someone has chosen ----------------------------------- */

.af-contact-files__list{
  margin:12px 0 0!important;
  padding:0!important;
  list-style:none!important;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.af-contact-files__item{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0!important;
  padding:8px 8px 8px 14px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
  list-style:none!important;
}

.af-contact-files__item-text{
  flex:1 1 auto;
  min-width:0;          /* lets a long file name shrink instead of overflowing */
  display:flex;
  flex-direction:column;
  gap:2px;
}

.af-contact-files__item-name{
  font-size:15.5px;
  font-weight:600;
  color:var(--af-ink,#1d1d1f);
  overflow-wrap:anywhere;
}

.af-contact-files__item-size{
  font-size:14px;
  color:#4a4a4f;
}

/* 48px is the smallest target an older thumb reliably hits. */
.af-contact-files__remove{
  flex:0 0 auto;
  min-height:48px;
  min-width:48px;
  padding:0 18px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:999px;
  background:#fff;
  font-size:15px;
  font-weight:600;
  font-family:inherit;
  color:#8a2c2c;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease;
}

.af-contact-files__remove:hover{
  background:#fbf2f2;
  border-color:#8a2c2c;
}

.af-contact-files__remove:focus-visible{
  outline:2px solid var(--af-focus,#0b65c2);
  outline-offset:2px;
}

.af-contact-files__total{
  margin:10px 0 0!important;
  font-size:15px!important;
  font-weight:600!important;
  color:#4a4a4f!important;
}

.af-contact-files__total:not(.is-shown){
  display:none;
}

/* The refusal message. Announced through aria-live as well, so it is not
   only a colour change somebody may not see. */
.af-contact-files__msg{
  margin:10px 0 0!important;
  font-size:15px!important;
  line-height:1.45;
  color:#8a2c2c!important;
}

.af-contact-files__msg:not(.is-shown){
  display:none;
}

@media (max-width:600px){
  .af-contact-files--js .af-contact-files__slot.is-zone{
    gap:12px;
    padding:16px;
  }

  .af-contact-files__icon{
    flex:0 0 46px;
    width:46px;
    height:46px;
  }

  .af-contact-files__item{
    flex-wrap:wrap;
  }

  .af-contact-files__remove{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .af-contact-files--js .af-contact-files__slot.is-zone,
  .af-contact-files__remove{
    transition:none;
  }
}

/* ==================================================================
   THE DROP ZONE IS A TITLE AND A NOTE, NOT TWO COLUMNS

   The script inserts three things into the label: the icon, the name
   it rewrites to "Trage fișierele aici sau alege de pe dispozitiv",
   and a note reading "Apasă aici ca să alegi din telefon sau din
   calculator". The label is a flex row, so all three became columns
   and the two sentences were set side by side in whatever width was
   left over.

   Measured, name box then note box:
     390px   87x133  and  85x116   - six lines of two words each
     768px  259x44   and 254x46
     1024px 161x66   and 158x70
     1440px 264x44   and 258x46
   It never reads as a heading with a note under it, at any width the
   form is not enormous - and on a phone it is a shredded block of
   text where one sentence belongs. The intent was always a stack:
   .af-contact-files__slot-name is display:block and the note is
   smaller and grey, which is a subtitle, not a second column.

   A two-column grid fixes it without the script building anything
   more: the icon takes the first column across both rows, the name
   and the note take the second, one above the other. minmax(0,1fr)
   rather than 1fr so a long file name shrinks the column instead of
   pushing the grid wider than the form.

   Last in the file on purpose - the max-width:600px block above sets
   the gap with the shorthand, and these have to outlast it. */
.af-contact-files--js .af-contact-files__slot.is-zone{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:2px 14px;
}

/* The icon stands beside both lines rather than above the note. */
.af-contact-files--js .af-contact-files__slot.is-zone > .af-contact-files__icon{
  grid-row:1 / span 2;
}

@media (max-width:600px){
  .af-contact-files--js .af-contact-files__slot.is-zone{
    gap:2px 12px;
  }
}