/* Honk Front-End Styles - SCOPED FOR WORDPRESS */
/* Self-hosted fonts (GDPR compliant) + scoped CSS rules */
/* Title, button, and heading colors: #363636 (darker gray) */
/* All styles scoped to .honk-app container */
/* Cache busting: Automatic via file modification time */

/* Self-Hosted Inter Font - No external requests (GDPR compliant) */
/* Inter Regular (400) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
}

/* Inter Italic (400) */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-v20-latin-italic.woff2') format('woff2');
}

/* Inter Semi-Bold (600) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-v20-latin-600.woff2') format('woff2');
}

/* Inter Bold (700) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-v20-latin-700.woff2') format('woff2');
}

.honk-app {
  /* Defensive positioning - Override theme positioning to prevent conflicts */
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  max-width: none !important;
  width: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  
  /* Root-level variables scoped to container */
  --gap:12px; --radius:14px; --border:#d9d9d9; --muted:#6b7280; --bg:#ffffff; --ink:#111827; --ink-2:#374151; --accent:#84cc16; --shadow:0 8px 28px rgba(0,0,0,.06);
  --green:#22c55e; --green-700:#16a34a;
  --options-bg:#f8fafc; --options-border:#e2e8f0;
  --blue:#60a5fa; --blue-hover:#3b82f6;
  
  /* Base container styles (was body) */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color:var(--ink);
  background:linear-gradient(180deg,#f8fafc 0,#ffffff 140px) !important; /* Force gradient */
  padding:24px 16px;
  box-sizing:border-box;
  min-height:400px;
}

/* Mobile: Remove horizontal padding */
@media (max-width:992px){
  .honk-app{
    padding:24px 8px !important;
    overflow-x: hidden !important;
  }
}

.honk-app *{box-sizing:border-box}

.honk-app .honk-wrap{
  max-width:1200px; 
  margin:0 auto; 
  padding:0;
  background:transparent !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Title - H1 tag with card h3 font styling + minimum height */
.honk-app .title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:4px 0 10px;
  min-height:80px;
  line-height:1.1;
  padding-top:5px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:1.3em;
  font-weight:700;
  letter-spacing:.1px;
  color: #363636;
}

/* Title icon - DOUBLED to 60px */
.honk-app .title-icon{
  width:60px;
  height:60px;
  margin-right:-7px;
  display:inline-block;
  vertical-align:middle;
  color:transparent;
}

/* Firefox fix - prevent ::before pseudo-element from showing -moz-alt-content */
.honk-app .title-icon::before,
.honk-app .title-icon::after{
  content:none !important;
  display:none !important;
}

.honk-app .sub{margin:0 0 0 16px; color:var(--ink-2); font-size:14px;}

/* Help toggle button */
.honk-app .help-toggle{
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.2s ease;
  margin-left:8px;
  margin-right:17px;
  flex-shrink:0;
}
.honk-app .help-toggle:hover{
  transform:scale(1.1);
}
.honk-app .help-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  opacity:0.9;
}

/* Help panel (collapsible) */
.honk-app .help-panel{
  background:#d1ecf1;
  border:1px solid #bee5eb;
  border-radius:var(--radius);
  padding:20px;
  margin:0 0 12px;
  box-shadow:var(--shadow);
}
.honk-app .help-content h2{
  margin:0 0 16px;
  font-size:18px;
  font-weight:700;
  color:#0c5460;
}
.honk-app .help-columns{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:24px !important;
  width:100% !important;
  box-sizing:border-box !important;
}
/* Hide WordPress wpautop-generated P tags that break grid layout */
.honk-app .help-columns > p {
  display:none !important;
}
/* Reset child divs to prevent theme interference - MUST contain their children */
.honk-app .help-columns > div {
  display:block !important;
  contain:layout !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  float:none !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible !important;
  flex:none !important;
  grid-column:auto !important;
  grid-row:auto !important;
  isolation:isolate !important;
}
.honk-app .help-columns p{
  margin:0 0 12px;
  color:#0c5460;
  line-height:1.6;
  font-size:14px;
}
.honk-app .help-columns p:last-child{
  margin-bottom:0;
}
.honk-app .help-columns strong{
  font-weight:700;
}
.honk-app .help-columns ul,
.honk-app .help-columns ol{
  display:block !important;
  margin:0 !important;
  padding-left:24px !important;
  padding-right:0 !important;
  color:#0c5460 !important;
  line-height:1.6 !important;
  font-size:14px !important;
  list-style-position:outside !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  float:none !important;
}
.honk-app .help-columns ul{
  list-style-type:disc !important;
}
.honk-app .help-columns ol{
  list-style-type:decimal !important;
}
.honk-app .help-columns li{
  display:list-item !important;
  margin-bottom:1.2em !important;
  visibility:visible !important;
  opacity:1 !important;
}
.honk-app .help-columns li:last-child{
  margin-bottom:0 !important;
}
.honk-app .help-columns a{
  color:#0c5460;
  text-decoration:underline;
}
.honk-app .help-columns a:hover{
  color:#084c59;
  text-decoration:none;
}

