/* ==========================================================================
   Mosque Prayer Times Plugin — prayer-times.css
   All visual styling lives here. Safe to override from your child theme.
   Class reference:
     .mpt-daily-block         — wrapper for the daily widget
     .mpt-daily-header        — date header area
     .mpt-gregorian-date      — Gregorian date string
     .mpt-hijri-date          — Hijri date string
     .mpt-daily-list          — <ul> of prayer rows
     .mpt-prayer-item         — <li> for each prayer
     .mpt-prayer-item.mpt-current — active/current prayer highlight
     .mpt-prayer-name         — prayer label (e.g. "Fajr")
     .mpt-prayer-time         — time value (e.g. "04:52")
     .mpt-monthly-wrapper     — outer monthly table wrapper
     .mpt-monthly-title       — month/year heading above table
     .mpt-table-scroll        — horizontal scroll container (mobile)
     .mpt-monthly-table       — <table> element
     .mpt-day-row             — <tr> for each day
     .mpt-day-row.mpt-today   — today's row highlight in monthly table
     .mpt-col-date            — date column
     .mpt-day-num             — day number inside date cell
     .mpt-day-name            — short day name (Mon, Tue…)
     .mpt-col-prayer          — prayer time column (all prayers)
     .mpt-col-fajr / .mpt-col-sunrise / etc. — per-prayer column selectors
     .mpt-error               — error message paragraph
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties — tweak these first before editing rules below
   -------------------------------------------------------------------------- */
:root {
    --mpt-font-family:        inherit;
    --mpt-primary-color:      #005f5b;   /* mosque green */
    --mpt-accent-color:       #f0f7f3;   /* light tint */
    --mpt-text-color:         #222222;
    --mpt-muted-color:        #666666;
    --mpt-border-color:       #dde8e2;
    --mpt-highlight-bg:       #fcb900;   /* current prayer / today row */
    --mpt-highlight-text:     #2f2200;
    --mpt-header-bg:          #005f5b;
    --mpt-header-text:        #ffffff;
    --mpt-row-alt-bg:         #e8f1eb;   /* alternating row tint */
    --mpt-border-radius:      .5em;
    --mpt-cell-padding-v:     0.55rem;
    --mpt-cell-padding-h:     0.85rem;
}

/* --------------------------------------------------------------------------
   Shared resets
   -------------------------------------------------------------------------- */
