/*
 * Styles for the Product Specifications plugin.
 *
 * You can override these styles in your theme or child theme by
 * registering a higher‑priority stylesheet or by copying these rules into
 * your own CSS. Colours and spacing are deliberately separated into
 * custom properties (CSS variables) at the top of this file so you can
 * adjust them easily.
 */

/*
 * Define default colours on the specification wrapper itself rather than on
 * :root. This prevents leakage of CSS variables into the global scope and
 * avoids unintentional overwriting of theme variables. You can override
 * these variables by targeting `.ps-specifications-wrapper` in your own
 * stylesheet.
 */
.ps-specifications-wrapper {
    /* Dark background for the specs container */
    --ps-background: rgba(19, 19, 19, 1);
    /* Colour for labels */
    --ps-label-colour: #ffffff;
    /* Colour for values */
    --ps-value-colour: #ffffff;
    /* Internal border colour (unused but kept for compatibility) */
    --ps-border-colour: #333333;
    /* Colour for headings */
    --ps-heading-colour: #ffffff;
    /* Colour used for the underline separating each specification row */
    --ps-line-colour: #f3c400;
}

/*
 * Grid definition. The user requested exactly three columns with a generous
 * gutter between them. We still provide responsive fallbacks via media
 * queries below, but the base definition reflects the three‑column layout.
 */
.ps-specifications-grid {
    display: grid;
    /* Use two columns by default. This prevents the layout from stretching
     * when specification values are long or numerous. */
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* Make the grid responsive. Use a single column on screens below 900px to ensure
 * readability on mobile devices. */
@media (max-width: 900px) {
    .ps-specifications-grid {
        /* On mobile, disable the grid layout entirely so the lists stack
         * naturally and values wrap cleanly. Removing display:grid prevents
         * unwanted column behavior. */
        display: block;
        /* Ensure no gap is applied between blocks. */
        gap: 0;
    }
}

.ps-specifications-wrapper {
    /* Container styling. These values were provided by the user and should
     * not bleed into the global scope. We still set them explicitly rather
     * than using variables to ensure the desired colours take effect. */
    background-color: rgba(19, 19, 19, 1);
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 5px;
    overflow: hidden;
}

.ps-specifications-title {
    /* Title styling per user specification */
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin-left: 0.25rem;
}

.ps-specifications-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Each list is vertical; items stack in a single column */
    display: block;
}

/* Each specification row functions as a cell in the grid. Use flexbox within
 * each cell to align the label and value and draw a bottom border to mimic
 * the yellow lines from the sample design. */
/*
 * Each specification row is laid out as a simple two‑column grid. The first column
 * contains the label (with a colon added via the ::after pseudo‑element) and
 * the second column contains the value. Using CSS Grid ensures that multi‑line
 * labels and values align neatly, and the border extends the full width of
 * the row. We also add vertical padding to give each row breathing room.
 */
/*
 * Each specification row stacks the label and value vertically. The label
 * appears on its own line followed by the value on the next line. This
 * ensures values never overcrowd the label and provides clear separation
 * between the two. The border bottom extends across the full width.
 */
.ps-specification-row {
    /* Use block layout so label and value flow naturally and wrap when needed. */
    display: block;
    /* Consistent vertical padding across desktop and mobile (6px top and bottom) */
    padding: 6px 0;
    border-bottom: 2px solid var(--ps-line-colour);
}

/*
 * Always display a bottom border on every specification row. Previously we removed
 * the line on the last item in each column at the user's request, but the
 * latest feedback indicates they want the stripe to be present even on the
 * last item. Therefore, the rule that removed the border on the last child
 * has been removed. If you need to restore that behaviour, you can
 * reintroduce a similar selector here.
 */

/* Label styling */
.ps-spec-label {
    /* Label styling per user specification */
    font-weight: 700;
    color: #ffffff;
    /* Display inline so the label shares a line with the value when space allows */
    display: inline;
    /* No extra margin on the right; spacing is handled by the grid */
    margin-right: 0;
    font-size: 16px;
}

/*
 * The colon is now included directly in the markup (added in the PHP
 * template), so no pseudo‑element is needed here.
 */

/* Value styling */
.ps-spec-value {
    /* Value styling per user specification */
    /* Display inline so the value flows next to the label and wraps naturally */
    display: inline;
    color: #ffffff;
    word-break: break-word;
    font-size: 16px;
}

/*
 * No additional responsive adjustments are required for the specification rows
 * since the grid layout and media queries defined above handle the mobile
 * presentation. The `.ps-specification-row` no longer uses flexbox.
 */

/*
 * Override theme list margin on our specification rows. Some themes apply
 * a bottom margin to all `<li>` elements via the selector `:is(ul,ol) li`,
 * which adds unwanted gaps between specification rows. This rule ensures
 * our list items do not inherit that margin.
 */
.ps-specifications-wrapper ul.ps-specifications-list > li {
    margin-bottom: 0;
}