/*
    MASS INTENTIONS OBJECTS (Layer Design Studio)
    Loaded in <head> only by pages that have a "Request Mass Intentions"
    (.pm-obj-massintention) or "Mass Intentions Calendar" (.pm-obj-masscalendar)
    object - see wds_layer_widgets() in
    CAF227A79146/webdesign/library/webdesign_studio_functions.php.

    Studio layouts do not load ctm/31000/structure.css, so the widgets lose the
    legacy grid (fx_1 / fx_2 / fx_3) and the calendar table. This file gives
    back that LAYOUT only, scoped to the object. It has no colors and defines
    no variables:
      - colors: the layer CSS (wds_widget_css), from Layer Design Studio ›
        object › Colors, defaulting to the Web Design Studio palette;
      - buttons: the layout CSS (wds_page_elements_css), from Website ›
        Page Elements › Buttons.
    The widget's own stylesheet (CAF227A79146/intention/web/mass_intention.css)
    still applies.

    INDEX
        - TITLE & FONTS
        - LEGACY GRID (fx_1, fx_2, fx_3)
        - BUTTONS (layout only)
        - CALENDAR (request form)
        - MASS INTENTIONS CALENDAR (masscalendar)
*/

/*-----------------------------------------------------------  TITLE & FONTS   --------------------*/
.pm-obj-massintention > .pm-part-title,
.pm-obj-masscalendar > .pm-part-title {
    text-align: center;
}

.pm-obj-massintention #mass_intention,
.pm-obj-masscalendar #mass_intentions {
    width: 100%;
}

/* The widget asks for Montserrat, which Studio sites do not load: use the site font. */
.pm-obj-massintention #mass_intention #mi_steps .fx_3 p,
.pm-obj-massintention #mass_intention .added_intentions p {
    font-family: inherit;
}

.pm-obj-massintention #mass_intention .select-area input,
.pm-obj-massintention #mass_intention .select-area select,
.pm-obj-massintention #mass_intention #select_date > input {
    box-sizing: border-box;
    background-color: #ffffff;
}

/* Field labels a little smaller than the site text (the module leaves the label
   at the site size). */
.pm-obj-massintention #mass_intention .select-area label {
    font-size: 14px;
}

/* Once a field has a value, its label moves to the top-left corner INSIDE the
   field, on the field's own white background (the module put it across the top
   border with a white patch hiding the line). !important: the module's padding is. */
.pm-obj-massintention #mass_intention .select-area .changedSelect,
.pm-obj-massintention #mass_intention .select-area .changedInput {
    top: 6px;
    left: 12px;
    padding: 0 !important;
    font-size: 12px;
    line-height: 1.2;
    background: transparent;
    /* Medium-dark gray once filled, so the value stands out; it is a shade of the
       site's text color (black text → about #595959). The empty label stays black. */
    color: color-mix(in srgb, currentColor 65%, #ffffff);
}

.pm-obj-massintention #mass_intention .select-area label span {
    font-size: inherit;
}

/* Wider fields: the module caps them at 310px, which barely fits the longest
   occasion in English ("For the Wedding Anniversary of") and not the longer
   Portuguese, Spanish or French texts. The line under each title follows. */
.pm-obj-massintention #mass_intention .form-select-area {
    max-width: 440px;
}

.pm-obj-massintention #mass_intention .select-area,
.pm-obj-massintention #mass_intention .select-area select,
.pm-obj-massintention #mass_intention .select-area input {
    max-width: 100%;
}

.pm-obj-massintention #mass_intention form.massIntention fieldset > hr {
    max-width: 440px;
}

/* Step 3 (Offering): each row is a grid of equal columns with the same gap, so
   the 3 fields below (expiration month, year, security code) span exactly the
   same width as the 2 above (amount, card #). The module used fixed widths and
   margins per column, so the rows ended at different places. */
/* The box centers its contents, which shrank the offering area to its fields. */
.pm-obj-massintention #mass_intention .form-offering {
    width: 100%;
}

.pm-obj-massintention #mass_intention .form-offering .flex-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 840px;
    margin: 0 auto 12px;
}