.mpt-daily-block *,
.mpt-monthly-wrapper * {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Daily block
   -------------------------------------------------------------------------- */
.mpt-daily-block {
    font-family:   var(--mpt-font-family);
    color:         var(--mpt-text-color); 
    border:        1px solid var(--mpt-border-color); 
    border-radius: var(--mpt-border-radius);
    overflow:      hidden;
    margin:        0 auto;
    background: #fff;
}

.home .mpt-daily-block {
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(.5em);
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    rule: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 7px 20px 0px rgba(0, 0, 0, .1);
}

/* Date header */
.mpt-daily-header {
    background: linear-gradient(-120deg, var(--mpt-header-bg) 0%, hsl(from #005f5b calc(h + 0) calc(s + 0) calc(l + 5)) 100%) !important;
    color: var(--mpt-header-text);
    padding: 0.75rem var(--mpt-cell-padding-h);
    display: flex;
    flex-direction: row;
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

.home .mpt-daily-header {
    background: transparent !important;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    margin: 0 var(--space-m);
    flex: 1;
    flex-basis: 30%;
}

.mpt-gregorian-date {
    font-size: calc(var(--h5) * .8);
    font-weight: 600;
}

.mpt-hijri-date {
    font-size: calc(var(--h6) * .8);
    opacity: 0.85;
}

/* Prayer list */
.mpt-daily-list {
    list-style: none;
    margin: 0;
    padding: 0 !important;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: calc(var(--h5) * .9);
	rule: 1px solid rgb(from var(--mpt-header-bg) r g b / 20%);
    border-bottom: 1px solid var(--mpt-border-color);
}

.home .mpt-daily-list {
    background: transparent;
    rule: 1px solid rgba(255, 255, 255, .7);
    border-bottom: none;
}

.mpt-prayer-icon {
	mask: var(--icon-url) center / contain no-repeat;
    background: linear-gradient(-120deg, rgb(from var(--mpt-header-bg) r g b / 70%) 0%, hsl(from #005f5b calc(h + 0) calc(s + 0) calc(l + 5) / 70%) 100%);
    width: 2em;
    height: auto;
    aspect-ratio: 1;
}

.mpt-prayer-text {
    flex-grow: 1;
}

.mpt-prayer-text span {
    display: block;
}

.mpt-prayer-item {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1em var(--mpt-cell-padding-h);
    transition: background 0.2s;
    flex-direction: row-reverse;
    flex-grow: 1;
    gap: .2em 1.5em;
    flex-wrap: wrap;
}

.home .mpt-prayer-item {
    padding: 1.5em 1em;
}

.mpt-prayer-item:last-child {
    border-bottom: none;
}

/* Alternating rows 
.mpt-prayer-item:nth-child(even) {
    background: var(--mpt-row-alt-bg);
}

.home .mpt-prayer-item:nth-child(even) {
    background: hsl(from var(--mpt-row-alt-bg) h s calc(l - 20) / 40% );
}
*/

.mpt-prayer-name {
    font-weight: 600;
	font-size: .9em;
    color: var(--mpt-text-color);
}

.mpt-prayer-time {
    font-variant-numeric: tabular-nums;
    color: var(--mpt-muted-color);
}

/* Current prayer highlight */
.mpt-prayer-item.mpt-current {
    background: var(--mpt-highlight-bg);
}

.home .mpt-prayer-item.mpt-current {
    background: hsl(from var(--mpt-highlight-bg) h s l / 90% );
}

.mpt-prayer-item.mpt-current .mpt-prayer-name,
.mpt-prayer-item.mpt-current .mpt-prayer-time {
    color:       var(--mpt-highlight-text);
    font-weight: 600;
}

@media (max-width: 800px) {

	.home .mpt-daily-block {
		flex-wrap: wrap;	
	}

	.home .mpt-daily-header {
		margin: unset;
	}
	
	.mpt-daily-list {
		flex-wrap: wrap;
	}
	
    .mpt-prayer-item {
        flex-basis: 640px;
        flex-direction: row;
        align-items: center;
		justify-content: flex-start;
		gap: .5em;
	    padding: var(--mpt-cell-padding-v) var(--mpt-cell-padding-h) !important;
    }

	.mpt-prayer-text {
	    display: contents;
	}

	.mpt-prayer-name {
		font-size: 1em;
	}
		
	.mpt-prayer-time {
		margin-left: auto;
	}
}

/* Small indicator dot on active prayer */
/*.mpt-prayer-item.mpt-current .mpt-prayer-name::before {
    content:      '•';
    font-size:    0.5rem;
    margin-right: 0.4rem;
    vertical-align: middle;
    color: var(--mpt-primary-color);
}*/

/* --------------------------------------------------------------------------
   Monthly table
   -------------------------------------------------------------------------- */
.mpt-monthly-wrapper {
    font-family: var(--mpt-font-family);
    color: var(--mpt-text-color);
    margin: 1rem 0;
    border: 1px solid var(--mpt-border-color);
    border-radius: var(--mpt-border-radius);
    overflow: hidden;
}

.mpt-monthly-title {
    font-size:   1.15rem;
    font-weight: 700;
    color:       var(--mpt-primary-color);
    margin:      0 0 0.75rem;
}

/* Horizontal scroll on small screens */
.mpt-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mpt-monthly-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       calc(var(--h5) * .8);
    min-width:       480px;   /* prevents columns from becoming too cramped */
}

/* Header row */
.mpt-monthly-table thead tr {
    background: linear-gradient(-120deg, var(--mpt-header-bg) 0%, hsl(from #005f5b calc(h + 0) calc(s + 0) calc(l + 5)) 100% 100%) !important;
    color:      var(--mpt-header-text);
}

.mpt-monthly-table th {
    padding:    var(--mpt-cell-padding-v) var(--mpt-cell-padding-h);
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
}

.mpt-monthly-table th.mpt-col-date {
    text-align: left;
}

/* Body cells */
.mpt-monthly-table td {
    padding:      var(--mpt-cell-padding-v) var(--mpt-cell-padding-h);
    text-align:   center;
    border-bottom: 1px solid var(--mpt-border-color);
    white-space:  nowrap;
    font-variant-numeric: tabular-nums;
}

.mpt-monthly-table td.mpt-col-date {
    text-align: left;
}

/* Alternating rows */
.mpt-day-row:nth-child(even) {
    background: var(--mpt-row-alt-bg);
}

/* Today row */
.mpt-day-row.mpt-today {
    background: var(--mpt-highlight-bg);
}

.mpt-day-row.mpt-today td {
    color:       var(--mpt-highlight-text);
    font-weight: 600;
}

/* Date cell content */
.mpt-day-num {
    font-weight: 700;
    margin-right: 0.3rem;
}

.mpt-day-name {
    font-size:  0.78rem;
    color:      var(--mpt-muted-color);
}

.mpt-day-row.mpt-today .mpt-day-name {
    color: var(--mpt-highlight-text);
}

/* --------------------------------------------------------------------------
   Error message
   -------------------------------------------------------------------------- */
.mpt-error {
    color:       #a94442;
    background:  #f2dede;
    border:      1px solid #ebccd1;
    border-radius: var(--mpt-border-radius);
    padding:     0.75rem 1rem;
    font-size:   0.9rem;
}

/* --------------------------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .mpt-daily-block {
        max-width: 100%;
    }

    .mpt-prayer-item {
        padding: 0.5rem 0.65rem;
    }

    .mpt-monthly-table th,
    .mpt-monthly-table td {
        padding: 0.4rem 0.5rem;
    }
}

/* ==========================================================================
   Print Button — screen styles
   ========================================================================== */

.mpt-print-button-wrap {
    margin: 0;
}

.mpt-print-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(120deg, var(--mpt-primary-color) 0%, hsl(from #005f5b calc(h + 0) calc(s + 0) calc(l + 5)) 100% 100%) !important;
    color: #ffffff;
    border: none;
    border-radius: var(--mpt-border-radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--mpt-font-family);
}

.mpt-print-button:hover,
.mpt-print-button:focus {
    background: var(--mpt-highlight-text);
    outline: none;
}

.mpt-print-button:active {
    opacity: 0.85;
}

.mpt-print-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

/* Hidden on screen — only visible during print */
#mpt-print-area {
    display: none;
}

/* ==========================================================================
   Print styles — @media print
   A4 portrait. Color headers, clean body.
   ========================================================================== */

@media print {

    /* ---- Page setup ---- */
    @page {
        size: A4 portrait;
        margin: 15mm 12mm;
    }

    /* ---- Hide everything on screen except our print area ---- */
    body>*:not(#mpt-print-area) {
        display: none !important;
    }

    /* ---- Show and reset the print area ---- */
    #mpt-print-area {
        display: block !important;
        max-width: 100%;
        width: 100%;
        font-family: Arial, sans-serif;
        font-size: 10pt;
        color: #111111;
        background: #ffffff;
    }

    /* ---- Header and footer divs from Divi ---- */
    #mpt-print-area .jadwal-salat-header,
    #mpt-print-area .jadwal-salat-footer {
        width: 100%;
        text-align: left;
        padding: 0;
    }

    #mpt-print-area .jadwal-salat-header {
        margin-bottom: 4mm;
        font-size: 8pt;
        color: #555555;
    }

    #mpt-print-area .jadwal-salat-footer {
        margin-top: 4mm;
        font-size: 8pt;
        color: #555555;
    }

    /* ---- Daily block ---- */
    #mpt-print-area .mpt-daily-block {
        max-width: 100%;
        border: 1pt solid var(--mpt-border-color);
        border-radius: 0;
        margin-bottom: 6mm;
        page-break-inside: avoid;
    }

    #mpt-print-area .mpt-daily-header {
        background: var(--mpt-primary-color) !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        padding: 3mm 4mm;
    }

    #mpt-print-area .mpt-daily-list {
        display: flex;
        flex-wrap: wrap;
    }

    #mpt-print-area .mpt-prayer-item {
        width: 33.33%;
        border-bottom: 0.5pt solid var(--mpt-border-color);
        border-right: 0.5pt solid var(--mpt-border-color);
        padding: 2mm 3mm;
    }

    /* ---- Monthly table ---- */
    #mpt-print-area .mpt-monthly-wrapper {
        margin: 0;
    }

    #mpt-print-area .mpt-monthly-title {
        font-size: 12pt;
        font-weight: 700;
        margin-bottom: 3mm;
        color: var(--mpt-primary-color);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #mpt-print-area .mpt-table-scroll {
        overflow: visible;
    }

    #mpt-print-area .mpt-monthly-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 8.5pt;
        min-width: 0;
    }

    #mpt-print-area .mpt-monthly-table thead tr {
        background: var(--mpt-primary-color) !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #mpt-print-area .mpt-monthly-table th,
    #mpt-print-area .mpt-monthly-table td {
        padding: 0.5mm 2mm;
        border: 0.5pt solid #cccccc;
        text-align: center;
        white-space: nowrap;
    }

    #mpt-print-area .mpt-monthly-table th.mpt-col-date,
    #mpt-print-area .mpt-monthly-table td.mpt-col-date {
        text-align: left;
    }

    /* Today row — subtle tint, avoid heavy ink usage */
    #mpt-print-area .mpt-day-row.mpt-today {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-weight: normal !important;
        color: #111111 !important;
    }

    #mpt-print-area .mpt-day-row.mpt-today td {
        color: #111111 !important;
        font-weight: normal !important;
    }

    #mpt-print-area .mpt-day-row.mpt-today .mpt-day-name {
        color: var(--mpt-muted-color);
        font-weight: normal !important;
    }

    /* Alternating rows — very light, keeps readability without heavy ink */
    #mpt-print-area .mpt-day-row:nth-child(even) {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Keep table together — avoid orphan rows at page break if possible */
    #mpt-print-area .mpt-monthly-table tbody tr {
        page-break-inside: avoid;
    }

    .mpt-day-row.mpt-today {
        background: unset;
    }

    .mpt-day-row.mpt-today td {
        color: unset;
        font-weight: inherit;
    }

    /* ---- Hide screen-only elements ---- */
    #mpt-print-area .mpt-print-button-wrap,
    #mpt-print-area .mpt-print-button {
        display: none !important;
    }

    /* Hide everything when print is triggered via the button */
    body.mpt-printing > *:not(#mpt-print-area) {
        display: none !important;
        visibility: hidden !important;
    }

    /* Also suppress common Divi wrappers that survive the above */
    body.mpt-printing #page-container,
    body.mpt-printing #main-content,
    body.mpt-printing .et-l,
    body.mpt-printing header.et-fixed-header,
    body.mpt-printing #et-main-area {
        display: none !important;
        visibility: hidden !important;
    }

    #mpt-print-area {
        display: block !important;
        visibility: visible !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}