/* Mobile responsive for help panel */
@media (max-width:992px){
  .honk-app .help-columns{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .honk-app .help-icon{
    width:20px;
    height:20px;
  }
  .honk-app .bar{
    flex-wrap:wrap;
    gap:12px;
  }
  .honk-app .title{
    order:1;
    flex-basis:100%;
  }
  .honk-app .dropdown-help-wrapper{
    order:2;
    flex:1 1 100%;
    width:100%;
  }
  .honk-app .sub{
    order:3;
    flex-basis:100%;
  }

  /* Override help button desktop styles for mobile */
  .honk-app .help-toggle{
    margin-left:0 !important;
    width:28px !important;
    height:28px !important;
    padding:4px;
  }
  .honk-app .bar select{
    max-width:100%;
    min-width:0;
  }
}

/* Top dropdown bar */
.honk-app .bar{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 12px;
  padding:0 10px;
  background:#fff !important;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
/* Wrapper to keep dropdown and help button together */
.honk-app .dropdown-help-wrapper{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
}

.honk-app .select-wrap{
  position:relative;
  display:inline-block;
  flex:1 1 auto;
  max-width:500px;
  min-width:0;
}
.honk-app .bar select{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  font:inherit; color:#363636; background:#f5fde2;
  font-weight:700;
  border:1px solid var(--border); border-radius:10px;
  padding:2px 38px 2px 12px;
  background-image:none !important;
  cursor:pointer;
  width:100%;
  min-width:0;
  box-shadow:inset 0 2px 2px rgba(0,0,0,0.12);
}
.honk-app .bar select::-ms-expand {
  display: none; /* Hide arrow in IE10/11 */
}
.honk-app .select-arrow{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:#475569; font-size:24px; line-height:1;
}

/* Panels */
.honk-app .panels{
  display:grid !important;
  grid-template-columns: minmax(280px, 400px) 1fr !important;
  gap: var(--gap) !important;
  width:100% !important;
  box-sizing:border-box !important;
  margin-bottom:0 !important;
  padding:0 !important;
}
@media (max-width:992px){
  .honk-app .panels{ grid-template-columns:1fr !important; gap:7px !important; }
}

.honk-app .panel{
  background:var(--bg) !important;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:0 !important;
}

/* Panels need relative positioning for options button */
.honk-app .panel.left,
.honk-app .panel.data{
  position:relative;
}

/* LEFT: Buttons list */
.honk-app .left{ padding:12px !important; }

.honk-app #honk-buttons{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
  /* Prevent flash of unstyled content */
  visibility: hidden;
  animation: fadeInButtons 0.1s ease-in 0.05s forwards;
}

@keyframes fadeInButtons {
  from { visibility: hidden; opacity: 0; }
  to { visibility: visible; opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobile: 2 buttons per row */
@media (max-width:992px){
  .honk-app .left{
    padding:6px !important;
  }
  .honk-app #honk-buttons{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* CONVEX BUTTON EFFECT */
.honk-app .btn{
  display:inline-flex; align-items:center; justify-content:flex-start;
  gap:10px;
  text-align:left; white-space:normal;
  border:1px solid #cbd5e1;
  border-bottom:2px solid #94a3b8;
  border-radius:10px;
  background:linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  color:#363636 !important; cursor:pointer;
  padding:10px 12px;
  line-height:1.25;
  min-height:52px;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select:none;
  font-family: 'Inter', Arial, Helvetica, sans-serif !important;
  text-transform:none !important;
  letter-spacing:0.03em !important;
  font-size:17px !important;
  font-weight:700 !important;
}

/* Center text for Who to Contact button (no icon) */
.honk-app .who-to-contact-btn{
  justify-content:center;
  text-align:center;
  padding-left:27px;
  padding-right:27px;
  font-size:16px !important;
  min-height:37px;
}
/* Center text for Make the call button with equal padding */
.honk-app .make-call-btn{
  justify-content:center;
  text-align:center;
  padding:10px;
  min-height:37px;
  font-size:16px !important;
}
.honk-app .btn:hover{
  background:linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  transform:translateY(-1px);
  box-shadow:
    0 4px 6px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);
  border-color:#94a3b8;
  border-bottom-color:#64748b;
  color:#363636 !important;
}
.honk-app .btn[aria-pressed="true"]{
  background:linear-gradient(180deg, #f7fee7 0%, #d9f99d 100%);
  border-color:#cbd5e1;
  border-bottom-color:#94a3b8;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.4);
  color:#363636 !important;
}

/* Force button text color on ALL button states - override theme styles */
.honk-app .btn,
.honk-app .btn:hover,
.honk-app .btn:focus,
.honk-app .btn:active,
.honk-app .btn[aria-pressed="true"],
.honk-app .btn[aria-pressed="true"]:hover,
.honk-app .btn[aria-pressed="true"]:focus {
  color: #363636 !important;
}

/* Button icons */
.honk-app .btn .icon{
  flex:0 0 auto;
  width:28.6px; height:28.6px;
  object-fit:contain; opacity:.95;
  transition: transform .2s ease;
}
.honk-app .btn:hover .icon{
  transform: scale(1.05);
}

@media (max-width:992px){
  .honk-app .btn{ min-height:48px; padding:10px 12px; font-size:15px !important; }
  .honk-app .btn .icon{ width:25.2px; height:25.2px; }
  .honk-app .make-call-btn{ font-size:14px !important; }
  .honk-app .who-to-contact-btn{ font-size:14px !important; }
  .honk-app .card .option-btn{ font-size:13px !important; }
}

/* RIGHT: Content */
.honk-app .data{ padding:16px !important; min-height:340px; }
.honk-app .divider{ height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); margin:10px 0; }

.honk-app .honk-content{ display:grid; gap:10px; }
.honk-app .card{
  border:none;
  border-radius:12px;
  padding:9px 10px 10px 10px;
  background:transparent !important;
  position:relative;
  overflow-wrap: break-word; /* Break long words */
  word-wrap: break-word; /* Legacy support */
  word-break: break-word; /* Force break on long words */
  max-width: 100%; /* Never exceed container */
  overflow-x: hidden; /* Hide horizontal overflow */
}

/* Enforce Inter font on all content - override inline styles from paste */
.honk-app .card-body,
.honk-app .card-body *,
.honk-app .card p,
.honk-app .card p *,
.honk-app .card div,
.honk-app .card div *,
.honk-app .card span,
.honk-app .card li,
.honk-app .card strong,
.honk-app .card em,
.honk-app .card b,
.honk-app .card i {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Heading styles in content cards */
.honk-app .card-body h1,
.honk-app .card-body h2,
.honk-app .card-body h3,
.honk-app .card-body h4,
.honk-app .card-body h5,
.honk-app .card-body h6 {
  font-weight: 700;
  margin: 1em 0 0.5em 0;
  line-height: 1.3;
  color: #363636;
}

.honk-app .card-body h1:first-child,
.honk-app .card-body h2:first-child,
.honk-app .card-body h3:first-child,
.honk-app .card-body h4:first-child,
.honk-app .card-body h5:first-child,
.honk-app .card-body h6:first-child {
  margin-top: 0;
}

.honk-app .card-body h1 { font-size: 1.75em; }
.honk-app .card-body h2 { font-size: 1.5em; }
.honk-app .card-body h3 { font-size: 1.3em; }
.honk-app .card-body h4 { font-size: 1.15em; }
.honk-app .card-body h5 { font-size: 1.05em; }
.honk-app .card-body h6 { font-size: 1em; font-weight: 600; }

/* Link styling in content cards */
.honk-app .card-body a {
  color: #0054a6;
  text-decoration: underline;
  overflow-wrap: break-word; /* Break long URLs */
  word-break: break-all; /* Force break on URLs if needed */
}

.honk-app .card-body a:hover {
  color: #003d79;
}

/* Mobile overflow prevention - ensure all content wraps properly */
.honk-app .card-body,
.honk-app .card-body *,
.honk-app .card-body img,
.honk-app .card-body table,
.honk-app .card-body pre,
.honk-app .card-body code {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure images are responsive */
.honk-app .card-body img {
  height: auto !important;
  display: block;
}

/* Ensure tables don't overflow on mobile */
.honk-app .card-body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Force long unbreakable text to wrap */
.honk-app .card-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Horizontal rule spacing in content cards */
.honk-app .card-body hr {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  border: none !important;
  border-top: 1px solid #d4d4d4 !important;
}

/* Paragraph spacing in category content - matches admin editor exactly */
.honk-app .card p,
.honk-app .card-body > div {
  margin: 0 !important;
  padding-bottom: 1.0em !important;
}

.honk-app .card p:last-child,
.honk-app .card-body > div:last-child {
  padding-bottom: 0 !important;
}

/* List container spacing - matches admin editor */
.honk-app .card-body > ul,
.honk-app .card-body > ol {
  margin: 0 0 1.0em 0 !important;
}

.honk-app .card-body > ul:last-child,
.honk-app .card-body > ol:last-child {
  margin-bottom: 0 !important;
}

/* List item spacing in category content - matches admin editor */
.honk-app .card-body ul li,
.honk-app .card-body ol li {
  margin-bottom: 0.4em !important;
}

.honk-app .card-body ul li:last-child,
.honk-app .card-body ol li:last-child {
  margin-bottom: 0 !important;
}
.honk-app .card h3{
  margin:3px 0 6px !important;
  padding:0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size:17px !important;
  font-weight:700 !important;
  background:none !important;
  border:none !important;
  border-bottom:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  color: #363636 !important;
}
.honk-app .meta{ color:var(--muted); font-size:13px; margin:0 0 6px }

.honk-app .card-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin:0 0 6px !important;
  padding:0 !important;
  background:none !important;
  background-color:transparent !important;
  border:none !important;
  border-bottom:none !important;
  border-top:none !important;
  border-radius:0 !important;
}

.honk-app .highlighter-toggle{
  border:2px solid transparent;
  background:transparent;
  padding:2px;
  cursor:pointer;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: all .15s ease;
  position:relative;
}
.honk-app .highlighter-toggle:hover{
  background:rgba(255,235,59,0.2);
  transform: scale(1.1);
}
.honk-app .highlighter-toggle.active{
  background:rgba(255,235,59,0.6);
  border-color:var(--green);
}

/* Tooltip on hover BEFORE clicking - desktop only */
@media (min-width:901px){
  .honk-app .highlighter-toggle:not(.active):hover::after{
    content: "Drag right to high-\Alight, drag left to undo";
    position:absolute;
    right:calc(100% + 8px);
    top:50%;
    transform:translateY(-50%);
    background:#d1d5db;
    color:#374151;
    padding:8px 12px;
    border-radius:6px;
    font-size:13px;
    white-space:pre-line;
    pointer-events:none;
    z-index:1000;
    line-height:1.4;
    text-align:center;
    width:250px;
    box-sizing:border-box;
  }
  .honk-app .highlighter-toggle:not(.active):hover::before{
    content:"";
    position:absolute;
    right:calc(100% + 2px);
    top:50%;
    transform:translateY(-50%);
    border:6px solid transparent;
    border-left-color:#d1d5db;
    pointer-events:none;
    z-index:1000;
  }
}
.honk-app .highlighter-icon{
  width:20px;
  height:20px;
  object-fit:contain;
  opacity:0.9;
}

.honk-app mark.appetizer-highlight{
  background-color:yellow;
  padding:0 1px;
}

/* Notes */
.honk-app .notes-box{
  width:100%;
  min-height:160px;
  resize:vertical;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  font:inherit;
  line-height:1.45;
  color:var(--ink);
  background:#fff !important;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.honk-app .notes-box:focus{ 
  border-color:#94a3b8; 
  box-shadow:0 0 0 3px rgba(132,204,22,.12); 
}

.honk-app .notes-actions{
  margin-top:12px;
  display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap;
}

.honk-app .notes-hint{
  color:var(--muted);
  font-size:12px;
  width:100%;
  margin-top:12px;
  text-align:center;
}

/* Download notes button icon - match Options panel size */
.honk-app .notes-actions .option-btn .btn-icon{
  font-size:14px;
}

/* COLLAPSIBLE OPTIONS BAR */
.honk-app .options-bar{
  margin:12px 0 12px 0 !important;
  position:relative;
  background:transparent !important;
  border:none;
  border-radius:0;
  box-shadow:none;
  min-height:0;
  transition:all .3s ease;
}

/* Hide mobile button on desktop */
.honk-app .options-toggle-mobile{
  display:none !important;
}

/* OPTIONS TOGGLE BUTTON - SQUARE, FIXED LEFT POSITION */
.honk-app .options-toggle{
  position:absolute;
  left:21px;
  bottom:25px;
  appearance:none;
  border:1px solid #cbd5e1;
  border-bottom:2px solid #94a3b8;
  border-radius:10px;
  background:linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  color:#363636;
  cursor:pointer;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.5);
  z-index:10;
  width:38px;
  height:38px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.honk-app .options-toggle:hover{
  background:linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color:#94a3b8;
  border-bottom-color:#64748b;
  transform:translateY(-1px);
  box-shadow:
    0 4px 6px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.honk-app .options-toggle:active{
  background:linear-gradient(180deg, #e0f2fe 0%, #bfdbfe 100%);
  border-color:#64748b;
  border-bottom-color:#475569;
}

/* OPTIONS ICON */
.honk-app .options-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  opacity:0.9;
  transition: transform .2s ease;
}
.honk-app .options-toggle:hover .options-icon{
  transform: scale(1.05);
  opacity:1;
}

/* Hide any text/arrow inside button */
.honk-app .options-toggle .arrow{
  display:none;
}

.honk-app .options-panel{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:32px !important;
  padding:16px 24px !important;
  transition:all .3s ease;
  background:var(--bg) !important;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  align-items:flex-start !important;
  justify-content:center !important;
  width:100% !important;
  box-sizing:border-box !important;
}

.honk-app .options-panel[hidden]{
  display:none !important;
}

.honk-app .options-section{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  align-items:center !important;
  flex:0 0 auto !important;
}

.honk-app .section-title{
  font-size:16px !important;
  font-weight:600 !important;
  color:var(--ink) !important;
  letter-spacing:0 !important;
  margin-bottom:4px !important;
  text-align:center !important;
  width:100% !important;
  text-transform:none !important;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.honk-app .section-controls{
  display:flex !important;
  flex-direction:row !important;
  gap:8px !important;
  align-items:center !important;
  width:auto !important;
  flex-wrap:nowrap !important;
}

.honk-app .option-checkbox{
  display:inline-flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  font-style:normal !important;
  font-variant:normal !important;
  color:#363636 !important;
  padding:6px 12px;
  border-radius:10px;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select:none;
  white-space:nowrap;
  background:linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border:1px solid #cbd5e1;
  border-bottom:2px solid #94a3b8;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.5);
  height:37px;
  line-height:1.25 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
}
.honk-app .option-checkbox span{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  font-style:normal !important;
  font-variant:normal !important;
  line-height:1.25 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}
.honk-app .option-checkbox:hover{
  background:linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  transform:translateY(-1px);
  box-shadow:
    0 4px 6px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);
  border-color:#94a3b8;
  border-bottom-color:#64748b;
  color:#363636 !important;
}
.honk-app .option-checkbox input[type="checkbox"]{
  width:16px;
  height:16px;
  cursor:pointer;
}

.honk-app .option-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  white-space:nowrap;
  border:1px solid #cbd5e1;
  border-bottom:2px solid #94a3b8;
  border-radius:10px;
  background:linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  color:#363636 !important;
  cursor:pointer;
  padding:6px 22px 6px 12px;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  font-style:normal !important;
  font-variant:normal !important;
  line-height:1.25 !important;
  height:37px;
  min-width:147px;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select:none;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.5);
  text-transform:none !important;
  letter-spacing:normal !important;
}
.honk-app .option-btn:hover{
  background:linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  transform:translateY(-1px);
  box-shadow:
    0 4px 6px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);
  border-color:#94a3b8;
  border-bottom-color:#64748b;
  color:#363636 !important;
}

/* Download notes button in Notes panel - 13px to match Options panel */
.honk-app .card .option-btn{
  font-size:13px !important;
}

/* Make icons in option buttons properly sized */
.honk-app .option-btn .btn-icon{
  font-size:16px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Download/Restore arrows - smaller */
.honk-app #exportUserDataBtn .btn-icon,
.honk-app #importUserDataBtn .btn-icon{
  font-size:14px;
}

/* Reset Clear Highlights icon to normal size */
.honk-app #clearHighlightsBtn .btn-icon{
  font-size:13px;
}

.honk-app .save-note{
  font-size:11px;
  color:var(--muted);
  padding:0;
  margin-top:4px;
  text-align:center;
  width:100%;
}

/* Medium screens */
@media (max-width:1150px){
  .honk-app .options-panel{
    gap:12px 10px !important;
    padding:16px 20px !important;
  }
}

/* Tablet breakpoint: 1199px to 993px */
@media (max-width:1199px) and (min-width:993px){
  .honk-app{
    padding:24px 8px !important; /* Minimal side margins */
    overflow-y:scroll; /* Anti-shimmy */
  }

  .honk-app .bar{
    flex-wrap:wrap;
    gap:8px;
  }

  /* Make left panel narrower - max 30% width */
  .honk-app .panels{
    grid-template-columns:30% 1fr !important;
  }

  .honk-app .title{
    order:1;
    flex-shrink:0;
  }

  .honk-app .sub{
    order:2;
    flex:1 1 auto;
    margin:0 16px;
    text-align:right;
  }

  .honk-app .dropdown-help-wrapper{
    order:3;
    flex:1 1 100%;
    width:100%;
    justify-content:center;
    margin-top:-15px;
    margin-bottom:15px;
  }

  /* Single column buttons when panels are side-by-side */
  .honk-app #honk-buttons{
    grid-template-columns:1fr !important;
  }

  /* Allow options panel button pairs to wrap at this breakpoint */
  .honk-app .options-panel{
    flex-wrap:wrap !important;
  }
}

