/*
Script Name - style.css
Author - Richard

Purpose -
Controls the design, layout, and responsive behavior of Drakir's private
personal homepage.

Steps -
1) Defines the lavender, deep-purple, and antique-gold color palette
2) Displays the complete fantasy office banner without cropping
3) Creates the 60/40 calendar and link-panel desktop layout
4) Styles the category dropdown and link tiles
5) Changes the dashboard to a calendar-first stacked layout on mobile
6) Reduces or disables animation when the browser requests reduced motion

Desktop and Laptop Layout -
- Calendar uses approximately 60% of the available dashboard width
- Link panel uses approximately 40% of the available dashboard width
- Calendar and link panel are aligned at the top
- Link panels expand naturally without internal scrolling

Responsive Breakpoints -
- Above 1100px - Full desktop layout
- 781px to 1100px - Compact laptop layout
- 521px to 780px - Stacked tablet and mobile layout
- 520px and below - Single-column phone layout

Accessibility -
- Provides visible keyboard focus indicators
- Includes the sr-only class for screen-reader labels
- Honors the browser's reduced-motion preference

Accompanying files -
- HTML file - index.html
- CSS file - style.css
- JS file - script.js

Important Notes -
- Change the main page colors using the variables in :root
- Change the side-panel and gold accent colors using their named variables
- Keep the dashboard grid at 3fr/2fr to preserve the 60/40 layout
- Do not add an internal scrollbar or fixed height to the link panel
- The banner must remain width: 100% and height: auto to prevent cropping
*/

/* Color Palette */
:root {
  --page: #725c87;
  --page-deep: #4f3b65;
  --card: rgba(255, 253, 255, 0.94);
  --card-soft: #faf7fc;
  --panel-purple: #4b3269;
  --panel-purple-hover: #61467d;
  --purple: #72509a;
  --purple-dark: #4b3269;
  --purple-soft: #ece3f4;
  --purple-hover: #e3d5ee;
  --gold: #c9a45d;
  --gold-bright: #ebce82;
  --ivory: #fff5dc;
  --text: #30253b;
  --muted: #70647b;
  --border: #d8cce4;
  --shadow: 0 12px 30px rgba(35, 20, 48, 0.24);
}

/* Global Page Foundation */
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--page-deep); }
body {
  min-height: 100%; margin: 0; color: var(--text);
  background: radial-gradient(circle at 15% 0%, rgba(174,145,197,.48), transparent 36rem), linear-gradient(145deg, var(--page), var(--page-deep));
  font-family: Inter, "Segoe UI", Verdana, Arial, sans-serif; font-size: 16px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  visibility: hidden;
}

/* Main Page and Hero Banner */
.page-wrapper { width: min(1500px, calc(100% - 32px)); min-height: 100dvh; margin: 0 auto; padding: 16px 0 28px; }
.hero-banner { width: 100%; overflow: hidden; border: 2px solid var(--gold); border-radius: 18px; background: #281b2b; box-shadow: var(--shadow); }
.hero-banner img { display: block; width: 100%; height: auto; }

/* Calendar and Link-Panel Dashboard */
.dashboard-layout { display: grid; grid-template-columns: minmax(0,3fr) minmax(360px,2fr); gap: 18px; align-items: start; margin-top: 18px; }
.dashboard-card { min-width: 0; overflow: hidden; border: 2px solid var(--gold); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.calendar-card { padding: 8px; }
.calendar-card iframe { display: block; width: 100%; height: 660px; border: 0; border-radius: 11px; background: #fff; }
.links-card { padding: 14px; color: var(--ivory); background: var(--panel-purple); }

/* Link Category Selector */
.panel-selector { position: relative; margin-bottom: 14px; }
.panel-selector::after { content: "⌄"; position: absolute; top: 50%; right: 18px; color: var(--gold-bright); font-size: 1.4rem; line-height: 1; pointer-events: none; transform: translateY(-58%); }
.panel-selector select { width: 100%; min-height: 52px; padding: 10px 50px 10px 16px; border: 1px solid rgba(235,206,130,.45); border-radius: 12px; color: var(--ivory); background: linear-gradient(135deg,#573b73,var(--panel-purple)); box-shadow: 0 4px 12px rgba(25,14,34,.18); font: 700 1.2rem/1.2 Inter,"Segoe UI",sans-serif; cursor: pointer; appearance: none; }
.panel-selector select:hover { border-color: var(--gold-bright); }
.panel-selector select:focus-visible, .link-grid a:focus-visible { outline: 3px solid rgba(235,206,130,.55); outline-offset: 2px; }
.panel-selector select option { color: var(--ivory); background: var(--panel-purple); }
.panel-selector select option:checked { color: #fffaf0; background: var(--panel-purple-hover); }

/* Selectable Link Panels and Link Tiles */
.link-panel[hidden] { display: none; }
.link-panel.active { animation: panel-in 180ms ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.link-group + .link-group { margin-top: 16px; }
.link-group h2 { margin: 0 4px 8px; color: var(--ivory); font-size: .93rem; letter-spacing: .02em; }
.link-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.link-grid-single { grid-template-columns: 1fr; }
.link-grid a { display: flex; min-width: 0; min-height: 52px; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid rgba(235,206,130,.14); border-radius: 10px; color: var(--ivory); background: var(--panel-purple); text-decoration: none; transition: border-color 160ms ease,background-color 160ms ease,color 160ms ease,transform 160ms ease,box-shadow 160ms ease; }
.link-grid a::after { content: "›"; margin-left: auto; color: var(--gold-bright); font-size: 1.25rem; }
.link-grid a:hover { border-color: var(--gold-bright); color: #fffaf0; background: var(--panel-purple-hover); box-shadow: 0 0 0 1px rgba(235,206,130,.22),0 6px 16px rgba(220,180,92,.24),0 7px 18px rgba(28,14,39,.25); transform: translateY(-2px); }
.link-grid img { width: 27px; height: 27px; flex: 0 0 27px; object-fit: contain; }
.link-grid span { min-width: 0; overflow-wrap: anywhere; }
.link-grid small { display: block; margin-top: 2px; color: #d9c7e5; font-size: .72rem; line-height: 1.15; }
.link-with-details { overflow: hidden; border: 1px solid rgba(235,206,130,.14); border-radius: 10px; background: var(--panel-purple); }
.link-with-details > a { border: 0; border-radius: 0; }
.contact-details { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0 12px 10px 49px; color: #d9c7e5; font-size: .76rem; }

/* Accessibility Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Responsive Layouts */
@media (max-width: 1100px) {
  .page-wrapper { width: min(100% - 22px,1500px); padding-top: 11px; }
  .dashboard-layout { grid-template-columns: minmax(0,3fr) minmax(320px,2fr); gap: 12px; margin-top: 12px; }
  .calendar-card iframe { height: 610px; }
  .links-card { padding: 11px; }
  .link-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .page-wrapper { width: min(100% - 16px,700px); padding: 8px 0 18px; }
  .hero-banner, .dashboard-card { border-radius: 12px; }
  .dashboard-layout { grid-template-columns: 1fr; gap: 12px; }
  .calendar-card { order: 1; padding: 5px; }
  .links-card { order: 2; }
  .calendar-card iframe { height: 560px; }
  .link-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .calendar-card iframe { height: 500px; }
  .panel-selector select { min-height: 48px; font-size: 1.05rem; }
  .link-grid { grid-template-columns: 1fr; }
  .link-grid a { min-height: 50px; }
}

/* Reduced-Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}