.pm-obj-massintention #mass_intention .form-offering .flex-form:has(> .fx_3) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Stripe: only the amount on its row. */
.pm-obj-massintention #mass_intention .form-offering .flex-form:has(> .fx_2:only-child) {
    grid-template-columns: minmax(0, 414px);
    justify-content: center;
}

.pm-obj-massintention #mass_intention .form-offering .flex-form > .fx_2,
.pm-obj-massintention #mass_intention .form-offering .flex-form > .fx_3 {
    width: auto;
    margin: 0;
}

@media screen and (max-width: 679px) {
    .pm-obj-massintention #mass_intention .form-offering .flex-form,
    .pm-obj-massintention #mass_intention .form-offering .flex-form:has(> .fx_3) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A drop-down's label (shown inside the empty field) keeps clear of the arrow
   on the right, with the same room on the left so it stays centered. */
.pm-obj-massintention #mass_intention .select-area:has(select) label:not(.changedSelect) {
    box-sizing: border-box;
    padding: 0 32px;
}

/* Field labels, typed text and chosen options in the site's text color, like the
   Mass time cards (the module made them light gray #8d8d8d, hard to read for
   older people). */
.pm-obj-massintention #mass_intention .select-area label,
.pm-obj-massintention #mass_intention .select-area select,
.pm-obj-massintention #mass_intention .select-area input,
.pm-obj-massintention #mass_intention .select-area:has(select)::after {
    color: inherit;
}

/* All labels in capitals, like the module writes most of them ("$ Amount" was not). */
.pm-obj-massintention #mass_intention .select-area label {
    text-transform: uppercase;
}

/* Text fields and drop-downs the same height (the Security Code text field was
   taller than the Expiration drop-downs beside it), including "Intention for
   (Name)" (.inputs), which the module made 110px tall. 58px with
   the value a little lower (padding-top), leaving room for the small label in
   the top-left corner. */
.pm-obj-massintention #mass_intention .select-area input,
.pm-obj-massintention #mass_intention .select-area select {
    box-sizing: border-box;
    height: 58px;
    padding-top: 14px;
    padding-bottom: 0;
    line-height: normal;
}

.pm-obj-massintention #mass_intention .aboutMass .select-area.inputs input {
    height: 58px;
    padding: 14px 20px 0;
}

/* Its empty label in the middle like the others (the module put it at the top). */
.pm-obj-massintention #mass_intention .aboutMass .select-area.inputs label:not(.changedInput) {
    align-items: center;
    padding-top: 0;
}

/* Drop-downs (Deceased?, Occasion): the module leaves the browser's own arrow,
   which takes room on the right only, so the centered text — and the open list —
   sat off-center. Own arrow (as on St. Joseph's site) and the same padding on
   both sides. */
.pm-obj-massintention #mass_intention .select-area select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* No side padding: Edge/Chrome draw the open list with the options shifted by
       the select's left padding, so any padding put the list off-center. The drawn
       arrow (::after below) sits over the right edge. */
    padding-left: 0;
    padding-right: 0;
    text-indent: 0;
    text-align: center;
    text-align-last: center;
    background-color: #ffffff;
}

.pm-obj-massintention #mass_intention .select-area select option {
    text-align: center;
}

.pm-obj-massintention #mass_intention .select-area:has(select:not([hidden]))::after {
    content: "\f078";
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: currentColor;
    pointer-events: none;
}

/* Required fields are marked by the * after the label; no red line under them
   (the module draws one under every .select-area; the input border color is
   set in the layer CSS with the Studio "Lines and field borders" color). */
.pm-obj-massintention #mass_intention .select-area {
    border-bottom: 0;
}

/* Step 1 (About the petitioner): the module puts 88px (80px on small screens)
   above the fields and fixes the box at 536px; keep the fields right under the title. */
.pm-obj-massintention #mass_intention form[action*="request_01_petitioner_submit"] .form-select-area {
    margin-top: 0;
}

.pm-obj-massintention #mass_intention form[action*="request_01_petitioner_submit"] fieldset {
    height: auto;
}

@media screen and (max-width: 879px) {
    /* The module forces height 100% / min-height 536px with !important here. */
    .pm-obj-massintention #mass_intention form[action*="request_01_petitioner_submit"] fieldset {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* Step 2 (About the Mass / About the intention): same as step 1 — the module
   pads the Mass area (10px + min-height 110px) and pushes the intention fields
   down 88px; the boxes take the height of their content (the row keeps them equal). */
.pm-obj-massintention #mass_intention .aboutMass #mass_times {
    min-height: 0;
    padding-top: 0;
}

