/* calculator.css
 * Extracted verbatim from v3/snippet-48 - Calculator Display.php
 * (3 inline <style> blocks, concatenated in source order).
 * Not enqueued here -- Task 14/15 wires this into wp_enqueue_style().
 */

            /****************************************************
            * 1) FORM WRAPPER
            *    Limit total width to 800px, center it, 
            *    and allow it to be responsive.
            ****************************************************/
            .form-wrapper {
                max-width: 800px;
                margin: 0 auto;
                width: 100%;
                box-sizing: border-box;
            }

            .calculator-form {
                max-width: 600px;  /* Limit to 800px on larger screens */
                width: 100%;       /* Fill the screen on smaller devices */
                margin: 0 auto;    /* Center horizontally on desktop */
                padding: 1rem;
                box-sizing: border-box;
            }

            /****************************************************
            * 2) TABLE-LIKE LAYOUT
            *    Using display: table, table-row, table-cell 
            *    for each row/column.
            ****************************************************/
            .calculator-table {
                display: table;
                width: 100%;
                /* optional spacing between rows: */
                border-collapse: separate;
                border-spacing: 0 0.5rem; 
            }

            .calc-row {
                display: table-row;
            }
            

            .calc-label,
            .calc-input {
                display: table-cell;
                vertical-align: middle;
                padding: 0.4rem;
            }

            /* The label column is a fixed-ish width 
                so everything lines up. Adjust as needed. */
            .calc-label {
                width: 320px;
                white-space: nowrap;
                font-weight: bold;
                box-sizing: border-box;
                display: flex;           /* or inline-flex */
                align-items: center;     /* vertically center the label and icon */
                gap: 0.3rem;             /* space between the label text and the icon */

            }

            .calc-input {
                width: 100%;
                box-sizing: border-box;
            }

            /* For smaller screens, switch to a stacked layout */
            @media (max-width: 600px) {
                .calculator-table {
                display: block;
                }
                .calc-row {
                display: block;
                margin-bottom: 1rem; /* a bit of space between rows */
                }
                .calc-label {
                    display: flex; /* Maintain label and info button side-by-side */
                    flex-wrap: nowrap; /* Prevent wrapping to a new line */
                    align-items: center; /* Vertically center the label and info button */
                    gap: 0.3rem; /* Space between label text and info button */
                    width: 100%; /* Keep full width for responsiveness */
                    margin-bottom: 0; /* Remove unnecessary margin */
                }
                .calc-input {
                    display: block;
                    width: 100%; /* Keep input fields full-width */
                }
            }

            /****************************************************
            * 3) INPUT STYLES
            ****************************************************/
            .calctable_input {
                width: 100%;
                font-size: 1rem;
                padding: 0.5rem 0.6rem;
                border: 1px solid #ccc;
                border-radius: 0.4rem;
                box-sizing: border-box;
            }
            @media (max-width: 600px) {
                .calctable_input {
                font-size: 1.125rem; /* ~18px for better mobile readability */
                }
            }

            /****************************************************
            * 4) TOOLTIP ICON & FADE-IN TOOLTIP
            ****************************************************/
            .info-icon {
                position: relative;
                display: inline-block;
                margin-left: 0.4rem;
                width: 1.2rem;
                height: 1.2rem;
                border-radius: 50%;
                background-color: #eee;
                color: #333;
                text-align: center;
                line-height: 1.2rem;
                font-size: 0.75rem;
                font-weight: bold;
                cursor: pointer;
            }
            .tooltip-content {
                position: absolute;
                top: 130%; 
                left: 50%; 
                transform: translateX(-50%);
                min-width: 160px;
                max-width: 250px;
                background-color: #333;
                color: #fff;
                padding: 0.6rem;
                border-radius: 0.4rem;
                font-size: 0.875rem;
                line-height: 1.2;
                
                /* crucial for wrapping */
                white-space: normal;           
                overflow-wrap: break-word;     
                /* or word-wrap: break-word; (older syntax) */

                visibility: hidden;
                opacity: 0;
                transition: opacity 0.5s ease-in-out;
                z-index: 9999;
            }
            .tooltip-content::before {
                content: "";
                position: absolute;
                bottom: 100%;
                left: 50%;
                border: 6px solid transparent;
                border-bottom-color: #333;
                transform: translateX(-50%);
            }
            .info-icon:hover .tooltip-content {
                visibility: visible;
                opacity: 1;
            }

            /****************************************************
            * 5) BUTTONS
            ****************************************************/
            /* We'll place both buttons in one "row," 
                with an empty label cell and a single input cell 
                that uses flex to place them side by side. */
                .button-cell {
                    display: flex;
                    justify-content: center; /* Center the buttons */
                    align-items: center; /* Vertically center the buttons */
                    width: 100%; /* Ensure the cell spans the entire width */
                    gap: 1rem; /* Space between buttons */
                    text-align: center; /* Ensure proper alignment */
                }


                .calc-button {
                    background-color: #0077cc;
                    color: #fff;
                    font-size: 1rem;
                    padding: 0.6rem 1rem;
                    border: none;
                    border-radius: 0.4rem;
                    cursor: pointer;
                    text-align: center;
                    min-width: 120px;  /* so it’s not too tiny */
                }
                .calc-button:hover {
                    background-color: #005fa3;
                }
                .clear-button {
                    background-color: #f2f2f2;
                    color: #333;
                    font-size: 1rem;
                    padding: 0.6rem 1rem;
                    border: 1px solid #ccc;
                    border-radius: 0.4rem;
                    cursor: pointer;
                    text-align: center;
                    min-width: 120px;
                }
                .clear-button:hover {
                    background-color: #e0e0e0;
                }
        

        /* Basic grid structure */
        .summary-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;  /* 3 columns */
            column-gap: 1rem;
            row-gap: 0.75rem;
        }

        /* Headers */
        .summary-grid-header {
            font-weight: bold;
            border-bottom: 2px solid #ccc;
            padding: 0.5rem 0;
        }

        /* Regular cells */
        .summary-grid-cell {
            padding: 0.5rem 0;
            border-bottom: 1px solid #eee;
        }

        /* The detail container is hidden by default, 
        toggled by JavaScript */
        .detail-container {
            margin-top: 0.5rem;
            padding: 0.5rem;
            background-color: #f9f9f9;  /* optional highlight */
            border: 1px solid #ccc;
        }

        /* Inside the detail container, you can lay out with flex, or just flow top to bottom */
        .detail-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.25rem;
        }

        .detail-row.separator {
            border-top: 1px solid #ccc;
            margin-top: 0.5rem;
            padding-top: 0.5rem;
        }

        /* The total row styling */
        .total-cell {
            font-weight: bold;
            border-top: 2px solid #999;
            padding-top: 0.75rem;
        }

        /* Basic mobile responsiveness */
        @media (max-width: 768px) {
            .summary-grid {
                grid-template-columns: 1fr 1fr; /* Two columns: Taxable Income and Tax Base */
            }

            /* Hide the "column" headers */
            .summary-grid-header {
                display: none;
            }

            /* Hide the "Actual Income" cells */
            .summary-grid-cell:nth-child(3n + 2) {
                display: none;
            }
			.summary-grid-3col .summary-grid-cell:nth-child(3n){   /* 3, 6, 9 … */
				display:none;
			}
			.summary-grid-2col .summary-grid-cell{
				display:block;     /* make sure no cell is suppressed */
			}

        }
		
		/* === put this *after* the existing mobile rules === */
		@media (max-width: 768px) {

		  /* 1) Payroll only: hide the 3rd (annual) column & its header */
		  .summary-grid-3col .results-annual-cell,
		  .summary-grid-3col .summary-grid-header:nth-of-type(3) {
			display:none;            /* annual column disappears */
		  }

		  /* 2) Ensure the per‑pay column is visible (it was hidden by the
				original `.summary-grid-cell:nth-child(3n+2)` rule) */
		  .summary-grid-3col .results-per-pay-cell { display:block; }

		  /* 3) Leave the 2‑column (tax / RRSP) grid untouched      */
		}

		/* ==========================================================
		   MOBILE  ≤ 768 px
		   ==========================================================*/
		@media (max-width:768px){

		  /* --- TAX & RRSP: keep two columns (label │ annual) -------- */
		  .summary-grid-2col{
			  grid-template-columns: 1fr auto !important;   /*  ← 2‑col */
		  }

		  /* --- PAYROLL: two columns (label │ per‑pay); hide annual -- */
		  .summary-grid-3col{
			  grid-template-columns: 1fr auto !important;   /*  ← 2‑col */
		  }
		  .summary-grid-3col .results-annual-cell{
			  display:none !important;
		  }
		}
		
		.summary-grid-2col hr,
		.summary-grid-3col hr{
			grid-column: 1 / -1;      /* stretch the <hr> over every column   */
			width:100%;
			margin:2rem 0;
		}
		
		.results-per-pay-cell,
		.results-annual-cell{
			white-space:nowrap;       /* keeps $1,234,567 on one line */
		}
		
		
		/* 1 ─ pin each kind of cell to a column  */
		@media (max-width:768px){
		  /* results tables only */
		  .summary-grid-2col .results-label-cell      {grid-column:1 !important;}
		  .summary-grid-2col .results-per-pay-cell,
		  .summary-grid-2col .results-annual-cell     {grid-column:2 !important;}
		}

		/* 2 ─ still hide the annual column on the PAYROLL calculator */
		@media (max-width:768px){
		  .summary-grid-3col .results-annual-cell     {display:none !important;}
		}

		/* 3 ─ let any <hr> inside a grid span the whole row            */
		.summary-grid-2col hr,
		.summary-grid-3col hr                          {grid-column:1/-1;}





		/* 1 – make every <hr> that sits inside a two‑column grid span BOTH columns */
		.summary-grid-2col > hr,
		.summary-grid-2col > .section-separator,
		.summary-grid-2col > .tax-base-separator {
			grid-column: 1 / -1;   /* full width */
		}

		/* 2 – and take it out of the “item counter” so the next real cell
			   goes back to column#1 instead of column#2                 */
		@media (max-width: 768px) {
			.summary-grid-2col > hr,
			.summary-grid-2col > .section-separator,
			.summary-grid-2col > .tax-base-separator {
				display: block;        /* keep the line visible…        */
				margin: 1.25rem 0;     /* …with your preferred spacing  */
				height: 1px;
				background: #999;
				border: 0;

				/* this is the magic line */
				place-self: stretch start;
			}
		}









    