/* Mobile responsive - Single breakpoint at 992px */
@media (max-width:992px){
  .honk-app{
    padding:24px 8px !important;
  }

  .honk-app .sub{
    display:none !important; /* Hide subtitle text on mobile */
  }

  .honk-app .panels{
    grid-template-columns:1fr !important; /* Stack panels vertically */
  }

  .honk-app #honk-buttons{
    grid-template-columns: repeat(2, 1fr) !important; /* Always 2 columns on mobile */
  }

  .honk-app .left{
    padding:12px;
  }

  /* Reduce spacing between major sections in mobile */
  .honk-app .bar{
    margin-bottom:7px !important;
  }

  .honk-app .help-panel{
    margin-bottom:7px !important;
  }

  .honk-app .options-bar{
    min-height:0;
    margin:7px 0 7px 0 !important;
  }

  /* Hide desktop button, show mobile button */
  .honk-app .options-toggle-desktop{
    display:none !important;
  }
  .honk-app .options-toggle-mobile{
    display:inline-flex !important;
  }

  /* Add padding to content area for options button */
  .honk-app .honk-content{
    padding-bottom:70px;
  }

  .honk-app .options-toggle{
    position:absolute;
    bottom:25px;
    left:21px;
    transform:none;
  }
  .honk-app .options-toggle:hover{
    transform:translateY(-1px);
  }
  
  .honk-app .options-panel{
    flex-direction:column !important;
    gap:10px !important;
    padding:16px !important;
    align-items:center !important;
  }

  .honk-app .options-section{
    align-items:center !important;
    width:100% !important;
  }

  .honk-app .section-controls{
    justify-content:center !important;
    width:100% !important;
  }

  .honk-app .option-checkbox,
  .honk-app .option-btn{
    width:100%;
    flex:1 1 100%;
  }
  .honk-app .option-checkbox[for="hoverToggle"]{
    display:none;
  }
}