.pm-obj-massintention #mass_intention .aboutMass .form-select-area {
    margin-top: 0;
}

.pm-obj-massintention #mass_intention .aboutMass > fieldset {
    height: auto;
}

@media screen and (max-width: 879px) {
    .pm-obj-massintention #mass_intention .aboutMass > fieldset {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* "Administrative users have the power to add Mass intentions overwriting set
   rules. Please be cautious!" — show_intention_dates.php prints it (p.caution) for
   source=admin, which the calendar also sends for a logged-in user with the
   date/time permission on the WEBSITE. This file loads only on the website, so the
   sentence stays in the CMS (Mass Intentions › New Intention) only. */
.pm-obj-massintention #mass_times p.caution {
    display: none;
}

/*-----------------------------------------------------------  LEGACY GRID   --------------------*/
/* structure.css columns; the Studio .flex has a gap, the legacy one uses margins. */
.pm-obj-massintention #mass_intention .flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.pm-obj-massintention #mass_intention .fx_1 {
    width: calc(100% - 10px);
    margin-bottom: 10px;
}

@media screen and (min-width: 600px) {
    .pm-obj-massintention #mass_intention .fx_2:nth-child(1n) {
        width: calc(100% / 2 - 10px);
        margin: 0 10px 10px 0;
    }
    .pm-obj-massintention #mass_intention .fx_2:nth-child(2n) {
        width: calc(100% / 2 - 10px);
        margin: 0 0 10px 10px;
    }
}

@media screen and (max-width: 599px) {
    .pm-obj-massintention #mass_intention .fx_2 {
        width: 100%;
        margin: 0 0 10px;
    }
}

@media screen and (min-width: 880px) {
    .pm-obj-massintention #mass_intention .fx_3:nth-child(3n + 1),
    .pm-obj-massintention #mass_intention .fx_3:nth-child(3n + 3) {
        width: calc(100% / 3 - 1.25em / 2);
        margin: 0 0 10px;
    }
    .pm-obj-massintention #mass_intention .fx_3:nth-child(3n + 2) {
        width: calc(100% / 3 - 1.25em / 2);
        margin: 0 10px 10px;
    }
}

@media screen and (min-width: 680px) and (max-width: 879px) {
    .pm-obj-massintention #mass_intention .fx_3:nth-child(1n) {
        width: calc(100% / 2 - 10px);
        margin: 0 10px 10px 0;
    }
    .pm-obj-massintention #mass_intention .fx_3:nth-child(2n) {
        margin: 0 0 10px 10px;
    }
}

@media screen and (max-width: 679px) {
    .pm-obj-massintention #mass_intention .fx_3 {
        width: 100%;
        margin: 0 0 10px;
    }
}

/*-----------------------------------------------------------  BUTTONS (layout only)   --------------------*/
/* Look (colors, shape, font) comes from Website › Page Elements › Buttons. */
.pm-obj-massintention #mass_intention .form_buttons {
    gap: 10px;
}

/* The buttons also carry the fx_2 column class, whose margins (above) differ
   between 1st and 2nd child: the row then stretched one button taller than the
   other. Inside the button row the gap does the spacing. */
.pm-obj-massintention #mass_intention .form_buttons > .fx_2:nth-child(n),
.pm-obj-massintention #mass_intention .form_buttons > .fx_3:nth-child(n) {
    margin: 0;
}

@media screen and (max-width: 879px) {
    .pm-obj-massintention #mass_intention .form_buttons .button,
    .pm-obj-massintention #mass_intention .form_buttons a,
    .pm-obj-massintention #mass_intention .form_buttons input[type="submit"] {
        width: 100% !important;
        max-width: none;
    }
}

/*-----------------------------------------------------------  MASS TIMES (cards)   --------------------*/
/* Layout from the module (CAF227A79146/intention/web/mass_intention.css, same as
   St. Joseph's). Its border used var(--gray3), undefined on Studio sites, so the
   whole border declaration was dropped; colors come from the layer CSS (Lines,
   Secondary text, Selected, Form background). */
