/* =====================================================================
   css/contact.css — contact page only (contact.html)
   ===================================================================== */

/* ---------- Shared (all sizes) ---------- */
.cf-info-link{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.25); line-height:1.6; }
.cf-info-link:hover{ border-bottom-color:currentColor; }
.contact-info, .contact-hour{ grid-row-gap:14px; }
.cf-form-title{ display:none; }
.cf-block [hidden]{ display:none !important; }
.cf-form{ display:flex; flex-direction:column; }
.cf-chip i{ font-style:normal; }
.cf-chip i.cf-short{ display:none; }
.cf-star{ color:#b3261e; margin-left:3px; }
.cf-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.cf-topic{ border:0; padding:0; margin:0 0 28px; min-width:0; }
.cf-topic legend{ padding:0; margin-bottom:14px; }
.cf-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.cf-chip{ position:relative; cursor:pointer; margin:0; font-weight:400; }
.cf-chip input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.cf-chip span{ display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border:1.5px solid #c9c9c9; border-radius:999px; font-family:'DM Sans',sans-serif; font-size:1.05rem; color:#333; white-space:nowrap; transition:background-color .2s, color .2s, border-color .2s; }
.cf-chip:hover span{ border-color:#333; }
.cf-chip input:checked + span{ background:#1b1b1b; border-color:#1b1b1b; color:#fff; }
.cf-chip input:focus-visible + span{ outline:2px solid #1b1b1b; outline-offset:2px; }
.cf-field{ display:flex; flex-direction:column; margin-bottom:24px; }
.cf-field .contact-form-label{ margin-bottom:2px; }
.cf-field .contact-text-field{ margin-bottom:0; padding:14px 0 12px; }
.cf-field .contact-text-field.area{ line-height:1.5; min-height:140px; resize:vertical; }
.cf-field .contact-text-field:focus{ outline:none; border-bottom-color:#1b1b1b; }
.cf-err{ display:none; color:#b3261e; font-size:.95rem; margin:8px 0 0; }
.cf-field.is-invalid .contact-text-field{ border-bottom:2px solid #b3261e; }
.cf-field.is-invalid .cf-err{ display:block; }
.cf-submit{ align-self:flex-start; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; margin-top:8px; padding:0 30px; border:1px solid #1b1b1b; background:#1b1b1b; color:#fff; font-family:'DM Sans',sans-serif; font-size:1.25rem; cursor:pointer; transition:background-color .2s, color .2s; }
.cf-submit:hover{ background:transparent; color:#1b1b1b; }
.cf-submit .cf-arrow{ transition:transform .25s ease; }
.cf-submit:hover .cf-arrow{ transform:translateX(4px); }
.cf-submit[disabled]{ opacity:.6; cursor:progress; }
.cf-note{ margin:16px 0 0; font-size:1rem; color:#6b6b6b; }
.cf-fail a, .cf-done a{ color:inherit; font-size:inherit; }
.cf-fail{ margin:16px 0 0; padding:14px 16px; background:#fbeaea; color:#8a2a20; font-size:1rem; }
.cf-done{ padding:40px 0; outline:none; }
.cf-done-mark{ width:56px; height:56px; border-radius:50%; background:#1b1b1b; color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:22px; }
.cf-done-title{ font-family:'DM Sans',sans-serif; font-weight:500; font-size:2rem; line-height:1.25; margin:0 0 12px; }
.cf-done p{ font-size:1.15rem; color:#555; margin:0; }


/* ---------- Hover hints on the contact links (mouse/trackpad only; also on keyboard focus) ----------
   WCAG: text #111 on #d1d1d1 = 12.4:1 (AA needs 4.5:1, AAA 7:1) */
/* any-hover/any-pointer: also true on an iPad with a mouse or trackpad attached (touch is its primary input) */
@media (any-hover:hover) and (any-pointer:fine){
    .cf-info-link[data-tip]{ position:relative; }
    .cf-info-link[data-tip]::after{
        content:attr(data-tip); position:absolute; left:0; top:calc(100% + 10px);
        padding:7px 11px; background:#d1d1d1; color:#111; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.12);
        font-family:'DM Sans',sans-serif; font-size:13px; line-height:1.2; white-space:nowrap;
        opacity:0; transform:translateY(-4px); pointer-events:none;
        transition:opacity .15s ease, transform .15s ease; transition-delay:0s;
    }
    .cf-info-link[data-tip]::before{
        content:''; position:absolute; left:16px; top:calc(100% + 4px);
        border:6px solid transparent; border-bottom-color:#d1d1d1; border-top:0;
        opacity:0; transform:translateY(-4px); pointer-events:none;
        transition:opacity .15s ease, transform .15s ease;
    }
    .cf-info-link[data-tip]:hover::after, .cf-info-link[data-tip]:hover::before,
    .cf-info-link[data-tip]:focus-visible::after, .cf-info-link[data-tip]:focus-visible::before{
        opacity:1; transform:translateY(0); transition-delay:.25s;
    }
}
/* ---------- Desktop (992px+): gif box is as tall as the form ---------- */
@media (min-width:992px){
    ._2-columns-grid.contact-page{ align-items:stretch; }
    .contact-image-wrap{ align-self:stretch; display:flex; background:#f6f6f6; }
    .contact-image{ width:100%; height:100%; min-height:0; object-fit:contain; object-position:50% 50%; }
    /* more air under the topic choice; the message box gives back the same
       16px so the form (and the gif beside it) stays the same height */
    .cf-topic{ margin-bottom:44px; }
    .cf-field .contact-text-field.area{ min-height:0; height:179px; }
    /* roomier fields: more space between fields and under each label */
    .cf-field{ margin-bottom:40px; }
    .cf-field .contact-form-label{ margin-bottom:6px; }
    .cf-submit{ margin-top:4px; }
}

/* ---------- iPad landscape / small laptops (992-1279px) ---------- */
@media (min-width:992px) and (max-width:1279px){
    ._2-columns-grid.contact-page{ grid-template-columns:0.8fr 1fr; }
    .contact-form-wrap{ padding-left:32px; }
    .cf-chips{ gap:8px; flex-wrap:nowrap; }
    .cf-chip span{ padding:0 13px; font-size:.95rem; }
}

/* ---------- Tablet portrait + phones (<=991px): the desktop page, stacked ----------
   Same building blocks as desktop (big heading, underlined section titles, underline
   inputs, black button). The gif is hidden here: on a narrow screen it only pushes
   the form down. The form gets the same underlined title as the contact details so
   the page reads as two clear sections: "how to reach me" and "send a message". */
@media (max-width:991px){
    .contact-image-wrap{ display:none; }
    .contact-info-group .contact-info, .contact-info-group .contact-hour{ margin-right:0; padding-left:0; }
    .cf-form-title{ display:inline-block; margin-bottom:28px; }
    .cf-form-title h5, .cf-info .underline-title h5{ margin:0 0 6px; }
    .contact-form-wrap{ padding-left:0; padding-top:0; }
}
@media (min-width:768px) and (max-width:991px){
    .contact-info-group ._3-columns-grid.contact{ grid-template-columns:auto auto auto; justify-content:space-between; grid-column-gap:40px; }
    .cf-block{ max-width:640px; }
}

/* ---------- Phones (<=767px) ---------- */
@media (max-width:767px){
    .contact-heading-group{ order:1; }
    .contact-info-group{ order:2; }
    .contact-reorder-mobile > section.contact-media-form-section{ order:3; padding-top:24px; padding-bottom:72px; }
    .contact-reorder-mobile{ gap:48px; }

    /* Contact details: Email on its own row, Phone + LinkedIn side by side —
       the desktop's 3-across row, folded once instead of stacked into a list */
    .contact-info-group ._3-columns-grid.contact{
        display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"email email" "phone li";
        grid-row-gap:36px; grid-column-gap:20px; padding-top:0;
    }
    .cf-info-email{ grid-area:email; } .cf-info-phone{ grid-area:phone; } .cf-info-li{ grid-area:li; }
    .contact-info-group .contact-info, .contact-info-group .contact-hour{ grid-row-gap:12px; min-width:0; }
    .cf-info .underline-title h5, .cf-form-title h5{ font-size:1.5rem; line-height:1.3; }
    .cf-info-link{ display:inline-block; padding:6px 0; font-size:1.1rem; overflow-wrap:anywhere; }

    /* Form */
    .cf-form-title{ margin-bottom:29px; } /* phones only */
    .cf-form .contact-form-label{ font-size:1.15rem; }
    .cf-field{ margin-bottom:28px; }
    .cf-field .contact-text-field, .cf-field .contact-text-field::placeholder{ font-size:17px; } /* >=16px: no iOS zoom on focus */
    .cf-submit{ align-self:stretch; font-size:1.15rem; }
    .cf-done-title{ font-size:1.6rem; }
}
@media (max-width:359px){
    .contact-info-group ._3-columns-grid.contact{ grid-template-columns:1fr; grid-template-areas:"email" "phone" "li"; grid-row-gap:28px; }
    .cf-chip span{ padding:0 14px; font-size:.95rem; }
}
/* Phones: the three topics on one line (equal thirds; "Freelance project" shortens to "Freelance") */
@media (max-width:767px){
    .cf-chips{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; flex-wrap:nowrap; }
    .cf-chip span{ display:flex; justify-content:center; width:100%; padding:0 6px; font-size:15px; }
    .cf-chip i.cf-long{ display:none; }
    .cf-chip i.cf-short{ display:inline; }
}
@media (max-width:389px){ .cf-chip span{ font-size:14px; padding:0 4px; } }
@media (max-width:359px){
    .cf-chips{ gap:6px; }
    .cf-chip span{ padding:0 4px; font-size:13px; }
}