/* BRANDING PANEL - Resilient against theme interference */
.honk-app .branding-panel{
  margin:0 !important;
  padding:10px 18px;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px;
  background:#fff !important;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
}

/* Left side: Icon + "Honk by signsofunrest.ca 2026" */
.honk-app .brand-left{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px;
  font-size:13px;
  color:var(--ink-2);
  padding-left:11px;
  white-space:nowrap;
  flex-shrink:0 !important;
  margin-left:-3px !important;
  margin-right:auto !important;
}

.honk-app .brand-icon{
  width:35px;
  height:35px;
  object-fit:contain;
  opacity:0.95;
  flex-shrink:0;
  margin-left:-3px;
  color:transparent;
}

/* Center: Site/Owner Name from settings */
.honk-app .brand-center{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  text-align:center !important;
  font-size:13px;
  color:var(--ink-2);
  white-space:nowrap;
  pointer-events:none;
}

/* Right side: Maple Icon + "Made in Canada" */
.honk-app .brand-right{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px;
  font-size:13px;
  color:var(--ink-2);
  white-space:nowrap;
  padding-right:11px;
  flex-shrink:0 !important;
  margin-left:auto !important;
  margin-right:0 !important;
  justify-self:flex-end !important;
}

.honk-app .maple-icon{
  width:35px;
  height:35px;
  object-fit:contain;
  opacity:0.95;
  flex-shrink:0;
  color:transparent;
}

