/*
 * Colour palette and helper variables
 *
 * To evoke the vibrancy of Islamic arabesque art while keeping the interface clean and accessible,
 * we define a handful of CSS custom properties. These are used throughout the stylesheet
 * so it is easy to adjust the look and feel in one place. The primary hue is a bright
 * turquoise reminiscent of the tiles found in Andalusian mosques. A rich gold accents
 * call‑to‑action elements. A pale patterned background recalls geometric patterns without
 * distracting from the content.
 */
:root{
  --primary:#009688;
  --primary-dark:#00796b;
  --secondary:#e0a800;
  --bg:#ffffff;
  --pattern:#eef5f5;
  --card-bg:#ffffff;
  --card-border:#f0f0f0;
  --text:#333333;
  --subtle:#666666;
  --tooltip-bg:var(--primary);
  --tooltip-color:#ffffff;
}

*{box-sizing:border-box}
html{line-height:1.5}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif;
  color:var(--text);
  background-color:var(--bg);
  /* Subtle geometric pattern reminiscent of Islamic art */
  background-image:radial-gradient(var(--pattern) 1px, transparent 1px);
  background-size:20px 20px;
}
.container{max-width:960px;margin:0 auto;padding:1rem}
/* Header typography and colours */
header h1{
  margin:.2rem 0 0 0;
  color:var(--primary);
  font-size:2rem;
  line-height:1.2;
}
header .subtle{
  color:var(--subtle);
  margin-top:.2rem;
}
/* Decorative calligraphy positioning */
.calligraphy-header{
  display:block;
  max-width:200px;
  margin:0 auto 1rem;
  opacity:.9;
}
.calligraphy-footer{
  display:block;
  max-width:120px;
  margin:1.2rem auto 0.2rem;
  opacity:.9;
}
.card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:1rem 1.2rem;
  margin:1rem 0;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.grid{display:grid;gap:1rem}.grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.grid.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
label{display:flex;flex-direction:column;gap:.25rem}
label span{
  font-weight:600;
  color:var(--text);
  position:relative;
}
/* Tooltip behaviour for form labels */
label span[data-tooltip]{cursor:help;}
label span[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:125%;
  opacity:0;
  pointer-events:none;
  white-space:normal;
  background:var(--tooltip-bg);
  color:var(--tooltip-color);
  padding:.5rem .7rem;
  border-radius:6px;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  font-size:.75rem;
  line-height:1.3;
  min-width:200px;
  z-index:20;
}
label span[data-tooltip]:hover::after{
  opacity:1;
}

.subtle{color:var(--subtle)}
.small{font-size:.9rem}
input[type=number],select{
  padding:.5rem .6rem;
  border:1px solid #d0d0d0;
  border-radius:8px;
  font-size:1rem;
  background:#fefefe;
  color:var(--text);
}
/* Action buttons */
.actions{display:flex;gap:.6rem;margin-top:.75rem}
button{
  border:0;
  background:var(--primary);
  color:#fff;
  padding:.6rem 1rem;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease-in-out,transform .15s ease-in-out;
}
button:hover:not(:disabled){
  background:var(--primary-dark);
  transform:translateY(-2px);
}
button:active:not(:disabled){
  transform:translateY(0);
}
button.ghost{
  background:#f7f7f7;
  color:var(--text);
  border:1px solid #d9d9d9;
}
button.ghost:hover:not(:disabled){
  background:#ececec;
}
button:disabled{
  opacity:.5;
  cursor:not-allowed;
}
/* Result area */
/*
 * Result container
 * The result area contains both a summary of your zakat due and a detailed
 * breakdown.  It uses a light card-style background with a border and
 * inherits the base font.  White-space is normal so that tables wrap neatly.
 */
.result{
  padding:.5rem .75rem;
  background:#f7fbff;
  border:1px solid #d6e9ff;
  border-radius:8px;
  font-family:inherit;
  white-space:normal;
}

/* Hawl result styling: similar to result area but uses the default font and spacing */
.hawl-result{
  margin-top:0.5rem;
  padding:0.5rem 0.75rem;
  background:#f7fbff;
  border:1px dashed #d6e9ff;
  border-radius:8px;
  font-size:0.9rem;
}
/* Notes list */
.notes{margin:.3rem 0 0 1rem}
/* Footer */
footer{
  padding-bottom:3rem;
  color:var(--subtle);
}