.pm-obj-massintention #masses dl label,
.pm-obj-massintention #masses dl input:checked + label {
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    padding: 12px 8px 8px; /* room for the "available" badge on the top border */
    font-size: 14px;
    line-height: 1.4;
}

.pm-obj-massintention #masses dl label dt,
.pm-obj-massintention #masses dl label dd {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.pm-obj-massintention #masses dl label dt.time {
    font-weight: 700;
}

/* White card; hover and selected tints and borders come from the layer CSS. */
.pm-obj-massintention #masses dl label {
    background-color: #ffffff;
    color: inherit;
    transition: background-color .15s, box-shadow .15s, border-color .15s;
}

/* Selected: a clean check badge on the top-right corner (the module's was a
   check-circle glyph with uneven padding on the top-left). */
.pm-obj-massintention #masses dl input:checked + label::before {
    content: "\f00c";
    top: -12px;
    right: -12px;
    left: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    z-index: 1;
}

.pm-obj-massintention #masses dl label dd {
    font-size: 13px;
    line-height: 1.6;
}

/*
    STATUS COLOR (admin only) - orange = caution. Staff with the date/time
    permission also see Masses the public cannot choose (outside the deadline
    rules or full); show_intention_dates.php marks them dl.caution. Same signal as
    St. Joseph (.caution { color: orange }) and the CMS (bold orange count).
    !important: the layer CSS colors cards with a more specific selector.
*/
.pm-obj-massintention #masses dl.caution label {
    border-color: #e67e22 !important;
    color: #e67e22 !important;
}

.pm-obj-massintention #masses dl.caution label dd span {
    font-weight: 700;
    color: #e67e22;
}

.pm-obj-massintention #masses dl.caution input:checked + label::before {
    background: #e67e22 !important;
}

/*-----------------------------------------------------------  CALENDAR (request form)   --------------------*/
.pm-obj-massintention #intention_calendar {
    width: 300px;
    max-width: 100%;
    margin: 0 auto 16px;
}

.pm-obj-massintention #intention_calendar .nav_previous {
    display: inline-block;
    float: left;
    padding: 0 0 0 5px;
}

.pm-obj-massintention #intention_calendar .nav_next {
    display: inline-block;
    float: right;
    padding: 0 5px 0 0;
}

.pm-obj-massintention #intention_calendar table.calendar {
    width: 100%;
    border-collapse: collapse;
}

.pm-obj-massintention #intention_calendar table.calendar thead tr th {
    height: 22px;
    font-size: 12px;
}

.pm-obj-massintention #intention_calendar table.calendar tbody tr td {
    position: relative;
    width: calc(100% / 7);
    height: 38px;
    border-width: 1px;
    border-style: solid;
}

.pm-obj-massintention #intention_calendar table.calendar tbody tr td span.calendar_date {
    position: absolute;
    top: 3px;
    left: 3px;
    display: block;
    font-size: 11px;
    text-align: center;
}

.pm-obj-massintention #intention_calendar table.calendar tbody tr td i.fas.fa-times {
    position: absolute;
    top: 19px;
    left: 14px;
    display: block;
    font-size: 12px;
}

.pm-obj-massintention #intention_calendar table.calendar tbody tr td i.fas.fa-check {
    position: absolute;
    top: 19px;
    left: 12px;
    font-size: 15px;
    cursor: pointer;
}

.pm-obj-massintention label.calendar_pick i {
    cursor: pointer;
}

/*
    STATUS COLORS - the one exception to "palette colors only".
    These are signals, not design: they stay the same on every site and are
    not in the Studio.  Red = attention, not available, problem.
    Green = go, available, all is well.
*/
.pm-obj-massintention #intention_calendar table.calendar tbody tr td i.fas.fa-times {
    color: #d32f2f; /* red: date not available */
}

.pm-obj-massintention #intention_calendar table.calendar tbody tr td i.fas.fa-check,
.pm-obj-massintention #intention_note i.fa-check {
    color: #0a8f4a; /* green: date available (also the ✓ in "Click on an available date (✓)") */
}

/*-----------------------------------------------------------  MASS INTENTIONS CALENDAR   --------------------*/
.pm-obj-masscalendar #mass_intentions .intentions-container .intentions-details {
    height: auto;
    max-height: 70vh;
}