/* Mobile responsive */
@media (max-width:992px){
  .honk-app .branding-panel{
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:12px;
    padding:12px 18px;
    position:static !important;
  }

  .honk-app .brand-left{
    padding-left:0;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .honk-app .brand-right{
    padding-right:0;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .honk-app .brand-center{
    position:static !important;
    transform:none !important;
    left:auto !important;
    order:-1;
    width:100%;
    pointer-events:auto;
  }
}

.honk-app .sr-only{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(50%);clip:rect(0 0 0 0);overflow:hidden}

/* MP Lookup widget */
.honk-app #mp-lookup{
  margin-top:12px;
  margin-left:auto;
  margin-right:auto;
  padding-top:8px;
  border-top:1px solid var(--border);
  max-width:480px;
  line-height:1.5;
  width: 100%; /* Ensure it doesn't exceed container */
  box-sizing: border-box;
}
.honk-app #mp-lookup label{
  font-weight:600;
  display:block;
  margin-bottom:4px;
  color:#111827 !important;
}
.honk-app #mp-lookup input[type="text"]{
  padding:0.4rem 0.5rem;
  font-size:1rem;
  width:100%;
  max-width:260px;
  box-sizing:border-box;
  margin-top:0.25rem;
  margin-right:0.5rem;
  display:inline-block;
  color:#111827 !important;
  background:#ffffff !important;
  border:1px solid var(--border);
  min-height:37px;
}
.honk-app #mp-lookup button{
  margin-top:0.25rem;
}
.honk-app #mp-result{
  margin-top:0.75rem;
  margin-left:auto;
  margin-right:auto;
  max-width:480px;
  font-size:0.95rem;
  color:#111827 !important;
  overflow-wrap: break-word; /* Break long text */
  word-wrap: break-word;
}