/* Additional styling for the educational section */
details{
  margin-top:0.8rem;
  border:1px solid rgba(0,150,136,.3);
  border-radius:8px;
  padding:0.5rem 0.8rem;
  background:#fafafa;
}
details summary{
  cursor:pointer;
  font-weight:600;
  color:var(--primary);
  list-style:none;
}
details summary::-webkit-details-marker{display:none}
details p{margin-top:0.5rem;line-height:1.5}
.footnotes{margin-top:1rem;font-size:0.8rem}

/*
 * Removed dark mode override to ensure the page maintains a white/light
 * background even when the user prefers a dark colour scheme.  Keeping
 * consistent light colours improves readability and aligns with the
 * user's preference for a white background.
 */

/*
 * Advertising section
 * A distinct card for charity advertisements. The dashed border and
 * pale background draw attention without clashing with the rest of the design.
 */
/*
 * Advertisement card styling
 * The ad section is built as a flexible grid to hold multiple adverts or
 * donation announcements. Each ad item is styled like a card with its
 * own heading, description and call‑to‑action button. Colours are drawn
 * from the secondary palette to subtly set the section apart from the main
 * calculator.
 */
.ad-card{
  text-align:center;
}
/* Container for multiple charity ads */
.charity-ads{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:1rem;
}
/* Individual charity advertisement */
.ad-item{
  flex:1 1 250px;
  border:2px dashed var(--secondary);
  border-radius:10px;
  background:#fffae6;
  padding:1rem;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.ad-item h3{
  margin:.3rem 0;
  color:var(--secondary);
  font-size:1.1rem;
}
.ad-item p{
  margin:.3rem 0 .8rem;
  color:var(--subtle);
  line-height:1.4;
}
/* Donate button inside ads */
.ad-button{
  display:inline-block;
  padding:.5rem 1rem;
  background:var(--secondary);
  color:#fff;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  transition:background .15s ease-in-out, transform .15s ease-in-out;
}
/* On hover, darken the gold slightly; static colours used because CSS variables
 * cannot be darkened directly without a preprocessor. */
.ad-button:hover{
  background:#c79300;
  transform:translateY(-2px);
}
.ad-button:active{
  transform:translateY(0);
}

/*
 * Charity recommendation section styling
 * These rules define a responsive grid of charity cards and basic
 * styling for each card.  The design mirrors the existing card
 * components with subtle borders and accent colours.
 */
.charity-results{
  margin-top:1rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem;
}

.charity-card{
  border:1px solid var(--card-border);
  border-radius:8px;
  padding:1rem;
  background:var(--card-bg);
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
}

.charity-card h3{
  margin-top:0;
  margin-bottom:0.5rem;
  color:var(--primary-dark);
  font-size:1.1rem;
}

.charity-card p{
  margin:0.25rem 0;
  font-size:0.9rem;
  color:var(--text);
  line-height:1.4;
}

.charity-card a{
  color:var(--secondary);
  text-decoration:none;
}

.charity-card a:hover{
  text-decoration:underline;
}

/* Site branding logo styling */
.site-logo{
  display:block;
  margin:0 auto 0.5rem;
  max-width:80px;
  height:auto;
}

/* Main navigation links */
.main-nav{
  margin-top:0.5rem;
  text-align:center;
}

.main-nav a{
  margin:0 0.5rem;
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
}

.main-nav a:hover{
  text-decoration:underline;
}

/* Table styling for the results display */
.result-table{
  width:100%;
  border-collapse:collapse;
}
.result-table th,
.result-table td{
  padding:0.3rem 0.5rem;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--card-border);
}
.result-table th{
  font-weight:600;
  width:50%;
}
/* Zebra stripes improve readability of the breakdown table */
.result-table tbody tr:nth-child(odd){
  background:#f9fbff;
}
/* Emphasise any footer rows (e.g., total due) */
.result-table tfoot td{
  font-weight:700;
  color:var(--primary-dark);
}

/* Summary line for the result box */
.result-summary{
  font-size:1.1rem;
  margin:0 0 0.5rem;
  color:var(--primary-dark);
}

/* Heading for the result breakdown table */
.result-heading{
  margin:0 0 0.4rem;
  font-size:1.1rem;
  color:var(--primary-dark);
}