/*
Theme Name: Indian Taxpayer Voice
Template: twentytwentyfive
Description: Neutral, accessible civic-research theme for Indian Taxpayer Voice.
Version: 0.1.0
Requires at least: 6.7
Text Domain: itv
*/

/* Brand */
.itv-brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--wp--preset--color--navy); }
.itv-brand img { width: 40px; height: 40px; flex: none; }
.itv-brand__name { font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; line-height: 1.1; }
.itv-brand__name span { color: var(--wp--preset--color--teal); }
.itv-footer .itv-brand { color: #fff; }
.itv-footer .itv-brand__name span { color: var(--wp--preset--color--mint); }

/* Header */
.itv-header { border-bottom: 1px solid var(--wp--preset--color--line); background: #fff; position: sticky; top: 0; z-index: 50; }
.itv-header .wp-block-navigation a { font-weight: 600; font-size: .95rem; }
.itv-header .wp-block-navigation a:hover { color: var(--wp--preset--color--teal); }
.admin-bar .itv-header { top: var(--wp-admin--admin-bar--height, 32px); }

/* Hero */
.itv-hero { background:
  radial-gradient(1100px 500px at 85% -10%, rgba(46,196,182,.28), transparent 60%),
  linear-gradient(160deg, #0F3D56 0%, #0B2C3F 100%); }
.itv-hero h1 { color: #fff; max-width: 16ch; }
.itv-hero p { color: #D7E6EC; }
.itv-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem !important; font-weight: 700; }
.itv-hero .itv-eyebrow { color: var(--wp--preset--color--mint) !important; }
.itv-hero .is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.6); }
.itv-hero .is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,.08); }
.itv-assurances { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.itv-assurances li { color: #D7E6EC; font-size: .9rem; }
.itv-assurances li::before { content: "✓"; color: var(--wp--preset--color--mint); font-weight: 800; margin-right: .4rem; }

/* Cards */
.itv-card { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; height: 100%;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.itv-card:hover { border-color: var(--wp--preset--color--mint); box-shadow: 0 10px 30px -18px rgba(15,61,86,.45); transform: translateY(-2px); }
.itv-card h3 a { text-decoration: none; color: inherit; }
.itv-card h3 a::after { content: " →"; color: var(--wp--preset--color--teal); }
.itv-icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 1.35rem;
  background: var(--wp--preset--color--mint-soft); }
.itv-step-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: var(--wp--preset--color--navy); color: #fff; }

/* Statistics */
.itv-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 0; }
.itv-counter { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 1.25rem 1.4rem;
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .35rem; }
.itv-counter dt { color: var(--wp--preset--color--muted); font-size: .92rem; }
.itv-counter dd { margin: 0; font-size: 2.4rem; font-weight: 800; color: var(--wp--preset--color--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.itv-stats-note { color: var(--wp--preset--color--muted); }
.itv-stats-unavailable { padding: 1rem 1.25rem; border-radius: 10px; background: #fff; border: 1px dashed var(--wp--preset--color--line); }
.itv-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.itv-table caption { text-align: left; font-weight: 700; padding-bottom: .5rem; }
.itv-table th, .itv-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--wp--preset--color--line); text-align: left; }
.itv-table thead th { background: var(--wp--preset--color--sand); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.itv-table td:nth-child(n+2) { font-variant-numeric: tabular-nums; }

/* Page title band */
.itv-title-band { background: var(--wp--preset--color--sand); border-bottom: 1px solid var(--wp--preset--color--line); }

/* Draft notice (remove once content is approved) */
.itv-draft-notice { font-size: .85rem !important; background: #FFF7E0; border: 1px solid #F0DCA0; color: #6B5310;
  padding: .55rem .85rem; border-radius: 8px; }

/* Principles strip */
.itv-principles { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; padding: 0; list-style: none; }
.itv-principles li { border: 1px solid var(--wp--preset--color--line); background: #fff; border-radius: 999px; padding: .45rem 1rem; font-weight: 600; font-size: .92rem; }

/* Footer */
.itv-footer a { color: #D7E6EC; text-decoration: none; }
.itv-footer a:hover { color: #fff; text-decoration: underline; }
.itv-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.itv-footer h2 { font-size: .8rem !important; text-transform: uppercase; letter-spacing: .1em; color: var(--wp--preset--color--mint) !important; }

:focus-visible { outline: 3px solid var(--wp--preset--color--mint); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .itv-card { transition: none; } .itv-card:hover { transform: none; } }

/* Layout refinements */
.itv-hero h1 { max-width: none; }
.itv-hero p:not(.itv-eyebrow) { max-width: 62ch; }
.itv-counters { margin-top: 1.25rem; }
.itv-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 599px) {
  .itv-header .wp-block-buttons { display: none; } /* hero carries the CTA on small screens */
  .itv-brand__name { font-size: 1rem; }
}

/* Tagline under the wordmark */
.itv-brand__text { display: flex; flex-direction: column; gap: .15rem; }
.itv-brand__tagline { font-size: .78rem; font-weight: 600; color: var(--wp--preset--color--muted); letter-spacing: .01em; line-height: 1.2; }
.itv-footer .itv-brand__tagline { color: #A9C2CE; }
.itv-brand img { width: 44px; height: 44px; }

/* Responsive: tables */
.itv-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }   /* relative: keeps absolutely positioned .itv-sr-only text inside the scroll box */
@media (max-width: 480px) {
  .itv-table { font-size: .9rem; }
  .itv-table th, .itv-table td { padding: .5rem .5rem; }
  .itv-table thead th { font-size: .75rem; letter-spacing: .03em; }
}
.itv-stats-note small { font-size: .85rem; }

/* Responsive: mobile menu overlay */
.itv-nav-cta { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem clamp(1rem, 6vw, 2rem) 2rem !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding-top: 2.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { border-bottom: 1px solid var(--wp--preset--color--line); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; padding: .95rem 0 !important; font-size: 1.15rem; font-weight: 700; color: var(--wp--preset--color--navy); }
.wp-block-navigation__responsive-container.is-menu-open .itv-nav-cta { display: block !important; border-bottom: 0; margin-top: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .itv-nav-cta .wp-block-navigation-item__content {
  text-align: center; background: var(--wp--preset--color--teal); color: #fff; border-radius: 999px; padding: .9rem 1.5rem !important; }

/* Responsive: footer */
.itv-footer h2 { margin-bottom: .75rem !important; }
@media (max-width: 781px) { .itv-footer .wp-block-columns { gap: 2rem; } }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.itv-nav-cta) .wp-block-navigation-item__content { text-align: left; width: 100%; }
/* Whole card is the tap target for its heading link. */
.itv-card { position: relative; }
.itv-card h3 a { display: inline-block; min-height: 24px; padding: .2rem 0; line-height: 1.3; }
.itv-card h3 a::before { content: ""; position: absolute; inset: 0; border-radius: 14px; }

/* Tile-grid state/UT map ([itv_state_map]): 9 x 7 grid of equal squares. */
.itv-tilemap-figure { margin: 0 0 1.5rem; }
.itv-tilemap-figure figcaption { color: var(--wp--preset--color--muted); font-size: .92rem; margin-bottom: .75rem; }
.itv-tilemap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: clamp(2px, .6vw, 6px); max-width: 640px; }
.itv-tile { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(18, 35, 46, .45); border-radius: 6px; font-size: clamp(12px, 2.4vw, 15px); line-height: 1.1;
  font-variant-numeric: tabular-nums; cursor: default; }
.itv-tile__code { font-weight: 800; }
.itv-tile__value { font-size: .85em; }
.itv-tile--level1 { background: #E2F3F1; color: #12232E; }
.itv-tile--level2 { background: #A9DED6; color: #12232E; }
.itv-tile--level3 { background: #5FBFB3; color: #12232E; }
.itv-tile--level4 { background: #167A73; color: #fff; }
.itv-tile--level5 { background: #0F3D56; color: #fff; }
.itv-tile--none { background: #fff; color: #12232E; border-style: dashed; }
.itv-tile--suppressed { color: #12232E; background: repeating-linear-gradient(135deg, #EEF1F3 0 5px, #D5DDE2 5px 7px); }
.itv-tile:focus-visible { outline: 3px solid #2EC4B6; outline-offset: 2px; z-index: 2; }
/* Tooltip for mouse and keyboard users; screen readers get the same text from .itv-sr-only. */
.itv-tile:hover::after, .itv-tile:focus-visible::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%); width: max-content; max-width: 220px; padding: .4rem .6rem; border-radius: 6px; background: #12232E; color: #fff;
  font-size: 13px; font-weight: 400; line-height: 1.35; text-align: left; z-index: 3; pointer-events: none; }
.itv-tilemap-legend { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9rem; }
.itv-tilemap-legend li { display: flex; align-items: center; gap: .3rem; }
.itv-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(18, 35, 46, .45); }
.itv-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .itv-tile__value { display: none; } }

/* Heat maps ([itv_heatmap]): a table whose cells are shaded by percentage. */
.itv-heatmap { font-size: .85rem; }
.itv-heatmap thead th { text-transform: none; letter-spacing: 0; vertical-align: bottom; }
.itv-heatmap td.itv-heat { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; border: 2px solid #fff; min-width: 3.3rem; padding: .5rem .35rem; }
.itv-heatmap td.itv-heat--none { background: #fff; color: #56656F; font-weight: 400; }
.itv-heatmap tbody th { font-weight: 600; min-width: 7rem; }
.itv-heatmap thead th, .itv-heatmap td:nth-child(2) { padding-left: .45rem; padding-right: .45rem; }

/* Responses over time ([itv_trends]): a bar behind each weekly figure. */
.itv-trends .itv-trend-cell { position: relative; min-width: 12rem; font-variant-numeric: tabular-nums; }
.itv-bar { display: inline-block; height: .8em; margin-right: .5rem; vertical-align: middle; border-radius: 3px; background: #167A73; }   /* width: up to 70% of the cell, proportional */

/* Heat-map filters ([itv_heatmaps]) */
.itv-heatmap-filters { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 0 0 1rem; }
.itv-heatmap-filters label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .92rem; }
.itv-heatmap-filters select { font: inherit; font-weight: 400; min-height: 44px; padding: .4rem 2rem .4rem .75rem; border: 1px solid #7A8C97; border-radius: 8px; background: #fff; color: #12232E; max-width: 100%; }
.itv-heatmap-filters select:focus-visible { outline: 3px solid #2EC4B6; outline-offset: 2px; }
.itv-heatmap-section h3 { margin: 1.25rem 0 .5rem; }
.itv-heatmap .itv-heat--focus { box-shadow: inset 0 0 0 3px #12232E; }
.itv-heatmap thead th.itv-heat--focus { box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }

/* WhatsApp share button ([itv_share]): dark WhatsApp green, white text (contrast 5.9:1; hover 7.6:1). */
.itv-share { margin: 1rem 0; }
.itv-share__whatsapp { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px;
  background: #0E7340; color: #fff; font-weight: 700; text-decoration: none; }
.itv-share__whatsapp:hover { background: #0B5C33; color: #fff; }
.itv-share__whatsapp:focus-visible { outline: 3px solid #2EC4B6; outline-offset: 2px; }