/* Mobile: Stack MP lookup form elements */
@media (max-width:480px){
  .honk-app #mp-lookup input[type="text"]{
    max-width: 100%;
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.5rem;
    display: block;
  }
  .honk-app #mp-lookup button{
    width: 100%;
    display: block;
  }
}

/* MLA Lookup widget - Provincial/Territorial Representatives */
.honk-app #mla-lookup{
  margin-top:12px;
  margin-left:auto;
  margin-right:auto;
  padding-top:8px;
  border-top:1px solid var(--border);
  max-width:480px;
  line-height:1.5;
}
.honk-app #mla-lookup label{
  font-weight:600;
  display:block;
  margin-bottom:4px;
  color:#111827 !important;
}
.honk-app #mla-lookup select{
  padding:0.4rem 0.5rem;
  font-size:1rem;
  width:100%;
  max-width:260px;
  box-sizing:border-box;
  margin-top:0.25rem;
  margin-right:0.5rem;
  display:inline-block;
  color:#111827 !important;
  background:#ffffff !important;
  border:1px solid var(--border);
  border-radius:4px;
  cursor:pointer;
  min-height:37px;
}
.honk-app #mla-lookup input[type="text"]{
  padding:0.4rem 0.5rem;
  font-size:1rem;
  width:100%;
  max-width:260px;
  box-sizing:border-box;
  margin-top:0.25rem;
  margin-right:0.5rem;
  display:inline-block;
  color:#111827 !important;
  background:#ffffff !important;
  border:1px solid var(--border);
  min-height:37px;
}
.honk-app #mla-lookup button{
  margin-top:0.25rem;
}
.honk-app #mla-result{
  margin-top:0.75rem;
  margin-left:auto;
  margin-right:auto;
  max-width:480px;
  font-size:0.95rem;
  color:#111827 !important;
}

