/* ============================================================
   JP News (جهينة نيوز) — finaldesign «الشبكة» — service.css
   The service pages (2026-09-29): «اتصل بنا» (contact.html) and
   «استبيان القراء» (survey.html) — the pages the footer's «خدمات»
   column leads to, not category pages. Loaded after interior.css,
   whose FORMS section holds the shared field system; this file adds
   only what these pages own: the ink scope, the contact channel
   cards, the survey's questions and answer choices. Pure design:
   no script on these pages (client, 2026-09-29).
   Colour comes only from theme.css tokens (no hex here).
   ============================================================ */

/* ------------------------------------------------------------
   SCOPE — a service page belongs to no category, so its accent is
   ink (like «فيديو»): the page-head bar, the section labels and the
   sidebar panel read --cat from here. From 1200 the page is held to
   the article's reading width (1160px, centred).
   ------------------------------------------------------------ */
.page-service {
    --cat: var(--color-text);
}

@media (min-width: 1200px) {
    .page-service .breadcrumb,
    .page-service .page-head,
    .page-service .page-grid {
        max-inline-size: 1160px;
        margin-inline: auto;
    }
}

.service-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-inline-size: 0;
}

/* ------------------------------------------------------------
   CONTACT CHANNELS — six cards, two across from 576 (2 × 3), paired
   so the two cards in a row hold the same kind of content: newsroom
   line + e-mail (text + one value) · phone + fax (two lines each) ·
   headquarters + follow. Each is a list item with an h3. The details
   are the client's (2026-09-30), in Western digits.
   ------------------------------------------------------------ */
.contact-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}

.contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-block-start: 3px solid var(--color-rule-strong);
    border-radius: var(--radius-card);
}

.contact-card-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-md);
    line-height: 1.4;
}

.contact-card-title .icon-sm {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.contact-card-text {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--color-text-muted);
}

.contact-card-value {
    margin-block-start: auto;
    padding-block-start: var(--space-xs);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
}

/* A card with several numbers (phone, fax): one row per line, the
   client's label then the number. The label column has one width, so
   the numbers of both cards start on the same line; every row keeps
   the 44px target height, linked or not, so the pair match row for
   row. */
.contact-lines {
    display: flex;
    flex-direction: column;
    margin-block-start: auto;
    padding-block-start: var(--space-xs);
}

.contact-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-sm);
    min-block-size: 44px;
}

.contact-line + .contact-line {
    border-block-start: 1px solid var(--color-border);
}

.contact-line dt {
    min-inline-size: 4.5em;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.contact-line dd {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
}

/* the fax-only number is text, not a link: the same 44px box keeps the
   two cards level */
.contact-line dd > span {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
}

.contact-card-value a,
.contact-line a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

.contact-card-value a:hover,
.contact-card-value a:focus-visible,
.contact-line a:hover,
.contact-line a:focus-visible {
    text-decoration-color: currentColor;
}

.contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: auto;
    padding-block-start: var(--space-xs);
}

/* «استبيان القراء» promo under the contact form */
.survey-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-inline-start: 4px solid var(--color-rule-strong);
    border-radius: var(--radius-card);
}

.survey-promo-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-md);
}

.survey-promo-text {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.survey-promo-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: 44px;
    padding-inline: var(--space-md);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-btn);
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.survey-promo-link:hover,
.survey-promo-link:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-bg);
}

.survey-promo-link .icon-directional {
    transform: rotate(90deg);       /* chevron-down as a forward caret in RTL, as .section-more does */
}

/* ------------------------------------------------------------
   SURVEY — questions are fieldsets, answers are native radios or
   checkboxes inside full-width label cards (every card a 48px
   target, the whole card clickable), ONE CHOICE PER LINE in every
   question at every width, the rating included (client, 2026-09-30). The chosen card takes an ink
   border; :has() draws it, so browsers without :has() still show
   the native checked control. Pure design (2026-09-29): an
   unanswered question's state is ready for the development team —
   [data-invalid] on its fieldset gives the accent borders.
   ------------------------------------------------------------ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* The rule between questions is drawn at the foot of each one, never on
   the top border: a fieldset places its legend ON the top border, so a
   rule there would run under the question text */
.form-group:not(:last-of-type) {
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--color-border);
}

.form-legend {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 0;
    margin-block-end: var(--space-xs);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-lg);
    line-height: 1.5;
}

.form-legend-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--radius-chip);
    background-color: var(--color-primary);
    color: var(--color-bg);
    font-size: var(--fs-sm);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.choice-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
}

.choice {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-block-size: 48px;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-bg);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-btn);
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.choice input {
    flex-shrink: 0;
    inline-size: 20px;
    block-size: 20px;
    margin: 0;
    accent-color: var(--color-primary);
}

.choice:hover {
    border-color: var(--color-text);
}

.choice:has(input:checked) {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.form-group[data-invalid] .choice {
    border-color: var(--color-accent);
}

.survey-thankyou {
    display: grid;
    place-items: center;
    padding-block: var(--space-md) var(--space-2xl);
}

.survey-thankyou-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: min(100%, 760px);
    gap: var(--space-md);
    padding: clamp(var(--space-lg), 5vw, var(--space-2xl));
    border: 1px solid var(--color-border);
    border-block-start: 4px solid var(--color-primary);
    border-radius: var(--radius-card);
    background-color: var(--color-bg);
    text-align: center;
}

.survey-thankyou-icon {
    display: grid;
    place-items: center;
    inline-size: 64px;
    block-size: 64px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-bg);
}

.survey-thankyou-icon .icon {
    inline-size: 36px;
    block-size: 36px;
    fill: currentColor;
}

.survey-thankyou-title {
    font-family: var(--font-primary);
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1.4;
}

.survey-thankyou-text,
.survey-thankyou-note {
    max-inline-size: 58ch;
    font-size: var(--fs-md);
    line-height: 1.8;
}

.survey-thankyou-note {
    color: var(--color-text-muted);
}

.survey-thankyou-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-block-start: var(--space-xs);
}

.survey-thankyou-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding-inline: var(--space-md);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-btn);
    font-family: var(--font-primary);
    font-size: var(--fs-sm);
    font-weight: 700;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.survey-thankyou-link-primary {
    background-color: var(--color-primary);
    color: var(--color-bg);
}

.survey-thankyou-link-primary:hover,
.survey-thankyou-link-primary:focus-visible {
    background-color: transparent;
    color: var(--color-primary);
}

.survey-thankyou-link-secondary {
    color: var(--color-primary);
}

.survey-thankyou-link-secondary:hover,
.survey-thankyou-link-secondary:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-bg);
}

@media (min-width: 576px) {
    .contact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}