/* Header */
.summary-grid-header {
  font-weight: bold;
  border-bottom: 2px solid #ccc; /* or another style */
  padding-bottom: 0.5rem;
}


/*****************************************************
 * 1) Horizontal Rule / Separator
 *****************************************************/
.tax-base-separator {
  border: none;
  border-top: 2px solid #ccc;
  margin: 2rem 0;
}

/*****************************************************
 * 2) 2-Column vs 3-Column Grids
 *****************************************************/
.summary-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns fill up the width */
  gap: 1rem 0.75rem;
}
.summary-grid-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* three columns */
  gap: 1rem 0.75rem;
}

/*****************************************************
 * 3) Cell Styles 
 *****************************************************/
.results-label-cell {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
  text-align: left; 
}
.results-per-pay-cell {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
  text-align: right;
}
.results-annual-cell {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
  text-align: right;
}

/*****************************************************
 * 4) Total Row 
 *****************************************************/
.total-row {
  font-weight: bold;
  border-top: 2px solid #999;
  padding-top: 0.75rem;
}

/*****************************************************
 * 5) Mobile single-column collapse (optional)
 *****************************************************/
@media (max-width: 768px) {
  .summary-grid-2col,
  .summary-grid-3col {
    grid-template-columns: 1fr; 
  }
}

/*****************************************************
 * 6) Detail Container & rows
 *****************************************************/
.detail-container {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: #f9f9f9;  
  border: 1px solid #ccc;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.detail-row.separator {
  border-top: 1px solid #ccc;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}


/* Give the detail table a slightly smaller font */
.detail-table.small-font {
  font-size: 0.85rem; /* or whatever size you prefer */
}

/* By default, right‐align everything */
.detail-table.small-font th,
.detail-table.small-font td {
  text-align: right;
  vertical-align: top; /* often looks better for numeric data */
}

/* EXCEPT the Range column: left‐align */
.detail-table.small-font td.tax-bracket-col,
.detail-table.small-font th.tax-bracket-col {
  text-align: left;
}

/* Hide Rate and Tax columns on smaller screens */
@media (max-width: 768px) {
  .detail-table.small-font .rate-col,
  .detail-table.small-font .taxable-col {
    display: none; /* This removes those columns entirely on mobile */
  }
}