/* Accessible focus outlines */
.honk-app button:focus-visible,
.honk-app [role="button"]:focus-visible,
.honk-app select:focus-visible,
.honk-app input[type="text"]:focus-visible,
.honk-app input[type="checkbox"]:focus-visible,
.honk-app textarea:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Mobile header 2x2 grid - 992px and below */
@media (max-width:992px){
  /* SHOW subtitle again on mobile 2x2 grid */
  .honk-app .sub{
    display:block !important;
  }
  
  /* Top bar becomes 2x2 grid */
  .honk-app .bar{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    align-items:center;
    gap:8px;
    padding:6px 10px;
  }
  .honk-app .bar .title{
    grid-column:1/2;
    grid-row:1/2;
    margin:0;
  }
  .honk-app .bar .sub{
    /* Subtitle already hidden from 992px breakpoint */
    grid-column:2/3;
    grid-row:1/2;
    margin:0;
    text-align:right;
    font-size:13px;
  }
  .honk-app .bar .dropdown-help-wrapper{
    grid-column:1/3;
    grid-row:2/3;
    width:100%;
    justify-content:center;
  }
  .honk-app .bar select{
    width:100%;
  }
  .honk-app .title-icon{
    width:60px;
    height:60px;
    margin-right:-1px;
  }
}

/* Landscape mode - no font-size reduction */
@media (max-width:992px) and (orientation: landscape){
  /* Font size stays the same as portrait mode */
}

/* Keep button text color when clicked/active - SCOPED TO HONK ONLY */
.honk-app .btn.active,
.honk-app .btn:active,
.honk-app .btn.active:hover,
.honk-app .btn:active:hover {
  color: #363636 !important;
}

/* Mobile button sizing handled by media queries at lines 493-500 */

/* Reduce outer margins on mobile for tighter layout */
@media (max-width: 992px) {
  .honk-app #honk-container {
    margin: 2px !important;
    padding: 2px !important;
  }
}


/* ========================================
   Storage Warning Banner
   ======================================== */

.honk-storage-warning {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.honk-storage-warning button:hover {
  background: #d97706 !important;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.honk-storage-warning button:active {
  transform: translateY(0);
}

/* ======================================== */

/* ========================================
   Footer Link Styling
   Make link look like regular text
   ======================================== */

.footer-link {
  /* Remove all link styling */
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  
  /* Add subtle hover effect (optional) */
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.footer-link:hover {
  opacity: 0.8; /* Very subtle darkening on hover */
}

.footer-link:visited {
  color: inherit !important;
}

.footer-link:focus {
  outline: 1px dotted currentColor; /* Accessibility - visible focus */
  outline-offset: 2px;
}

/* ======================================== */